tailwind-design-system

概要

tailwind-design-systemとは？

tailwind-design-systemは、Tailwind CSS v4を使ってスケーラブルで本番環境対応のデザインシステムを構築するための実践的なスキルです。CSSファーストの設定、デザイントークン、コンポーネントのバリアント、レスポンシブパターン、アクセシビリティに重点を置いています。このスキルは、フロントエンド開発者、UIデザイナー、インターフェースパターンの標準化やTailwind v3からv4への移行を検討しているチーム向けに設計されています。

どんな人におすすめ？

• Tailwind CSS v4でコンポーネントライブラリを作成するフロントエンドチーム
• デザイントークンやテーマ設定を実装する開発者
• レスポンシブでアクセシブルなコンポーネントを設計するUIデザイナー
• 複数コードベースでUIパターンを標準化したいプロジェクト
• Tailwind v3からv4へ移行中のチーム

どんな課題を解決する？

• スケーラブルなデザインシステムのセットアップを簡素化
• v4特有のパターンや移行方法のガイド提供
• UIコンポーネントやデザイントークンの標準化支援
• アクセシビリティやレスポンシブデザインのベストプラクティスをサポート

使い方

インストール手順

1. 以下のコマンドでtailwind-design-systemをインストールします：

   npx skills add https://github.com/wshobson/agents --skill tailwind-design-system
   

2. まずSKILL.mdファイルを確認し、全体のワークフローと重要なコンセプトを把握しましょう。
3. 次に以下の補助ファイルを参照してください：
   • 一般的な使い方はREADME.md
   • エージェント別のガイダンスはAGENTS.md
   • 設定詳細はmetadata.json
   • 高度なTailwind v4パターンはreferences/advanced-patterns.md

主要ファイルとフォルダ

• SKILL.md: メインのワークフローと概要
• references/advanced-patterns.md: ネイティブCSSアニメーション、ダークモード、カスタムユーティリティ、移行のヒントなど高度な使い方
• references/: その他のガイドやパターン集

プロジェクトへの適用

• このスキルをテンプレートとして自分のリポジトリやツールに活用
• デザイントークン、コンポーネントバリアント、レスポンシブパターンをUI要件に合わせてカスタマイズ
• アニメーションやアクセシビリティ機能の実装には高度なパターンを参照

例：高度なTailwind v4パターン

• @starting-styleを使ったネイティブCSSアニメーションの活用
• CSSカスタムバリアントによるダークモードの実装
• ReactとRadix UIを使ったアクセシブルなダイアログやポップオーバーの構築

よくある質問

tailwind-design-systemはTailwind v3でも使えますか？

いいえ、このスキルはTailwind CSS v4に最適化されています。v3プロジェクトの場合は公式のアップグレードガイドを参照してください。

tailwind-design-systemを使う主なメリットは？

• スケーラブルで一貫性のあるUIデザインシステムの構築を加速
• CSSファーストのテーマ設定やレスポンシブデザインなど、Tailwind v4向けの最新パターンを提供
• アニメーション、アクセシビリティ、ダークモードの高度な例を紹介

高度な使用例はどこで見られますか？

references/advanced-patterns.mdファイルに詳細なコードサンプルや移行チェックリストがあります。

利用可能なリソースをすべてプレビューするには？

Filesタブを開いて、ネストされたreferencesやヘルパースクリプトを含む全ファイルツリーを確認してください。スキルの構造理解やワークフローへの適用に役立ちます。

どんな場合にtailwind-design-systemは適していませんか？

別のCSSフレームワークを使用している場合や、Tailwind v4への移行準備ができていない場合は適さない可能性があります。このスキルはTailwind v4特有のパターンとワークフローに焦点を当てています。