react-container-presentation-component

コンテナー／プレゼンテーションコンポーネント

このスキルを使用すると、Container/Presentation パターンに従った React コンポーネントを src/components 配下に作成できます。

詳しいルールについては、このスキルに同梱されている次のリファレンスを参照してください。

• references/component-architecture.md
• references/typescript-and-scss-rules.md

/react-container-presentation-component の入力が不完全な場合は、ファイルを作成する前に質問してください。

使用する場面

• ユーザーが /react-container-presentation-component を実行したとき
• ユーザーが Container/Presentation パターンに従った React コンポーネントを明示的に依頼したとき
• Container/Presentation パターンにおける ui と features の分類について、ユーザーが判断や実装の支援を求めたとき

必須の質問

次の情報が不足している場合は、ask_user を使ってユーザーに質問してください。

1. コンポーネント名
2. 種類（ui または features）
3. 既存のコンポーネントを置き換えるかどうか（ui を作成する場合のみ）

質問の要件：

• 種類は選択肢（ui、features）として提示してください
• コンポーネント名は PascalCase にするよう求めてください
• ui の場合は、既存の features で Mantine などの UI ライブラリを直接使用している箇所を、新しいコンポーネントに置き換えるかどうか質問してください

手順

1. 既存のコンポーネントを確認する

• src/components/ui/<ComponentName> または src/components/features/<ComponentName> がすでに存在するか確認してください。
• 存在する場合は上書きせず、希望する対応をユーザーに確認してください。

2. 対象ディレクトリを決める

• ui：src/components/ui/<ComponentName>
• features：src/components/features/<ComponentName>

3. 分類を再確認する（ui が指定された場合のみ）

• ui が指定されていても、ファイルを作成する前に references/component-architecture.md の Reclassification Rule を確認してください。
• 実装に状態管理、副作用、非同期処理、コンテキスト／ストアの更新、またはビジネスロジックが含まれる場合は、features として扱ってください。
• features に近い場合は ui として進めず、ask_user を使って、続行する前に次のいずれかを確認してください。
  • Create as features
  • Keep ui and move state/logic to parent or features

4. 必要なファイルを作成する

• ui：index.tsx、index.module.scss、index.stories.tsx
• features：index.tsx、use<ComponentName>.tsx、presentation.tsx、types.ts、presentation.module.scss、presentation.stories.tsx

5. 既存の使用箇所を置き換える（ui を作成する場合のみ）

• ユーザーの承認がある場合に限り、既存の features で Mantine などの UI ライブラリを直接使用している同等の実装を、新しい ui コンポーネントに置き換えてください。

6. 検証する

• ビルドと lint コマンドを実行し、どちらも成功することを確認してください。新規作成または更新したファイルが原因の問題があれば修正してください。
• ストーリーの状態を決める際は、references/component-architecture.md の Storybook Minimum に従ってください。
• Storybook のチェックを実行するかどうか、ask_user を使ってユーザーに確認してください（例：「実行」／「今回はスキップ」）。
• ユーザーが「実行」を選択した場合のみ、npm run storybook を実行してください。
• ユーザーが「今回はスキップ」を選択した場合は、最終報告で Storybook の実行をスキップしたことを明記してください。

出力要件

• 作成したファイルの一覧を報告してください。
• 置き換えを行った場合は、変更したファイルの一覧と置き換え内容を報告してください。
• 作成したコンポーネントの使用例を1つ提示してください。
• Storybook の検証を実行したか（実行／スキップ）を報告し、実行した場合は使用したコマンドも記載してください。
• コンポーネントを ui または features に分類した理由を説明してください。
• 状態、副作用、レンダリングの責務をどこに配置したかを要約してください。
• 依存関係の方向に違反がなかったか確認してください。
• 未解決の項目があれば明確に記載してください。