jpskill.com
🛠️ 開発・MCP コミュニティ

UnoCSSは、Tailwind CSSの上位互換にあたる高速なCSSエンジンで、設定やユーティリティ規則、ショートカット、WindやIconsなどのプリセット利用時に、効率的なCSS開発を支援するSkill。

unocss

UnoCSSのエンジンとして、ユーティリティルールやショートカットの作成、WindやIconsなどのプリセットとの連携を可能にするSkill。

📜 元の英語説明(参考)

UnoCSS instant atomic CSS engine, superset of Tailwind CSS. Use when configuring UnoCSS, writing utility rules, shortcuts, or working with presets like Wind, Icons, Attributify.

🇯🇵 日本人クリエイター向け解説

一言でいうと

UnoCSSのエンジンとして、ユーティリティルールやショートカットの作成、WindやIconsなどのプリセットとの連携を可能にするSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o unocss.zip https://jpskill.com/download/5523.zip && unzip -o unocss.zip && rm unocss.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/5523.zip -OutFile "$d\unocss.zip"; Expand-Archive "$d\unocss.zip" -DestinationPath $d -Force; ri "$d\unocss.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して unocss.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → unocss フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-17
取得日時
2026-05-18
同梱ファイル
24

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

[Skill 名] unocss UnoCSS は、柔軟性と拡張性を備えた、インスタントなアトミック CSS エンジンです。コアは特定の意見を持たず、すべての CSS ユーティリティはプリセットを介して提供されます。Tailwind CSS のスーパーセットであるため、基本的な構文の使用には Tailwind の知識を再利用できます。

重要: UnoCSS のコードを記述する前に、エージェントはプロジェクトのルートにある uno.config.* または unocss.config.* ファイルを確認し、利用可能なプリセット、ルール、およびショートカットを理解する必要があります。プロジェクトの設定が不明確な場合は、attributify モードやその他の高度な機能の使用を避け、基本的な class の使用に留めてください。

このスキルは UnoCSS 66.x に基づいており、2026-01-28 に生成されました。

コア

トピック 説明 参照
設定 設定ファイルのセットアップとすべての設定オプション core-config
ルール CSS ユーティリティを生成するための静的および動的ルール core-rules
ショートカット 複数のルールを単一の短縮形に結合 core-shortcuts
テーマ 色、ブレークポイント、デザイン・トークン用のテーマシステム core-theme
バリアント hover:、dark:、レスポンシブなどのバリエーションをルールに適用 core-variants
抽出 UnoCSS がソースコードからユーティリティを抽出する方法 core-extracting
セーフリストとブロックリスト 特定のユーティリティを強制的に含めるか除外する core-safelist
レイヤーとプリフライト CSS レイヤーの順序付けと生の CSS の注入 core-layers

プリセット

主要プリセット

トピック 説明 参照
Preset Wind3 Tailwind CSS v3 / Windi CSS 互換プリセット (最も一般的) preset-wind3
Preset Wind4 最新の CSS 機能を備えた Tailwind CSS v4 互換プリセット preset-wind4
Preset Mini カスタムビルドに不可欠なユーティリティを備えた最小限のプリセット preset-mini

機能プリセット

トピック 説明 参照
Preset Icons Iconify と任意のアイコンセットを使用した純粋な CSS アイコン preset-icons
Preset Attributify class の代わりに HTML 属性でユーティリティをグループ化 preset-attributify
Preset Typography タイポグラフィのデフォルト設定のためのプロスクラス preset-typography
Preset Web Fonts Google Fonts やその他のウェブフォントの簡単な統合 preset-web-fonts
Preset Tagify ユーティリティを HTML タグ名として使用 preset-tagify
Preset Rem to Px ユーティリティの rem 単位を px に変換 preset-rem-to-px

トランスフォーマー

トピック 説明 参照
Variant Group 共通のプレフィックスを持つユーティリティをグループ化するための短縮形 transformer-variant-group
Directives CSS ディレクティブ: @apply, @screen, theme(), icon() transformer-directives
Compile Class 複数のクラスを1つのハッシュ化されたクラスにコンパイル transformer-compile-class
Attributify JSX JSX/TSX で値なしの attributify をサポート transformer-attributify-jsx

統合

トピック 説明 参照
Vite 統合 Vite との UnoCSS のセットアップとフレームワーク固有のヒント integrations-vite
Nuxt 統合 Nuxt アプリケーション用の UnoCSS モジュール integrations-nuxt
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

UnoCSS is an instant atomic CSS engine designed to be flexible and extensible. The core is un-opinionated - all CSS utilities are provided via presets. It's a superset of Tailwind CSS, so you can reuse your Tailwind knowledge for basic syntax usage.

Important: Before writing UnoCSS code, agents should check for uno.config.* or unocss.config.* files in the project root to understand what presets, rules, and shortcuts are available. If the project setup is unclear, avoid using attributify mode and other advanced features - stick to basic class usage.

The skill is based on UnoCSS 66.x, generated at 2026-01-28.

Core

Topic Description Reference
Configuration Config file setup and all configuration options core-config
Rules Static and dynamic rules for generating CSS utilities core-rules
Shortcuts Combine multiple rules into single shorthands core-shortcuts
Theme Theming system for colors, breakpoints, and design tokens core-theme
Variants Apply variations like hover:, dark:, responsive to rules core-variants
Extracting How UnoCSS extracts utilities from source code core-extracting
Safelist & Blocklist Force include or exclude specific utilities core-safelist
Layers & Preflights CSS layer ordering and raw CSS injection core-layers

Presets

Main Presets

Topic Description Reference
Preset Wind3 Tailwind CSS v3 / Windi CSS compatible preset (most common) preset-wind3
Preset Wind4 Tailwind CSS v4 compatible preset with modern CSS features preset-wind4
Preset Mini Minimal preset with essential utilities for custom builds preset-mini

Feature Presets

Topic Description Reference
Preset Icons Pure CSS icons using Iconify with any icon set preset-icons
Preset Attributify Group utilities in HTML attributes instead of class preset-attributify
Preset Typography Prose classes for typographic defaults preset-typography
Preset Web Fonts Easy Google Fonts and other web fonts integration preset-web-fonts
Preset Tagify Use utilities as HTML tag names preset-tagify
Preset Rem to Px Convert rem units to px for utilities preset-rem-to-px

Transformers

Topic Description Reference
Variant Group Shorthand for grouping utilities with common prefixes transformer-variant-group
Directives CSS directives: @apply, @screen, theme(), icon() transformer-directives
Compile Class Compile multiple classes into one hashed class transformer-compile-class
Attributify JSX Support valueless attributify in JSX/TSX transformer-attributify-jsx

Integrations

Topic Description Reference
Vite Integration Setting up UnoCSS with Vite and framework-specific tips integrations-vite
Nuxt Integration UnoCSS module for Nuxt applications integrations-nuxt

同梱ファイル

※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。