unocss
UnoCSS のインスタント Atomic CSS エンジン（Tailwind CSS のスーパーセット）に関するスキルです。UnoCSS の設定、ユーティリティルールやショートカットの記述、Wind・Icons・Attributify などのプリセットを扱う際に使用します。
description の原文を見る
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.
SKILL.md 本文
UnoCSS は、柔軟で拡張性の高いインスタント Atomic CSS エンジンです。コアは意見を持たない設計で、すべての CSS ユーティリティはプリセット経由で提供されます。Tailwind CSS のスーパーセットであるため、基本的な構文使用に関しては Tailwind の知識を再利用できます。
重要: UnoCSS コードを書く前に、プロジェクトルートの uno.config.* または unocss.config.* ファイルをチェックして、どのプリセット、ルール、ショートカットが利用可能かを理解してください。プロジェクトセットアップが不明な場合は、attributify モードやその他の高度な機能の使用を避け、基本的な class 使用に留めてください。
このスキルは UnoCSS 66.x に基づいており、2026-01-28 に生成されました。
Core
| Topic | Description | Reference |
|---|---|---|
| Configuration | コンフィグファイルのセットアップとすべてのコンフィギュレーションオプション | core-config |
| Rules | CSS ユーティリティを生成するための静的および動的ルール | core-rules |
| Shortcuts | 複数のルールを単一のショートハンドに組み合わせる | core-shortcuts |
| Theme | 色、ブレークポイント、デザイントークンのテーミングシステム | core-theme |
| Variants | hover:、dark:、responsive などのバリエーションをルールに適用 | core-variants |
| Extracting | UnoCSS がソースコードからユーティリティを抽出する方法 | core-extracting |
| Safelist & Blocklist | 特定のユーティリティを強制的に含めるか除外する | core-safelist |
| Layers & Preflights | CSS レイヤーの順序付けと生 CSS の注入 | core-layers |
Presets
Main Presets
| Topic | Description | Reference |
|---|---|---|
| Preset Wind3 | Tailwind CSS v3 / Windi CSS 互換プリセット (最も一般的) | preset-wind3 |
| Preset Wind4 | 最新 CSS 機能を搭載した Tailwind CSS v4 互換プリセット | preset-wind4 |
| Preset Mini | カスタムビルド用の必須ユーティリティを備えた最小限のプリセット | preset-mini |
Feature Presets
| Topic | Description | Reference |
|---|---|---|
| Preset Icons | Iconify を使用した任意のアイコンセットの純粋 CSS アイコン | preset-icons |
| Preset Attributify | ユーティリティをクラスの代わりに HTML 属性でグループ化 | preset-attributify |
| Preset Typography | タイポグラフィのデフォルトのための Prose クラス | 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 |
Transformers
| Topic | Description | Reference |
|---|---|---|
| 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 |
Integrations
| Topic | Description | Reference |
|---|---|---|
| Vite Integration | Vite とフレームワーク固有のヒントを使用した UnoCSS のセットアップ | integrations-vite |
| Nuxt Integration | Nuxt アプリケーション用の UnoCSS モジュール | integrations-nuxt |
ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ
詳細情報
- 作者
- antfu
- リポジトリ
- antfu/skills
- ライセンス
- MIT
- 最終更新
- 不明
Source: https://github.com/antfu/skills / ライセンス: MIT
関連スキル
doubt-driven-development
重要な判断はすべて、本番環境への展開前に新しい視点から対抗的レビューを実施します。速度より正確性が重要な場合、不慣れなコードを扱う場合、本番環境・セキュリティに関わるロジック・取り消し不可の操作など影響度が高い場合、または後でバグを修正するよりも今検証する方が効率的な場合に活用してください。
apprun-skills
TypeScriptを使用したAppRunアプリケーションのMVU設計に関する総合的なガイダンスが得られます。コンポーネントパターン、イベントハンドリング、状態管理（非同期ジェネレータを含む）、パラメータと保護機能を備えたルーティング・ナビゲーション、vistestを使用したテストに対応しています。AppRunコンポーネントの設計・レビュー、ルートの配線、状態フローの管理、AppRunテストの作成時に活用してください。
desloppify
コードベースのヘルスチェックと技術負債の追跡ツールです。コード品質、技術負債、デッドコード、大規模ファイル、ゴッドクラス、重複関数、コードスメル、命名規則の問題、インポートサイクル、結合度の問題についてユーザーが質問した場合に使用してください。また、ヘルススコアの確認、次の改善項目の提案、クリーンアップ計画の作成をリクエストされた際にも対応します。29言語に対応しています。
debugging-and-error-recovery
テストが失敗したり、ビルドが壊れたり、動作が期待と異なったり、予期しないエラーが発生したりした場合に、体系的な根本原因デバッグをガイドします。推測ではなく、根本原因を見つけて修正するための体系的なアプローチが必要な場合に使用してください。
test-driven-development
テスト駆動開発により実装を進めます。ロジックの実装、バグの修正、動作の変更など、あらゆる場面で活用できます。コードが正常に動作することを証明する必要がある場合、バグ報告を受けた場合、既存機能を修正する予定がある場合に使用してください。
incremental-implementation
変更を段階的に実施します。複数のファイルに影響する機能や変更を実装する場合に使用してください。大量のコードを一度に書こうとしている場合や、タスクが一度では完結できないほど大きい場合に活用します。