Component Triad Skill
このプロジェクトの "Strict Rule" である「3 Big Requirements」を遵守するため、コンポーネント開発において「実装・テスト・Storybook」の 3 点セットを常に同時に扱うことを支援します。
主な機能
- •
Triad Generation (三位一体生成)
- •新しいコンポーネントを作成する際、必ず以下の 3 つのファイルをセットで作成（または作成を提案）します。
- •
[Name].tsx- コンポーネント実装 - •
__tests__/[Name].test.tsx- ユニットテスト - •
[Name].stories.tsx- Storybook ストーリー
- •
- •既存のコンポーネントを修正する場合も、関連するテストとストーリーが存在するか確認し、なければ作成を促します。
- •新しいコンポーネントを作成する際、必ず以下の 3 つのファイルをセットで作成（または作成を提案）します。
- •
Triad Verification (三位一体検証)
- •コンポーネントを変更した後、そのコンポーネントに関連する検証のみをピンポイントで実行するコマンドを提案します。
- •コマンド例:
pnpm test components/path/to/__tests__/Component.test.tsx
- •
Missing Triad Check (欠落チェック)
- •プロジェクト内をスキャンし、「
.tsxはあるがtestやstoriesがないコンポーネント」をリストアップします。 - •これは技術的負債の返済タスクを作成する際に役立ちます。
- •実行方法:
pnpm run check:triadまたは AI エージェントに「Triad Check を実行して」と依頼します。
- •プロジェクト内をスキャンし、「
ファイルテンプレート（指針）
テスト (__tests__/*.test.tsx)
- •
@testing-library/reactを使用。 - •
LanguageProviderでラップしてレンダリングする（i18n 対応のため）。 - •主要な Props のバリエーションと、イベントハンドラの動作をテストする。
- •
as anyは禁止。適切な型定義を使用する。
Storybook (*.stories.tsx)
- •
LanguageProviderをデコレータとして含める。 - •
Defaultストーリーに加え、Loading,Error,Emptyなど、主要な状態を網羅する。 - •インタラクションテスト（
play関数）の使用を検討する。
使用例
- •「新しいボタンコンポーネントを作って」 → 3 点セットでコードを生成。
- •「このコンポーネントを修正して」 → テストとストーリーも同時に修正。