ククデ会 プロンプト集

各ボックスの「コピー」ボタンを押すと、そのプロンプトがそのままコピーされる（手で選択しなくてよい＝改行が壊れない）。Claude Code に貼り付けて使う。プロンプト本文はその場で書き換えられる（プロジェクト名などを自分のものに直してからコピーできる）。
テキスト版（印刷・全文コピー用）：prompts.txt

初級 ｜ ブラウザ経由でデプロイ

参考: vibecodingnotes.com/handson-cloudflare-static-upload/

最初のページを作る
public/index.html を作って。
Hello World と表示するだけのシンプルなHTML。
修正①（派手に）
文字を大きくして、中央に寄せて。
派手にして。
修正②（日本語訳を足す）
Hello Worldの下に日本語訳「こんにちは世界」を足して
修正③（クリックで拡大）
文字をクリックすると拡大するようにして

初級 ｜ Wrangler でデプロイ

参考: vibecodingnotes.com/handson-cloudflare-wrangler/

Wrangler にログイン（初回）※ターミナルで実行。Windows はコマンドプロンプト
npx wrangler login

ブラウザで承認画面が開くので進める。

修正④（再デプロイ前）
現在時刻も表示して！
Wrangler でデプロイ（「thisisapen」は自分の Worker 名に置き換える）
Cloudflare の既存の Worker「thisisapen」に、public フォルダの中身を npx wrangler でデプロイして。
設定ファイル（wrangler.jsonc）も作ってほしい。

thisisapen はブラウザでデプロイしたときの Worker 名（<Worker名>.<サブドメイン>.workers.dev の先頭の部分）に置き換える。

デプロイが禁止されている場合：CLAUDE.md を開く（Mac）※ターミナルで実行
open -e ~/.claude/CLAUDE.md
デプロイが禁止されている場合：CLAUDE.md を開く（Windows）※コマンドプロンプトで実行
notepad %USERPROFILE%\.claude\CLAUDE.md

すでに ~/.claude/CLAUDE.md にコミュニティで配られた開発ルールを入れている人は、ここで止まることがある。開いたファイルから該当の部分を消して保存し、Claude Code を開き直す。スライドの PDF からコピーすると ~/ .claude のように空白が入って開けないことがあるので、ここからコピーする。

修正してから…
流れ星も出して
…再デプロイ（さっきの wrangler コマンドが動く）
デプロイして
クロコだけで作成からデプロイまで（「applepen」は自分が付ける名前に置き換える）
Cloudflare に新しい Worker「applepen」を作って、public フォルダの中身を npx wrangler でデプロイして。
設定ファイル（wrangler.jsonc）も作ってほしい。

やってみよう！ Webアプリ作成

🚀 やってみよう！ Webアプリ作成：好きなお題を選んで作り、ひとつ上の「クロコだけで作成からデプロイまで」の依頼文で公開してみよう。

やってみよう：ポモドーロタイマー
HTML+JavaScriptでポモドーロタイマーを作って！ public/index.html 1ファイルで作って。
やってみよう：複利計算機
複利計算機をHTML+JavaScriptで作って！ 構成はHTMLファイル(public/index.html)が1つ。
やってみよう：連打ゲーム
マウスかタッチパッドでボタンを10回連打するのに何秒かかるかを競うゲーム。public/index.html 1ファイルで作って。
やってみよう：効果音ボタン
ボタンを押すと効果音が出るWebアプリをHTMLファイル1つ（public/index.html）で作って。3つのボタンで三つの効果音。
やってみよう：TODOリスト
TODOリストをHTML+JavaScriptで作って！ 項目の追加・削除ができて、ページを閉じても消えないようにしたい。public/index.htmlに書いて。ファイルは1つで。
やってみよう：カウントダウンタイマー
最大60秒のカウントダウンタイマーをHTML+JavaScriptで作って！ 秒数を入力してスタート・リセットできるようにしたい。HTMLファイル1つ（public/index.html）にまとめて。

開発基礎 ｜ Git と GitHub

参考: vibecodingnotes.com/guide-git-basic/

練習用ファイルを作る
README.md を作って、内容は「# 私の最初のリポジトリ」だけにして。
名前とメールアドレスを登録（本名じゃなくてよい）
このパソコンの Git に、名前とメールアドレスを登録して。
名前は Your Name、メールアドレスは [email protected] で。
このフォルダの Git 管理はまだ始めない。
最初のブランチ名を main にする（Windows の人）
このパソコンの Git で、最初のブランチ名を main にする設定をして。
リポジトリの初期化と最初のコミット
Git管理始める。
「最初のコミット」としてコミットして。
練習①：ページを作る
public/index.html として Hello World と表示するだけのシンプルなHTMLを作って。
README.md にもそのことを書いておいて
練習①：コミット（頼み方はどれでも通じる）
コミットして
練習②：派手にする
public/index.html を派手にして
練習②：コミット
コミットして
練習③：川柳を足す
Claude Code を題材にした川柳を1つ作って、README.md に足して
練習③：コミット
コミット
練習④：タイトルに日付を足す
README.md の1行目のタイトルに、今日の日付を足して
練習④：コミット
commit
変更履歴を表で見る
変更履歴を表で見せて
生の履歴を見る（参考・コマンド）
git log
今日やったことをまとめる
今日やったことを100文字ほどでまとめて
間違って消したファイルを戻す ※先に Finder でゴミ箱に入れる
間違って消しちゃった。戻して
前の状態に戻す
README.md を、川柳を足す前のコミットの時点に戻して。
その後の変更も一緒に消えてよい。
戻したのを取り消す
戻したのを取り消して
昔と今を比べる
派手にする前と今で、何が変わった？
gh のインストール ※ターミナルで実行
brew install gh
gh のバージョン確認 ※ターミナルで実行
gh --version
gh で GitHub にログイン ※ターミナルで実行。Windows はコマンドプロンプト
gh auth login

質問が順に出るので、全部改行で進む。ワンタイムコードが表示されるので、自動で開いたブラウザ画面に貼り付けて承認する。

GitHub にリポジトリ作成＆push（言葉で）
GitHubに非公開のリポジトリ git-test を作って、今のフォルダの内容をpushして
GitHub にリポジトリ作成＆push（裏で動くコマンド）
gh repo create git-test --private --source=. --remote=origin --push
日々の運用：本文を足す
カフェオレについて約200文字の短文をREADME.mdに足して
push（言い方いろいろ①）
プッシュして
煽りコピーを足す
AI使う人でGitHub使ってないとやばい！的な煽りコピーを3つpublic/index.htmlに足して
push（言い方いろいろ②）
push
書いて push まで一気に
タコライスのレシピを約100文字でREADME.mdに書いてpush
GitHub の最新を取り込む（pull）
GitHub の最新を取り込んで
やってみよう：自分のサイトを Git 管理にする
Git管理したい
一歩先：ブランチで試す（採用する案）
ブランチを作って、index.html の見出しをもっと派手にする案を試して
採用して main に取り込む
よさそうだから main に取り込んで、ブランチは消して
一歩先：ブランチで試す（やめる案）
ブランチを作って、index.html の背景を真っ黒にする案を試して
やめて main に戻る
やっぱりやめて main に戻して、ブランチも消して
プルリクエストの前に main を揃える
pushして
プルリクエストを作る
ブランチを作って、README に「ブランチの練習」という節を足して。
終わったら GitHub に push して、プルリクエストを作って

返ってきたリンクを開いて「Files changed」タブで差分を確認する。

マージする
プルリクエストをマージして、手元の main も最新にして
マージ済みのブランチを消す
マージ済みのブランチを、手元と GitHub の両方から消して
コンフリクトを起こす①：手元で見出しを変える
README の1行目の見出しを「私の最初のリポジトリ（手元で変更）」に変えてコミットして。
pushはまだしないで
コンフリクトを起こす②：GitHub の画面で1行目をこれに書き換えて Commit changes
# 私の最初のリポジトリ（GitHub で変更）
コンフリクトを起こす③：取り込む
GitHub の最新を取り込んで
どこがぶつかっているか聞く
どこがぶつかっているか教えて
コンフリクトを解消する
両方の内容を残す形で直して、pushして
片方だけ残す（手元）
手元の方を残して
片方だけ残す（GitHub）
GitHub の方を残して

開発基礎 ｜ 作業メモの管理

参考: vibecodingnotes.com/guide-in-repo-notes/

作業メモの置き場所を作る（おすすめ版）
このフォルダに作業メモの置き場所を作って。
決めごとは
https://raw.githubusercontent.com/yto/yto-skills/main/plugins/in-repo-notes/skills/in-repo-notes/SKILL.md
を notes/rules-in-repo-notes.md として保存して、
AGENTS.md からそれを読むように書いて。
CLAUDE.md からは AGENTS.md を読み込むようにして。
作業メモの置き場所を作る（簡易版）
このフォルダに作業メモの置き場所を作って。
notes/ フォルダを作り、AGENTS.md に「調査や検討の経緯は notes/ に
<topic>-<YYYY-MM-DD>.md の形式で置く（topic は英数字とハイフン）。
冒頭に作成日と目的、末尾に参照を書く」というルールを追記して。
CLAUDE.md からは AGENTS.md を読み込むようにして。
作業メモの置き場所を作る（スキルを入れた場合）
このフォルダに作業メモの置き場所を作って。

開発基礎 ｜ セキュリティ点検

参考: vibecodingnotes.com/guide-security-check/

内側から点検する（作業フォルダで、新しいセッション（別の会話）を開いて貼る）
このリポジトリ全体をセキュリティの観点でチェックして。
外側から点検する（新しいセッション（別の会話）を開いて貼る。https://… は自分のサイトのURLに変える）
このURLのセキュリティをチェックして: https://…

まず、何でできているか調べて（ホスティング／フロント／データ置き場／外部API）。

前回の結果は使わず、いま実際にリクエストを送って確かめて。推測では答えない:
・認証なしで DB が読める / 書けるか
・認証なしで叩ける API があるか（とくに AI を呼ぶもの）
・ログインなしで管理画面に入れるか
・課金が無防備に置かれていないか

報告は「実際に確認した」と「コードから推測した」を分けて。

中級 ｜ アクセス制限（Basic認証）

参考: vibecodingnotes.com/handson-basic-auth/

① Webサイトを作る
このフォルダに public フォルダを作って、2ページだけの静的サイトを作ってください。
- public/index.html は誰でも見られるトップページ
- public/secret/index.html は、あとで合言葉で守るページ
- 中身は見分けがつけばよく、凝らなくていい
- トップページから secret のページへのリンクを置いてください
② Cloudflare にログイン（まだの人だけ）※ターミナルで実行。Windows はコマンドプロンプト
npx wrangler login
② Wrangler で公開する
Cloudflare に新しい Worker「my-secret-site」を作って、public フォルダの中身を npx wrangler でデプロイして。
設定ファイル（wrangler.jsonc）も作ってほしい。
③ 合言葉を確かめる処理を作る
/secret/ 以下のページを、Basic 認証の合言葉で守って。
合言葉は SITE_PASSWORD という名前で Cloudflare のシークレットに預けるので、コードにも設定ファイルにも書かない。ユーザー名は guest でよい。
守らないページは、今までどおりコードを通さずに配信する。
③ ここで一度デプロイする（コードをデプロイすると、合言葉を預けられるようになる）
デプロイして
④ 合言葉を預ける：Key（Cloudflare のダッシュボードで入力）
SITE_PASSWORD

Cloudflare → Workers & Pages → 自分の Worker → Settings → Runtime variables and secrets → ＋ Add variable で、Production にチェックが入っているか確かめ、Key に上の文字列、Value に合言葉を入れ、Value の右の Secret にチェックを入れて Add 1 variable and deploy を押す（これでデプロイまで済む）。スライドの PDF からコピーすると SITE PASSWORD _ のように _ がずれて崩れることがあるので、ここからコピーする。

④' 合言葉を預ける（ターミナルのタブで）
合言葉を Cloudflare のシークレット SITE_PASSWORD に登録して。
値は私がターミナルのタブで入力する

「ターミナルでコマンドを実行します」と聞かれたら「一度だけ許可」。ターミナルのタブが開いたら、合言葉を貼り付けて Enter（画面には表示されない）。入れた時点で反映される（デプロイし直さなくてよい）。「値は私が…」を付けないと、合言葉が会話に残ることがある。

合言葉を増やす
Basic認証のユーザーを複数にしたい。
環境変数 SITE_USERS を "ユーザー名:合言葉,ユーザー名:合言葉" の形式として読み、
どれかに一致したら通すようにして。
値は私が自分で Cloudflare に入れるので、コードにも設定ファイルにも書かないで。
鍵をかける範囲を変える（サイト全体に）
Basic認証をサイト全体にかけたい。
パスの範囲判定を外して、どのページでも合言葉を求めるようにして。
鍵をかける範囲に関わる設定があれば、それも合わせて変えて
鍵をかける範囲を増やす（/admin/ と /api/admin/）
Basic認証をかける範囲を /admin/ と /api/admin/ の2つにして。
鍵をかける範囲に関わる設定があれば、それも合わせて変えて
鍵を外す
Basic認証をやめたい。認証の処理を消して、静的ファイルだけのサイトに戻して。
鍵をかける範囲に関わる設定があれば、それも元に戻して
やってみよう：一部のページに鍵をかける
/admin/ 以下に Basic認証をかけて
やってみよう：サイト全体に鍵をかける
サイト全体に Basic認証をかけて

中級 ｜ データベース（データ共有型Webアプリ）

参考: vibecodingnotes.com/handson-cloudflare-d1-webapp/

① ベース名を決める（AGENTS.md に記録）
以下を AGENTS.md に記録してください。
CLAUDE.md からは AGENTS.md を読み込むようにしてください。
====
このプロジェクトのベース名は my-bbs です。
- アプリ名・プロジェクト名・GitHubリポジトリ名 = ベース名
- D1データベース名 = ベース名のうしろに -db を付けた名前
これ以降、私のプロンプトの <ベース名> はベース名に、
<D1データベース> は「ベース名-db」に読み替えて作業してください。
① 作るものを決める（AGENTS.md に記録）
これから作るアプリの仕様を AGENTS.md に書いてください。
====
## 作るもの：匿名一行掲示板
- 名前登録なし、初めて投稿したときに会員番号が払い出される（1, 2, 3...の連番）
- 同じブラウザから投稿した人には毎回同じ会員番号が使われるようにする
- 画面には「会員1号」「会員2号」と表示する
- 投稿内容は1行のテキスト
② 一気に作って、手元で動かす
AGENTS.md の仕様のとおりに、この掲示板を Cloudflare Workers で作って。
D1データベース <D1データベース> がまだ無ければ作って。
テーブルはマイグレーションファイルで作る。
公開するのは public フォルダの中だけにする。
API のコードは src/index.js に書く。
作ったら、ローカルの D1 にマイグレーションを適用（migrations apply）してから、
ローカルサーバーを起動して。
③ できたものを見学する
作ったものを見学したい。
このフォルダにできたファイルとフォルダ（隠しフォルダも含めて）を、
データベース・スキーマ・バックエンド・フロントエンド・設定のどれに当たるかで表にして。
D1 のデータベースそのものはどこにあるかも教えて。
④ 本番反映（デプロイ＆マイグレーション）
本番DBにマイグレーションを適用（migrations apply）してから、
wrangler で Cloudflare に直接デプロイして
⑤ 公開したあとの運用：見た目を修正する
ユーザーごとに投稿の背景色を変えてほしい
⑤ 公開したあとの運用：反映
デプロイして
⑤ 公開したあとの運用：データベースの構造を変える
投稿者が名前を設定できるようにして、投稿に会員番号と一緒に名前も表示してほしい
⑤ 公開したあとの運用：データを管理する
不適切な投稿があるので、◯◯の投稿を削除して

①作業フォルダの準備 は Finder での操作のため、コピーするプロンプトはなし（手順は上記の参考リンクへ）。