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

unocss

Tailwind CSSの上位互換であるUnoCSSの設定やユーティリティルールの作成、プリセットの利用を効率化する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.

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

一言でいうと

Tailwind CSSの上位互換であるUnoCSSの設定やユーティリティルールの作成、プリセットの利用を効率化するSkill。

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

⬇ このSkillをダウンロード(.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-17
同梱ファイル
24
📖 Claude が読む原文 SKILL.md(中身を展開)

この本文は AI(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` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。