Web開発のAI指示書 25本
Web開発まわりの作業を AI にやらせるための指示書 (Markdown) を集めたページです。 全部まとめて使えば、ゼロから作らせた場合と比べて約221万トークン (約3,313円分) の節約になります。 すべて無料・登録不要で、URL をそのまま AI に読み込ませて使えます。
Next.js + Supabase + Vercel 立ち上げ完全自動化MD
新規Webサービスの立ち上げ (GCP/GitHub/Vercel/Supabase のプロジェクト作成〜環境変数〜本番デプロイ) を AI に一気通貫でやらせる指示書。人間の作業はログイン1回だけ。
投稿の審査キューを「信頼済みだけ自動公開」で捌く設計（なりすまし穴つき）
審査キューに投稿が溜まったまま埋もれる問題を、信頼済み投稿だけ即公開する形で潰す指示書。無検証のキー発行を信頼判定に使うと第三者が自社メールを騙れる穴と、サーバレスで静的公開棚に実行時公開を足す方法、検証10項目まで含む。
Vercel の Sensitive 環境変数が誰にも読み戻せない状態を作り直さずに解消し、Development 正本＋毎日の差分監視で恒久化する
本番 env が全て Sensitive で共有不能なとき、skip-domain の一時本番デプロイ＋RSA 暗号化で1回だけ取り出し、Development を正本化、env:set 入口と GitHub Actions の parity 監視で再発を止める手順
DB型サイトを「一覧だけ会員限定・個別ページは残す」に切り替える指示書（Next.js App Router）
自社DBで集客していたサイトが競合のリスト抜き取りに気づいた時の改修手順。名前が並ぶバルクな一覧だけを会員限定にし、個別ページはtitle/H1とCTAを残す。ItemList JSON-LDやsitemapの漏れ、force-dynamic化のコスト副作用、Layer1(HTML)+Layer2(Playwright実描画)の受け入れテストまで含む。
日本語のPC名で vercel login が ByteString エラーで落ちる — PC名を変えずに os.hostname シムで直す
Windows の日本語コンピューター名が Vercel CLI の User-Agent に入り undici が拒否する問題を、NODE_OPTIONS --require の1ファイルで回避。team 複数時の --scope、.env.local 上書き、ブラウザ自動起動の罠つき
一覧が表記ゆれで割れるのを、DBを書き換えずに直す（集計キー正規化＋付け替えUI）
大小文字・全半角の違いだけで同じグループが複数カードに割れる問題を、DBの生値を保ったまま表示側の正規化キーで統合する。集計だけ直してフィルタを直さず「クリックしたら0件」になる最頻出の落とし穴、ページング・候補取得上限の罠、間違ったグループに入った行を後から移す付け替えUIまで含む。
アプリ内「不具合・要望」窓口を全アプリへ標準搭載する
利用者がその場で不具合・要望を送れる窓口を、npm依存ゼロ・CSS非依存・DBなしでも動く形で1コマンド後付けする手順。公開サイト向けの濫用対策、2段検証、配布物として崩してはいけない点まで含む。
ChatGPTに本当にLPデザインを作らせて、コードへ忠実に落とす指示書
「ChatGPTでデザインして」がAIエージェントで失敗する4つの真因と回避策。Responses APIでスクショ入力＋反復してモックアップを作り、複数画像は1枚のコンタクトシートから切り出してトンマナを統一、生成画像は表示枠の縦横比に合わせてcrop率を数値assert、モックアップ内の架空の数値は捨てる。Playwrightの検証コード付き。
「エラー番号しか出ない」Next.js 本番不具合を、本番を壊さずに原因まで追い詰める
Next.js の error digest だけが出る本番障害を、書き込みゼロの再現・スキーマ読み取り・hidden input required の罠の3点で特定し、Server Action から throw を無くして二度と番号だけにしない手順
ハードコードのドロップダウンenumを設定で編集できるDBマスタに移行する
UIに配列でベタ書き＋DB CHECKで固定された選択肢を、利用者が設定画面から追加/編集できるマスタテーブルに一本化する手順。value-keyed分岐を壊さない落とし穴つき
Supabaseで未ログインの人を管理者にし、その画面を本番で機械確認する（PKCEログインでもOK）
初回ログインでusers行を作るアプリで、本人のログインを待たずに管理者を用意し、magiclink→verifyOtp→cookie注入のPlaywrightで管理者画面を検証する手順
SSGサイトへ商品を一括投入し、CC0画像を安全に付けて一覧まで反映させる指示書
Next.js App Router + DB の商品カタログにスクリプトで商品をまとめて追加する手順。Openverse CC0画像の実用的な取得・目視選別、透かし/他社ブランドの排除、そして「詳細は200なのに一覧が古い」静的生成の罠と revalidate の正しい発火方法、Layer1/Layer2 の検証まで。
社内アプリの不具合報告に「対応したら本人の Discord へ返信」を付ける（Next.js + Discord Bot）
報告者を名簿から選ばせて Discord ユーザーIDを確定し、対応完了時に Bot が本人へ DM を返す。二重送信防止・DM不可の可視化・特権インテントの有効化と本番検証手順まで。
社内名簿シートから選択式スタッフ入力を作る — メールをブラウザに出さない Next.js 設計
認証なしの公開業務アプリで、手入力の氏名を名簿由来のプルダウンに置き換えつつ、個人情報をクライアントへ配らない設計と検証手順。Server Component で {id,name} だけを渡し、サーバが id から氏名とメールを解決する。配信物へのメール混入を grep で実測する検証と、実際に踏んだ落とし穴7件つき。
Square の決済データを月次集計して Next.js のトップに売上ダッシュボードを出す
Square Payments API をページングして JST で月次集計（COMPLETED・返金控除）、30分キャッシュ＋stale フォールバックの API、スマホ向け進捗カードと月別表。生成AIが実際に出したバグ2件のレビュー観点と本番検証手順つき
認証付き社内Webアプリの一部だけを社外へ匿名公開する（前段ゲートウェイがある構成の落とし穴）
トンネル公開している社内アプリに認証不要の画面を1つだけ足す手順。前段ゲートウェイが /api/* を一律認証していると本体だけ直しても外部は401になり、しかもlocalhost検証では200で通ってしまう。素通し条件の書き方、公開APIの返却フィールド設計、公開URLに対する自動検証5項目まで。
退職者の個人アカウントから後任へVercel・GitHubを移す（Hobby/Free同士）
ダッシュボードで移せないVercel Hobby同士をtransfer-request APIで移し、GitHub個人宛て移管の承認を1クリックに絞る手順
Vercelのレジストラ API でドメインを取得し既存サイトを無停止で乗り換える
購入・DNS・リダイレクト・検証まで人手ゼロ。廃止された旧API、購入が成立しない安全弁を使ったスキーマ調査、踏まないとドメインが止まる確認メール、/:path* がルートに当たらない罠まで実運用の落とし穴を網羅。
サーバレスに認証付きの配信APIを作るときの2つの落とし穴（静的配信で認証が無意味／200なのに0件）
リポ直下に置いたペイロードが認証なしで配信され認証が無意味になる罠と、自作probeのPOSTと実クライアントのGETがズレて200なのに配置0件になる罠。api/_前置の実測表、素のURLを404で確認する検証ループ、実クライアントをimportして受け取り件数で判定する完了条件まで。
Vercel独自ドメイン接続+証明書発行待ち自己解決MD
外部レジストラのDNSをVercelに繋ぐ手順と、HTTPSだけ繋がらない時にvercel certs issueで手動発行して数十分の待ちを数十秒に短縮する診断フロー
PWA デプロイ即反映 — Service Worker 自動 reload レシピ
PWA のスマホ側で新版が反映されない問題を、SW の VERSION+postMessage+updateViaCache=none+版タグ表示 の3点セットで「デプロイ即・全tab自動 reload」に変える完全レシピ。Next.js/Vite/Vanilla 共通
ローテーションするOAuth2リフレッシュトークンをDB永続化して壊れないようにする型
freee/Google等でリフレッシュトークンがローテーションし env固定だと初回更新後に必ず壊れる問題を、トークンをDBに持ち更新のたび書き戻す型で解決。マスタID取得・冪等ガード・段階導入まで含む会計API連携の定石。
マージしたのに本番が変わらない — Vercel の Git author ブロックを特定して費用ゼロで通す
PR をマージしたのに本番が更新されないとき、Vercel が author 検査でデプロイを拒否している可能性を gh api と vercel CLI で確定し、作り直しゼロ・費用ゼロで通す手順。マージ方式ではなく「押した人」が原因という誤診も扱う。
AEO/GEO 施策の型 — AI検索で自社を推薦・引用されやすくする
ChatGPT/Perplexity/AI Overviewで自社が引用される状態を作る実行手順。JSON-LD/llms.txt/robotsのオンページ、比較メディア掲載、投稿メディア→Yahoo!ニュース→取材誘発、Wikidata/Wikipedia、月次無料の効果測定、落とし穴まで。
Vercel「pushしても反映されない」の見えない原因とNext.jsビルド検証の穴
VercelプロジェクトがlinkされていてもGitHub App未インストールだと自動デプロイされない。直し方と、tsc PASSがnext buildの成功を保証しない落とし穴、Playwrightのrole=alertがNext.js内部要素と衝突する罠も併記