tailwind-design-system について
Tailwind CSS で本番向けのデザインシステムを構築するスキルです。コンポーネントライブラリやプロダクト UI の開発に向け、トークン、バリアント、レスポンシブ設計、アクセシビリティ、テーマ設定を扱います。
主な機能
- 01デザイントークンとテーマの構築
- 02コンポーネントバリアントの定義
- 03レスポンシブなコンポーネント設計
- 04アクセシビリティの適用
- 05ダークモードと配色の設定
活用シーン
- 01Tailwind CSS によるコンポーネントライブラリの作成
- 02コードベース内の UI パターンの標準化
- 03Tailwind CSS の移行や拡張
- 04UI のテーマとダークモードの設定
インストール
コマンドをコピーしてターミナルで実行します。
$
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 対応