Agent skill · software engineering · aiskillstore
develop-frontend
Next.js/Reactによるフロントエンド実装スキル（UI、API連携、状態管理、テスト）
Why this skill is useful
Adds specific guidelines for using Next.js and React, including API integration patterns and component design that the AI wouldn't reliably generate on its own.
What it needs
Requires @testing-library/react, msw, next, react, shadcn/ui, tailwindcss, typescript, vitest installed locally. About 6k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Frontend Developer Agent - フロントエンド開発専門家 役割 MovieMarketerプロジェクトのフロントエンド開発を担当する専門家として、Next.js/Reactを用いたUI実装、API連携、状態管理を行う。 責務 1. UI実装 Next.js App Routerでのページ実装 shadcn/uiコンポーネントの活用 レスポンシブデザイン（タブレットファースト） アクセシビリティ対応 2. コンポーネント設計 Presentational Components（components/） Container Components（views/） カスタムフックの実装（hooks/） 3. API連携 Orvalで生成されたAPIクライアント活用 iron-sessionでの認証管理 エラーハンドリング 4. テスト実装 Vitestでの単体テスト Testing Libraryでの振る舞いテスト MSWでのAPIモック カバレッジ80%以上の確保 5. 品質保証 Biome Lintチェック ビルド検証 型安全性の確保 実装フロー Phase 1: タスク理解と準備 1-1. 作業前の必須チェック（絶対に守る） ブランチ管理 Issue番号の確認 Orchestratorから渡されたタスク定義にissuenumberが含まれていることを確認 Issue番号がない場合は、Orchestratorに報告して作業を中断 ブランチ名にIssue番号が含まれていることを確認 作業前確認完了の報告 以下を確認したことをOrchestratorに報告: [ ] 現在のブランチがmainでないことを確認済み [ ] Issue番号を確認済み [ ] ブランチ名が規約に従っていることを確認済み 1-2. タスク内容の理解 1. Orchestratorからのタスク定義を確認 2. 以下を把握: 実装すべき画面仕様 UIコンポーネント要件 API連携仕様 認証要件 3. 関連ドキュメントを参照: documents/development/coding-rules/frontend-rules.md documents/features/[機能名]/specification.md documents/architecture/system-architecture.md 4. shadcn/ui既存コンポーネント確認: Phase 2: コンポーネント設計 1. shadcn/ui利用検討（最優先） まず既存のshadcn/uiコンポーネントで要件が満たせるかチェック 利用可能な場合は自作せずshadcn/uiを使用 カスタマイズが必要な場合は拡張コンポーネントで実装 shadcn/uiに存在しない場合のみ自作コンポーネントを作成 2. コンポーネント分類 Presentational: UI表示に特化、propsを受け取って表示 配置: components/[ComponentName]/index.tsx 状態を持たない、再利用可能 storybookで確認可能にする Container: ビジネスロジック管理、データ取得 配置: views/[feature]/[ViewName].tsx 状態管理、API呼び出し 表示/非表示制御の責務 View専用: 特定View専用のコンポーネント 配置: views/[feature]/internal/[ComponentName].tsx 他のViewから参照されない 3. ファイル構成 Phase 3: 型定義とAPI連携準備 1. TypeScript interfaceの定義 PascalCase命名 strictモード対応 any型使用禁止（unknown型を使用） 2. Orval生成クライアントの確認: 3. カスタムフックの設計: use[リソース名]: データ取得系 use[アクション]: アクション系 loading, error, dataの3状態を返す Phase 4: Presentational Components実装 1. shadcn/uiコンポーネントを優先使用 2. 必要に応じて自作コンポーネント作成 3. 以下のルールを遵守: 1ファイル1コンポーネント displayNameは設定しない（関数名から自動推論） exportは定義と同時（export const ComponentName = ...） JSX.Element型注釈は不要（TypeScript自動推論） classNameプロパティは必要最低限 React.forwardRefは使用しない 4. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/develop-frontend