Claude Code でフロントエンド実装の生産性を劇的に上げる、React 19 / Next.js 15 / Tailwind v4 特化プロンプト集 20本です。 ■ こんな方向け ・Claude Code でReact/Next.jsを使っているが、毎回指示に迷う方 ・Tailwind v4の新機能（@theme / @starting-style）を即活用したい方 ・TypeScript型定義+テスト+アクセシビリティを一括生成したい方 ■ Before / After Before: 「このデザインをReactで実装して」→ 基本JSXのみ・型なし・スタイルなし After: TypeScript型定義・レスポンシブTailwind・ARIAアクセシビリティ・テスト・Storybook一括生成 ■ 収録プロンプト（全20本・5カテゴリ） 【コンポーネント設計 5本】 1. 汎用UIコンポーネント（Props型+Storybook+単体テスト一括） 2. フォーム実装（React Hook Form + Zod バリデーション） 3. データテーブル（ソート・ページネーション・フィルタ付き） 4. モーダル（ARIA対応・フォーカストラップ・アニメーション） 5. 無限スクロール（Intersection Observer + TanStack Query v5） 【Tailwind v4 実装 4本】 6. レスポンシブLP（Hero/Features/CTA/Footer セクション一括） 7. ダークモード対応（@theme カスタム変数 + color-scheme 切替） 8. アニメーションUI（variants + @starting-style） 9. グリッドレイアウト（12/16カラム CSS Grid 自動調整） 【Next.js 15 特化 4本】 10. Server/Client分離設計（'use client' 境界最適配置） 11. Server Actions フォーム（楽観的更新 + エラーハンドリング） 12. App Router レイアウト一括（loading/error/not-found.tsx） 13. Parallel Routes + Intercepting Routes パターン実装 【状態管理・API連携 4本】 14. Zustand v5 ストア設計（TypeScript厳格型+devtools+persist） 15. TanStack Query v5（型安全queryFn + optimistic update） 16. Stream UI（useActionState + リアルタイム更新） 17. 型安全API層（tRPC v11 / Hono v4 スキーマファースト） 【品質・パフォーマンス 3本】 18. Core Web Vitals最適化（LCP/CLS/INP 計測+改善コード） 19. Storybook Visual Testing（Chromatic CI対応） 20. Lighthouse CI（GitHub Actions + 閾値アラート設定） ■ 他の無料プロンプトとの違い ・出力品質: TypeScript型+テスト+アクセシビリティを同時出力 ・バージョン対応: React 19 / Next.js 15 / Tailwind v4 最新仕様 ・CLAUDE.mdに丸ごとコピペ可能な形式で提供 ¥1,480 → 1プロンプトあたり¥74。フロントエンド手戻り1回分より安い。 購入後: ZIP解凍→CLAUDE.mdにコピペするだけで即使用可。