スキル自身の言葉で
このスキルは、shadcn/ui コンポーネント（Radix UI プリミティブと Tailwind CSS）、Tailwind CSS によるユーティリティファーストなスタイリング、キャンバスベースのビジュアルデザインシステムを組み合わせて、アクセシブルな React ユーザーインターフェースを構築します。対象は Next.js、Vite、Remix、Astro のプロジェクトです。コンポーネントは CLI 経由でコードベースにコピーされるため、完全な制御と TypeScript の型安全性が得られます。
このスキルは、レスポンシブレイアウト、ダークモード、デザイントークン、フォーム検証、データテーブル、そして美術館品質のビジュアル構成をカバーします。コンポーネントパターン、テーマ設定、アクセシビリティ（ARIA、キーボードナビゲーション）、レスポンシブブレークポイント、Tailwind のカスタマイズに関する参照ドキュメントも含まれています。Python スクリプトがコンポーネントのインストールと設定生成を自動化します。
生成されるもの
- カスタムテーマのトークン、色、フォント、スペーシング、ブレークポイントの拡張を含む tailwind.config.js が生成されます。
仕組み
- 01Shadcn/ui を Tailwind で初期化する
npx shadcn@latest init を実行して shadcn/ui と Tailwind CSS の両方を設定します。フレームワーク、TypeScript、パス、テーマの設定について確認が求められます。
- 02コードベースにコンポーネントを追加する
npx shadcn@latest add button card dialog form でコンポーネントをインストールします。これによりプロジェクトにコピーされ、完全な制御とカスタマイズが可能になります。
- 03ユーティリティクラスで構成する
shadcn/ui コンポーネントと Tailwind のユーティリティクラスを組み合わせて、JSX の className 属性内で直接、レスポンシブレイアウト、スペーシング、色、ホバー状態を指定します。
- 04ダークモードのバリアントを適用する
next-themes を使ってテーマを切り替え、すべてのテーマ対象要素に dark: プレフィックス付きのユーティリティクラスを追加して、一貫したダークモード対応を実現します。
- 05Radix のアクセシビリティを活用する
Radix UI プリミティブは、追加設定なしで組み込みの ARIA パターン、キーボードナビゲーション、フォーカス管理を提供します。