tailwind-design-system について
コンポーネントライブラリの作成や標準化に取り組むチーム向けに、Tailwind CSSのデザインシステム構築を支援するスキルです。トークン、バリアント、レスポンシブ設計、テーマ、アクセシビリティを扱い、実装ガイドも備えます。
主な機能
- 01デザイントークンとテーマ
- 02Tailwindコンポーネントのバリアント
- 03レスポンシブなコンポーネントパターン
- 04アクセシブルなUIコンポーネント
- 05ダークモードとカラースキーム
活用シーン
- 01Tailwindコンポーネントライブラリの作成
- 02コードベース全体のUIパターンの標準化
- 03Tailwindテーマの拡張
- 04レスポンシブでアクセシブルなコンポーネントの構築
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/tailwind-design-systemを入力して読み込まれたか確認します。
同梱ファイルresources/implementation-playbook.md
詳細
Tailwind デザインシステム
デザイントークン、コンポーネントのバリアント、レスポンシブパターン、アクセシビリティを含め、Tailwind CSS で本番環境に対応したデザインシステムを構築します。
このスキルを使用するタイミング
- Tailwind でコンポーネントライブラリを作成する場合
- デザイントークンとテーマ設定を実装する場合
- レスポンシブでアクセシブルなコンポーネントを構築する場合
- コードベース全体で UI パターンを標準化する場合
- Tailwind CSS に移行または拡張する場合
- ダークモードとカラースキームを設定する場合
このスキルを使用しないタイミング
- タスクが Tailwind デザインシステムと無関係な場合
- この範囲外の別のドメインやツールが必要な場合
手順
- 目標、制約、必要な入力を明確にします。
- 関連するベストプラクティスを適用し、結果を検証します。
- 実行可能な手順と検証方法を提示します。
- 詳細な例が必要な場合は、
resources/implementation-playbook.mdを開きます。
リソース
resources/implementation-playbook.md: 詳細なパターンと例。
コメント
Markdown 対応