用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/aiskillstore/marketplace --skill develop-frontend命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| 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'
})
);
}),
];
カスタムフックのテスト:
テストカバレッジ確認: