フロントエンドUI連携

エンタープライズコードベースで既存バックエンドAPIに対して型付き・テスト済みのフロントエンドワークフローを実装する再利用可能なスキル。

このスキルは、Droidが既存のバックエンドAPIに対してユーザー向けフローを実装または拡張する大規模エンタープライズフロントエンド（React/TypeScript、Next.js、または類似のもの）向けに設計されています。

​

セットアップ手順

このスキルをFactoryで使用するには、リポジトリに以下のディレクトリ構造を作成してください：

.factory/skills/frontend-ui-integration/
├── SKILL.md
├── references.md (任意)
├── design-system.md (任意)
└── accessibility-checklist.md (任意)

​

クイックスタート

1. スキルディレクトリを作成：

   mkdir -p .factory/skills/frontend-ui-integration
   

2. 以下のスキルコンテンツを.factory/skills/frontend-ui-integration/SKILL.md（またはskill.mdx）にコピー

FactoryにUI機能の実装を依頼すると、タスク説明に基づいてこのスキルが自動的に呼び出されます。

​

スキル定義

以下の内容を.factory/skills/frontend-ui-integration/SKILL.mdにコピーしてください：

---
name: frontend-ui-integration
description: 既存のバックエンドAPIと連携して、Webアプリケーションのユーザー向けワークフローを実装または拡張します。機能が主に既存APIに支えられたUI/UX変更で、Webフロントエンドのみに影響し、デザインシステム、ルーティング、テスト規約に従う必要がある場合に使用します。
---
# スキル: フロントエンドUI連携

## 目的

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

## このスキルを使うタイミング

- 機能が主に、1つ以上の既存APIに支えられた**UI/UX変更**である。
- バックエンド契約、認証モデル、中核ビジネスルールが**すでに存在**する。
- 変更がWebフロントエンド**のみ**に影響する（スキーマやサービス所有権の変更なし）。

## 入力

- **機能説明**: ユーザーフローと結果を短く説明する。
- **関連API**: エンドポイント、リクエスト/レスポンス型、ソース定義へのリンク。
- **対象ルート/コンポーネント**: パス、コンポーネント名、機能モジュール。
- **デザイン参照**: Figmaリンク、または合わせるべき既存画面。
- **ガードレール**: パフォーマンス上限、アクセシビリティ要件、セキュリティ制約。

## 対象外

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

## 規約

- **フレームワーク**: React with TypeScript。
- **ルーティング**: 既存のルーターとルートレイアウトパターンを使用する。
- **スタイリング**: 社内デザインシステムコンポーネント（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説明で差異を強調する。