component-engineering

コンポーネントエンジニアリング仕様

このスキルは、プロフェッショナルで、アクセシブルかつコンポーザブルな React アーティファクトを構築するための正式な標準を定めています。 役割を果たすには、以下のリファレンスファイルを必ず読んでください。 - **アーキテクチャ**: `composition.md` - asChild、分類、コンポジション。 - **アクセシビリティ**: `accessibility.md` - キーボードマップ、ARIA、フォーカス管理。 - **スタイリング**: `styling.md` - `cn` ユーティリティ、データ属性、CVA、デザイントークン。 ### /component-review [file] 仕様の各柱に照らして、ファイルを厳密に監査します。 1. 先に進む前に、`references/` ディレクトリ内のすべてのリファレンスファイルを必ず読んでください。 2. `taxonomy.md` を使ってアーティファクトを分類してください。 3. **アクセシビリティ**を評価してください。`accessibility.md` に照らして、キーボードサポートとセマンティック HTML を必ず確認してください。 4. **アーキテクチャ**を評価してください。`composition.md` に照らして、モノリシックなパターンとコンポジションを必ず確認してください。 5. **スタイリング**を評価してください。`styling.md` に照らして、`data-slot` の使用とプロップのスプレッドを確認してください。 ### /component-create [name] [intent] 「アーキテクチャ優先」のワークフローに従って、新しいアーティファクトを構築します。 1. 適切なパターンを選択するため、関連する `references/*.md` ファイルを必ず読んでください。 2. **分類**のタイプを選択してください。 3. ベースとなる**セマンティック要素**または**ヘッドレスプリミティブ**を選択してください。 4. **キーボードマップ**を必ず実装してください。 5. コンポーネントがアクティベーター／トリガーの場合、`asChild` のサポートを必ず適用してください。 6. **データ属性**（`data-state`、`data-slot`）を必ず公開してください。 7. クラスをマージするには `cn` ユーティリティを使用してください。