implement-frontend

フロントエンドの実装

リポジトリがすでに次のスタックに準拠している場合に、このスキルを適用してください。

• React + TypeScript + Next.js
• React Hook Form + Zod
• React Query または Connect Query
• Proto 生成の API 型（使用されている場合）

ローカルの規約が異なる場合は、既存のプロジェクト標準を維持し、応用可能な原則のみを適用してください。

基本的なワークフロー

1. 編集前に責務の境界を定めます。
   • レンダリングのみの処理はコンポーネントに保ちます。
   • データ取得、マッピング、ビジネスルールはフックに保ちます。
   • サーバー状態はクエリーキャッシュに、フォーム状態は RHF に、UI 専用の状態は useState に保ちます。
2. 厳密な型付けと明示的なマッピングを用いて実装します。
   • any、as any、ignore ディレクティブなどの型エスケープは避けます。
   • キャストするのではなく、マッパーで API モデルを UI モデルに変換します。
3. 完了前に信頼性と UX を確認します。
   • 読み込み中、エラー、空の状態に対応します。
   • 競合状態が起こり得る非同期処理には、キャンセルとクリーンアップを追加します。
   • キーボード操作のアクセシビリティとフォーカスの挙動を維持します。

必須チェック項目

• 重複した状態と useEffect による同期ループを取り除きます。
• API 呼び出しとビジネスロジックをレンダリングコンポーネントの外に保ちます。
• 影響を受けるクエリーキーのみを無効化または更新します。
• ロールバックしても安全な楽観的更新のみを使用します。
• console.*、debugger、不要なコード、未使用のインポートを取り除きます。

スタックに関するガードレール

• リポジトリで RHF + Zod を使用している場合は、createZodResolver を使用し、zodResolver(schema as any) は避けます。
• RHF を使用する場合は、依存配列に form オブジェクト全体を含めないようにします。
• Proto のコントラクトを使用している場合、Proto から UI への変換は専用のマッパーファイル（例：utils/proto-mappers.ts）に保ちます。

参考資料

• フォーム、フック、状態の所有者、クエリーの使用方法、アクセシビリティについては react-patterns.md を参照してください。
• 型の健全性、Proto の型付け、コードの構成については typescript-patterns.md を参照してください。