- React + TypeScript + TailwindCSS 構成のWebアプリ開発を、Cursor・GitHub Copilot・Antigravityなどの AIエージェントで進める際に使えるプロンプト・仕様書テンプレート集をGitHubで公開しました。
- 新規プロジェクトの雛形作成から、機能追加、アーキテクチャ設計、品質監査、リファクタリング、チーム運用まで、開発フェーズ全体をカバーしています。
- コピペしてAIエージェントに貼り付けるだけで使える形式にしてあるので、「毎回似たようなプロンプトを一から書いている」人の時短になれば、と思っています。
リポジトリはこちら:
https://github.com/Tacitustus/react-ai-prompt-collection
作った理由
AIエージェントにコーディングを任せる機会が増えてから、次のような悩みが出てきました。
- 認証機能やフォームなど「よくある機能」を追加するたびに、同じような指示を一から書き直している
- プロジェクトごとにAIの出力品質にバラつきが出る(ディレクトリ構成やコーディング規約が毎回違う)
- 仕様が曖昧なままAIに投げると、手戻りが増える
これらを解消するために、自分がよく使う指示をテンプレート化してストックしておくことにしました。結果的にまとまった量になったので、リポジトリとして整理して公開しています。
想定する技術スタック
| 技術 | バージョン |
|---|---|
| React | 18+ |
| TypeScript | 5+ (strict mode) |
| Vite | 最新安定版 |
| TailwindCSS | v3+ |
| React Router | v6+ |
| Zustand | 最新安定版 |
コーディング規約としては、TypeScript strictモードでany禁止、アロー関数のみ使用、コンポーネント・フック・ユーティリティへのJSDoc必須、処理単位での日本語コメント、アトミックデザイン(atoms/molecules/organisms/templates/pages)を前提にしています。この前提を崩さない範囲であれば、他のスタックにも応用しやすいはずです。
コレクションの構成
全部で7カテゴリ、30本以上のプロンプト・テンプレートを収録しています。
1. プロジェクトテンプレート
GitHub Pages / Vercel / Netlify / Cloudflare Pages など、デプロイ先ごとに新規プロジェクトの雛形を構築するプロンプトです。
2. 機能追加プロンプト(14本)
既存プロジェクトに機能を足すときに使います。認証(Firebase/Supabase/Auth0)、フォーム&バリデーション(React Hook Form + Zod)、データ取得(TanStack Query)、国際化、PWA化、ダークモード、トースト通知、モーダル、無限スクロール、ファイルアップロード、リアルタイム通信(WebSocket/SSE)、検索&フィルタリング、ダッシュボードレイアウト、エラーハンドリングなど、実装頻度が高いものを中心に揃えています。
3. アーキテクチャ設計プロンプト(5本)
デザインシステム構築、API通信レイヤー設計、カスタムフックライブラリ、状態管理パターン集、ディレクトリ構成のリファクタリングなど、プロジェクトの土台に関わる設計を依頼するためのプロンプトです。
4. 品質管理プロンプト(5本)
コードレビューチェックリスト、パフォーマンス監査、アクセシビリティ監査(WCAG 2.1 AA)、セキュリティ監査、テスト戦略(単体/結合/E2E)など、AIに「監査役」をやってもらうためのプロンプトです。
5. 仕様書テンプレート(6本)
要件定義書、技術設計書、UI/UX仕様書、API仕様書、コンポーネント仕様書、DB設計書のテンプレート。AIに実装を依頼する前段階として、仕様を固めるために使います。
6. リファクタリングプロンプト(3本)
レガシーコード刷新、パフォーマンス最適化、バンドルサイズ最適化。
7. 開発ワークフロープロンプト(4本)
Gitブランチ戦略、PRテンプレート&レビュー規約、リリースプロセス、障害対応フロー。チーム開発・運用のドキュメント化に使えます。
プロンプトの中身のイメージ
例えば「フォーム&バリデーション」のプロンプトは、React Hook Form + Zod を使った型安全なフォームシステムを構築する指示になっていて、次のような要素を含んでいます。
- 追加パッケージの指定(react-hook-form / @hookform/resolvers / zod)
- atoms/molecules 単位でのコンポーネント構成(FormInput, FormField, FormSection など)
- Zodによる日本語バリデーションメッセージの実装例
- マルチステップフォーム対応(
useMultiStepFormフックの仕様) - ダークモード対応やローディング状態などのUI要件
- 「any禁止」「JSDoc必須」などのコーディング規約の再確認
単に「フォームを作って」と頼むのではなく、構成・命名・型安全性・UI状態まで指定することで、AIエージェントの出力のブレを減らす狙いです。
すべてのプロンプトは以下のフォーマットで統一されています。
# [タイトル]
> カテゴリ / 前提 / 難易度 / 所要時間目安
## このプロンプトの使い方
## プロンプト
## カスタマイズポイント
## 関連プロンプト
「カスタマイズポイント」には、プロジェクトに合わせて調整すべき箇所を明記しているので、そのままコピペするだけでなく、自分のプロジェクトの規約に合わせて手を加えて使うことを想定しています。
プロンプト使用例
実際にどんな使われ方をするか、ダークモード切り替えプロンプトを例に紹介します。
このプロンプトは、次のような要件をまとめてAIエージェントに渡す形になっています。
- Light / Dark / System(OS設定連動)の3段階テーマ切り替え
- 選択したテーマをlocalStorageに永続化(Zustandの
persistミドルウェアを想定) -
prefers-color-schemeを監視してSystem選択時にOS設定と連動 - ページロード時にテーマ未適用の一瞬(FOUC: Flash of Unstyled Content)が起きないよう、
index.htmlにインラインスクリプトを仕込む - Sun / Moon / Monitorアイコン(lucide-react)を使ったトグルボタンとその切り替えアニメーション
これを.mdファイルからコピーしてAIエージェントに貼り付けると、次のようなファイル構成で実装が進みます。
src/
├── stores/
│ └── useThemeStore.ts # テーマ状態管理(Zustand + persist)
├── hooks/
│ └── useTheme.ts # テーマ操作フック
├── components/
│ └── atoms/
│ └── ThemeToggle.tsx # テーマ切り替えボタン
└── styles/
└── globals.css # CSSカスタムプロパティ(Light/Dark)
ポイントは、プロンプトの最後に必ず「AGENTS.mdのコーディング規約をすべて遵守する」「タスク完了時の確認事項に従って報告する」という一文を入れていることです。これによって、ダークモードという機能そのものの仕様だけでなく、any禁止・JSDoc必須・アトミックデザイン準拠といったプロジェクト全体の規約もあわせて守られた状態で実装されます。単体の機能プロンプトであっても、必ずプロジェクトの土台(AGENTS.md / BLUEPRINT.md)への参照を含める、というのがこのコレクション全体を通した設計方針です。
実際にプロンプトを使用して作ったテンプレートリポジトリも公開中です：
https://github.com/Tacitustus/react-github-pages-template
使い方
- 使いたいプロンプトの
.mdファイルを開く -
## プロンプトセクション内のテキストをコピーする - Cursor・GitHub Copilot・Antigravityなどに貼り付けて実行する
新規プロジェクトなら 01_project-templates/deploy-templates.md からデプロイ先に合ったテンプレートを選び、生成された BLUEPRINT.md にプロジェクト固有の情報を書き込むところから始まります。既存プロジェクトへの機能追加であれば、02_feature-prompts/ から該当するプロンプトを選び、カスタマイズポイントを調整してから実行する、という流れです。
ライセンス・今後について
MIT Licenseで公開しているので、商用利用を含め自由に使ってもらって構いません。プロンプトの改善提案や新カテゴリの追加は、IssueやPull Requestで歓迎しています。
今後もReact + TypeScript + TailwindCSSでの開発で得た知見をベースに、プロンプトを追加していく予定です。よければ Star をつけていただけると励みになります。
作った経緯や実際にAIエージェントと一緒に開発を進める中で気づいたことは、note ( https://note.com/lucid_camel291/n/n4e6117d10fda )の方に書いていますので、興味があればそちらもどうぞ。