tailwind-design-system

Tailwind デザインシステム

Tailwind CSS を使用して、デザイントークン、コンポーネントバリアント、レスポンシブパターン、アクセシビリティを含む、本番環境に対応したデザインシステムを構築します。

このスキルを使用する場合

• Tailwind でコンポーネントライブラリを作成する場合
• デザイントークンとテーマを実装する場合
• レスポンシブでアクセシブルなコンポーネントを構築する場合
• コードベース全体で UI パターンを標準化する場合
• Tailwind CSS へ移行する、または拡張する場合
• ダークモードとカラースキームを設定する場合

このスキルを使用しない場合

• タスクが Tailwind デザインシステムと無関係である場合
• この範囲外の別のドメインやツールが必要である場合

手順

• 目標、制約、必要な入力を明確にします。
• 関連するベストプラクティスを適用し、結果を検証します。
• 実行可能な手順と検証方法を提供します。
• 詳細な例が必要な場合は、resources/implementation-playbook.md を開きます。

リソース

• 詳細なパターンと例については、resources/implementation-playbook.md を参照してください。

制限事項

• このスキルは、タスクが上記の範囲に明確に一致する場合にのみ使用してください。
• 出力を、環境固有の検証、テスト、または専門家によるレビューの代替物として扱わないでください。
• 必要な入力、権限、安全境界、または成功基準が欠けている場合は、作業を停止して確認を求めてください。