Menu
Next.js/Reactによるフロントエンド実装スキル（UI、API連携、状態管理、テスト）
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/aiskillstore/marketplace --skill develop-frontendThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Showing SKILL.md
Maintain a portable task-state ledger for long, multi-step work. Use when a task spans many files, produces large logs, needs a reliable handoff, or requires traceable evidence without repeatedly loading full outputs. Creates concise state records and private evidence references with explicit limits, redaction checks, and retention guidance.
【收纳储物必看】装修前不会规划收纳，入住半年家变仓库？这个 Skill 内置装修课堂会员版「家居收纳储物方法」152篇原创知识库，专门讲收纳储物——收纳是家的骨架、柜子不是越多越好、收纳本质是把东西藏起来、收纳加勤快缺一不可。问玄关鞋柜怎么装、问厨房9个收纳位置、问衣柜衣帽间怎么做、问小户型怎么榨干每1平米、问收纳避坑和鸡肋神器，全部覆盖。适合正在装修、准备收纳规划、家里东西多总是乱、想做满墙柜/通顶柜/800库的业主。
【儿童房装修必看】家里有小孩、正准备要孩子、或想给儿童房做环保安全装修？这个 Skill 内置装修课堂知识库，专门讲"适童化"——儿童是最易受甲醛伤害的人群，儿童房必须实木/ENF/控总量。问儿童房怎么装环保、问儿童房墙面地面用什么、问儿童家具选实木还是人造板、问孩子学习/游戏专区怎么规划、问有娃家庭怎么防磕碰防污染，全部覆盖。适合家里有娃、备孕婚房、想装出健康儿童房的业主。
Based on SOC occupation classification
| name | develop-frontend |
| description | Next.js/Reactによるフロントエンド実装スキル（UI、API連携、状態管理、テスト） |
MovieMarketerプロジェクトのフロントエンド開発を担当する専門家として、Next.js/Reactを用いたUI実装、API連携、状態管理を行う。
ブランチ管理
# 現在のブランチを確認
git branch --show-current
# mainブランチの場合は必ず新しいブランチを作成
# ブランチ名形式: [type]/[content]-[issue-number]
# type: feature, fix, refactor, docs のいずれか
# 例: feature/user-profile-123, fix/login-error-456
# mainブランチでないことを確認してから作業開始
Issue番号の確認
作業前確認完了の報告 以下を確認したことをOrchestratorに報告:
Orchestratorからのタスク定義を確認
以下を把握:
関連ドキュメントを参照:
documents/development/coding-rules/frontend-rules.mddocuments/features/[機能名]/specification.mddocuments/architecture/system-architecture.mdshadcn/ui既存コンポーネント確認:
# 利用可能なコンポーネント確認
ls frontend/components/ui/
shadcn/ui利用検討（最優先）
コンポーネント分類
components/[ComponentName]/index.tsxviews/[feature]/[ViewName].tsxviews/[feature]/_internal/[ComponentName].tsxファイル構成
frontend/
├── app/(private_pages)/[feature]/
│ ├── page.tsx # ページコンポーネント
│ ├── layout.tsx # 機能専用レイアウト（任意）
│ └── loading.tsx # ローディングUI（任意）
├── components/
│ ├── ui/ # shadcn/ui（編集禁止）
│ └── [ComponentName]/ # 自作コンポーネント
│ ├── index.tsx
│ ├── index.test.tsx
│ └── index.stories.tsx
├── views/[feature]/
│ ├── [ViewName].tsx
│ ├── [ViewName].test.tsx
│ └── _internal/ # View専用コンポーネント
└── hooks/
├── use[HookName].ts
└── use[HookName].test.ts
TypeScript interfaceの定義
Orval生成クライアントの確認:
# 生成されたAPIクライアント確認
ls frontend/src/lib/api/generated/
カスタムフックの設計:
use[リソース名]: データ取得系use[アクション]: アクション系shadcn/uiコンポーネントを優先使用
必要に応じて自作コンポーネント作成
以下のルールを遵守:
export const ComponentName = ...）スタイリング:
Storybookストーリー作成:
// index.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { ComponentName } from './index';
const meta: Meta<typeof ComponentName> = {
component: ComponentName,
};
export default meta;
type Story = StoryObj<typeof ComponentName>;
export const Default: Story = {
args: {
// props
},
};
views/[feature]配下にContainer作成
カスタムフックでデータ取得:
const { data, loading, error } = useUserData(userId);
状態管理:
表示制御:
エラーハンドリング:
Orval生成クライアント活用
カスタムフックでラップ:
export const useUserData = (userId: string) => {
const [data, setData] = useState<User | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<Error | null>(null);
useEffect(() => {
let cancelled = false;
const fetchData = async () => {
try {
const result = await api.getUser(userId);
if (!cancelled) {
setData(result);
}
} catch (err) {
if (!cancelled) {
setError(err as Error);
}
} finally {
if (!cancelled) {
setLoading(false);
}
}
};
fetchData();
return () => {
cancelled = true;
};
}, [userId]);
return { data, loading, error };
};
MSWでAPIモック定義（テスト用）:
React Hook FormとZodでスキーマ定義:
const schema = z.object({
name: z.string().min(1, '名前は必須です'),
email: z.string().email('メールアドレスの形式が正しくありません'),
});
type FormData = z.infer<typeof schema>;
useFormでフォーム管理:
const form = useForm<FormData>({
resolver: zodResolver(schema),
});
shadcn/ui Formコンポーネント活用
Presentationalコンポーネントのテスト:
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { ComponentName } from './index';
describe('ComponentName', () => {
it('propsに応じて正しく表示される', () => {
render(<ComponentName title="テスト" />);
expect(screen.getByText('テスト')).toBeInTheDocument();
});
it('クリック時にonClickが呼ばれる', async () => {
const user = userEvent.setup();
const onClick = vi.fn();
render(<ComponentName onClick={onClick} />);
await user.click(screen.getByRole('button'));
expect(onClick).toHaveBeenCalledTimes(1);
});
});
Containerコンポーネントのテスト:
重要: TypeScript/ESLintでは未使用import・変数を検出できますが、未使用の関数・コンポーネントはIDE警告でしか検出されません。
VSCode/Cursorでの確認手順:
確認必須項目:
cd frontend
pnpm run lint:check
pnpm run test:ci
pnpm run build
検証項目:
エラーがある場合は修正し、全て成功するまで繰り返し
開発内容を反映してフロントエンドサーバーを起動し、実装した画面が正常に動作することを確認:
cd frontend
pnpm dev
確認事項:
動作確認方法:
Orchestratorに以下の内容を報告:
## Frontend Developer 完了報告
### 実装内容
- **ページ**: [実装したページ一覧]
- **コンポーネント**: [作成したコンポーネント一覧]
- **カスタムフック**: [実装したフック一覧]
### 変更ファイル
- Page: [ファイルパス]
- Components: [ファイルパス一覧]
- Views: [ファイルパス一覧]
- Hooks: [ファイルパス一覧]
### テスト結果
- 単体テスト: [テストファイル数] ファイル、[テストケース数] ケース
- カバレッジ: [数値]%
- Lint: [結果]
- ビルド: [結果]
### サーバー起動確認
- [ ] `pnpm dev` でサーバー起動成功
- [ ] 実装したページの動作確認済み
- [ ] コンソールエラーなし
- [ ] UI要素の表示確認済み
- [ ] API連携動作確認済み
- [ ] レスポンシブデザイン確認済み
### 確認事項
- [ ] 作業前にブランチ確認済み（mainブランチでない）
- [ ] Issue番号確認済み
- [ ] shadcn/ui既存コンポーネント活用検討済み
- [ ] TypeScript strictモードエラーなし
- [ ] any型不使用（unknown型使用）
- [ ] 1ファイル1コンポーネント
- [ ] displayName未設定（自動推論）
- [ ] React.forwardRef不使用
- [ ] タブレットファースト設計
- [ ] **未使用コード削除済み（IDE警告で確認）**
- [ ] **未使用import削除済み**
- [ ] **未使用変数・関数・コンポーネント削除済み**
- [ ] **未使用type/interface削除済み**
- [ ] **コメントアウトコード削除済み**
- [ ] テストカバレッジ80%以上
- [ ] Lint/ビルド成功
- [ ] Storybookストーリー作成済み（Presentationalコンポーネント）
[ ] サーバー起動・動作確認済み
最新の技術ドキュメント・ベストプラクティス確認:
Next.js関連
resolve-library-id: "next.js"
get-library-docs: "/vercel/next.js"
topic: "app router server components"
React関連
resolve-library-id: "react"
get-library-docs: "/facebook/react"
topic: "hooks best practices"
shadcn/ui関連
resolve-library-id: "shadcn/ui"
get-library-docs: "/shadcn/ui"
topic: "component customization"
YouTube API関連（フロントエンド）
resolve-library-id: "youtube iframe api"
get-library-docs: "/youtube/iframe_api_reference"
topic: "player events"
活用場面:
実際のブラウザでの動作・パフォーマンス確認:
navigate_page: ページ遷移
url: "http://localhost:3000/dashboard"
take_snapshot: ページの状態確認
# 実装したUIの構造確認
list_network_requests: API呼び出し確認
# ダッシュボードのAPI呼び出しを監視
resourceTypes: ["fetch", "xhr"]
performance_start_trace: パフォーマンス測定
reload: true
autoStop: true
# Core Web Vitalsの測定
take_screenshot: 視覚的な確認
format: "png"
# レスポンシブデザインの確認
活用場面:
documents/development/coding-rules/frontend-rules.md: フロントエンドコーディング規約documents/development/development-policy.md: 開発ガイドラインdocuments/features/[機能名]/specification.md: 機能仕様書documents/architecture/tech-stack.md: 技術スタックdocuments/architecture/system-architecture.md: システムアーキテクチャfrontend/components/ui/: shadcn/uiコンポーネントfrontend/src/lib/api/generated/: Orval生成APIクライアント// mocks/handlers.ts
import { rest } from 'msw';
export const handlers = [
rest.get('/api/v1/users/:id', (req, res, ctx) => {
return res(
ctx.status(200),
ctx.json({
id: req.params.id,
name: 'テストユーザー',
email: 'test@example.com'
})
);
}),
];
カスタムフックのテスト:
テストカバレッジ確認: