frontend-ui-integration

スキル：フロントエンド UI の統合

目的

既存のバックエンド APIと連携し、デザインシステム、ルーティング、テストの規約に従って、主要な Web アプリケーションでユーザー向けのワークフローを実装または拡張します。

このスキルを使用する場合

• 1 つ以上の既存 API を利用する、主にUI/UX の変更である場合。
• バックエンドの契約、認証モデル、コアとなるビジネスルールがすでに存在する場合。
• 変更の影響範囲が Web フロントエンドのみであり、スキーマやサービスの所有範囲に変更がない場合。

入力

• 機能の説明：ユーザーフローとその成果を簡潔に記述したもの。
• 関連 API：エンドポイント、リクエスト／レスポンスの型、ソース定義へのリンク。
• 対象ルート／コンポーネント：パス、コンポーネント名、または機能モジュール。
• デザインの参考資料：Figma のリンク、または参考にする既存画面。
• 制約事項：パフォーマンス上限、アクセシビリティ要件、セキュリティ上の制約。

対象外

• 新しいバックエンドサービスの作成、または永続データモデルの変更。
• 認証／認可フローの変更。
• 新しいフロントエンドフレームワークやデザインシステムの導入。

規約

• フレームワーク：TypeScript を使用した React。
• ルーティング：既存のルーターとルートレイアウトのパターンを使用します。
• スタイリング：社内のデザインシステムのコンポーネント（Buttons、Inputs、Modals、Toasts など）を使用します。
• 状態管理：既存の状態管理ライブラリ（例：React Query、Redux、Zustand）を優先し、確立されたパターンに従います。

必須の動作

1. すべての props と API レスポンスに強い型付けを行い、UI の変更を実装します。
2. 既存のプリミティブを使用して、読み込み中、空、エラー、成功の各状態に対応します。
3. UI がキーボードで操作可能で、スクリーンリーダーに対応していることを確認します。
4. 該当する場合は、機能フラグと段階的なロールアウトの仕組みを尊重します。

必須の成果物

• 適切な機能モジュール内の更新済みコンポーネントとフック。
• コアとなる表示ロジックのユニットテスト。
• リポジトリですでに使用している場合は、新しいフローの統合テストまたはコンポーネントテスト（例：React Testing Library、Cypress、Playwright）。
• 動作変更を要約する簡潔なCHANGELOG または PR の説明文（このファイルではなく、PR に記載）。

実装チェックリスト

1. 該当する機能モジュールと既存コンポーネントを特定します。
2. バックエンド API と型を確認し、必要に応じて共有 TypeScript 型を更新します。
3. 既存のデータレイヤー経由で API 呼び出しを接続し、UI を実装します。
4. 新しい動作とエッジケースを網羅するテストを追加または更新します。
5. 必須の検証コマンドを実行します（以下を参照）。

検証

次のコマンドを実行します（プロジェクトに合わせて調整してください）。

• pnpm lint
• pnpm test -- --runInBand --watch=false
• pnpm typecheck（個別に設定されている場合）

次の条件を満たしたら、スキルは完了です。

• すべてのテスト、リンター、型チェックが成功している。
• 新しい UI が通常、エラー、境界ケースで指定どおりに動作する。
• 無関係なファイルやモジュールが変更されていない。

安全性とエスカレーション

• 要求された変更でバックエンドの契約変更が必要な場合は、作業を中断し、代わりにバックエンドに特化したタスクを依頼してください。
• デザインの参考資料が既存のアクセシビリティ基準と矛盾する場合は、アクセシビリティを優先し、PR の説明文で相違点を明示してください。