公開するWebアプリの地雷を避ける：Claude に安全ルールを守らせるスキルを入れる

Claude Code は、頼めば何でも作ってくれる。危ないものも、同じ速さで作る。 こちらが「それは危ない」と言わなければ、危ないほうを選ぶことがある。

個人開発で公開するアプリの場合、初心者が踏みやすい地雷はだいたい決まっている。それを毎回自分で見張るのは無理なので、Claude 側に守らせる。そのためのスキルを入れておく、という話。

1. なぜスキルを入れるのか

1-1. 戻せない失敗がいくつかある

作りながら覚えるのでよい。ほとんどの失敗はやり直せる。ただし、やり直しが効きにくいものがいくつかある。

• 秘密のキーを漏らす：APIキーやトークンをコードに書いてしまう。Public リポジトリなら誰でも見つけられるし、Private でも履歴に残って消しにくい。悪用されると課金が跳ねる
• 個人情報を流す：メールアドレスや名前を持ってしまい、それが漏れる。持った時点で責任が生まれる
• 他人に使われる：ログインの判定をブラウザ側だけでやってしまい、素通りされる

どれも「後で気づいて直す」が効きにくい。逆に言えば、この手のものさえ踏まなければ、あとは気楽に作ってよい。

1-2. 自分で見張るのは無理

避けるには、作っている最中に気づく必要がある。ところが初心者ほど、いま危ないことをしていると気づけない。危ないと知らないから頼んでしまう。

なので、見張る役をClaude 側に持たせる。危ない方向に進もうとしたときに、Claude のほうから止めて安全な代替案を出す、という形にする。

1-3. CLAUDE.md ではなくスキルにする理由

同じことは CLAUDE.md（Claude が毎回読む指示ファイル）に書いてもできる。ただし CLAUDE.md は毎回まるごと読み込まれるので、長いルールを常駐させるとそのぶん毎回のコストになり、他の指示も埋もれる。

スキルなら「公開アプリを作る・認証を足す・デプロイする」といった関係のある場面でだけ読み込まれる。安全ルールのように「普段は出てこなくてよいが、その場面では確実に効いてほしい」ものは、スキル向き。

2. スキルを入れる

入れるのは kukude-webapp-safety というスキル。名前の「ククデ」は、このサイトが開いているハンズオン「ククデ会」から来ているだけで、中身は誰が使ってもよい汎用のもの。

2-1. 「スキル」と「プラグイン」の関係

手順に入る前に、紛らわしいところをひとつ。配る単位と中身の単位で名前が違う。

• スキル：中身の1単位。Claude が「この場面だ」と判断して読む指示文
• プラグイン：配る単位。スキルを1つ以上まとめたもの

今回のプラグインにはスキルが1つだけ入っていて、名前も同じ kukude-webapp-safety。だから「スキルを入れる」と言いつつ、実際に操作するのはプラグインの画面になる。

設定には「スキル」という別項目もあるが、これは別のレイヤー。プラグインとして配っているものは プラグイン から追加する。

2-2. 先に中身を読む

手順の途中で、赤い警告が出る。

プラグインをインストール、更新、または使用する前に、そのプラグインを信頼できることを確認してください。マーケットプレイスからインストールされたプラグインはAnthropicが管理するものではなく、意図した通りに動作すること、または変更されないことをAnthropicは保証できません。

これは正しい警告なので、驚かなくてよい。 スキルの正体は「Claude への指示文」で、入れるということは、書いた人の指示を自分の環境に常駐させるということ。作者を知らないスキルを中身も見ずに入れるのは、知らない人が書いたスクリプトをそのまま実行するのと変わらない。

このスキルは Markdown 1ファイルなので、そのまま読める：skills/kukude-webapp-safety/SKILL.md。書いてあるのは §4 と §5 の内容。ざっと目を通して、納得できたら入れる。他の人が配っているスキルでも同じ。

2-3. Claudeデスクトップアプリで入れる

スキルを入れる6ステップ（クリックで拡大）

1. アカウントメニューから 設定 を開く
2. 左メニュー「カスタマイズ」の プラグイン を開き、右上の 追加 → マーケットプレイスを追加
3. リポジトリから追加 を選ぶ
4. URL 欄に yto/yto-skills を入れて 同期（ここで上の警告が出る）
5. ディレクトリ 画面が開く。コード タブに yto-skills が現れる
6. Kukude webapp safety を選び、インストール

2-4. ターミナルで入れる

Claude Code の CLI から入れる場合はこの2行。

/plugin marketplace add yto/yto-skills
/plugin install kukude-webapp-safety@yto-skills

2-5. 入ったか確かめる

設定 → プラグイン の一覧に Kukude webapp safety が並んでいて、トグルが有効になっていれば入っている。

普段は、関係する場面で Claude が自動的に使う。呼び出しを意識する必要はない。明示的に呼びたいときは、チャットで /kukude-webapp-safety と打てばよい。

動いているか確かめるなら、Claude に聞いてみるのが早い。

Claude

公開Webアプリの安全ルールのスキルは使える状態になってる？
使えるなら、何を止めてくれるのか3つだけ挙げて。

3. 接し方は CLAUDE.md に置く

スキルが持っているのは「公開アプリを作るときの安全ルール」で、その場面でだけ読み込まれる（→ §1-3）。一方で、いつでも効いてほしいこともある。「専門用語を使わず平易に説明してほしい」は、アプリを作っていないときにも効いてほしい。

こういうものは ~/.claude/CLAUDE.md に置く。Claude Code が毎回読むファイルで、次を貼れば作ってくれる。

Claude

~/.claude/CLAUDE.md に、下記の「=== ここから ===」から「=== ここまで ===」までの内容を追記して。
ファイルが無ければ新しく作る。すでに同じ内容が入っていれば、二重に足さず「もう入っています」と伝えてください。
すでに ~/.claude/CLAUDE.md に、これと矛盾する開発ルール（構成や認証の方法を固定しているものなど）が
入っている場合は、追記せずに、どこがぶつかるかを教えてください。

=== ここから ===
# 個人開発ルール（必読）

公開するWebサイト・Webアプリを作るときの安全ルールは、
Claude Code のスキル `kukude-webapp-safety` に従ってください。

## 私への接し方

- 私はエンジニアではないので、専門用語は避けて平易な日本語で説明してください
- ルール違反になりそうな時や、私が気づいていないリスクがある時は、作業を止めて先に指摘してください
- 難しい判断やあとで戻せない操作の前には、何をするのか・なぜ必要かを説明してから進めてください
=== ここまで ===

会社やコミュニティで配られた開発ルールをすでに ~/.claude/CLAUDE.md に入れていると、内容がぶつかることがある。とくに多いのが「認証はこの方法だけ」「この構成で作ること」と決め打ちしているもの。両方を残すと Claude がどちらに従うか安定しないので、どちらを優先するか決めて、片方を外す。

ただし仕事で配られたルールなら、それは外さない。外して個人開発を通すと、次に仕事で使うときに安全側の設定が消えたままになる。この場合は個人開発を別の環境に分ける（別のマシン、別のユーザーアカウントなど）。そもそも仕事と個人開発を同じ環境に混ぜてはいけない。混ぜると、会社のコードや秘密が個人のリポジトリに紛れ込む事故が起きるし、所属先のルール違反にもなりうる（→ §6）。

最初の1行「公開するWebサイト・Webアプリを…」はスキルへのポインタ。スキルは自動で読み込まれるので無くても動くが、安全ルールは確実に効いてほしいので念のため書いておく。残りは自分に合わせて直してよい（エンジニアなら「私への接し方」は要らない、など）。

ここに書くのはこれくらいの分量までにしておく。毎回まるごと読み込まれるので、長くするほど毎回のコストになり、肝心の指示も埋もれる。安全ルールの本体をここに書かずスキルにしたのは、そのため（→ §1-3）。

4. 何を守ってくれるのか

スキルが持っている原則は6つ。細かい判断は Claude に任せてよいが、何を任せたのかは知っておくとよい。

1. 秘密のキー・トークンをソースコードに直書きしない。 秘密はサーバ側の環境変数や Secrets に置き、ブラウザに送るコードには入れない
2. 個人情報は、そもそも取らない。 持たなければ漏らしようがない。使う当てが無いなら集めない、必要になってから足す。取ったものはリポジトリにコミットしない
3. ログインの合否をブラウザ側だけで判定しない。 ブラウザに送ったものは誰でも書き換えられる。判定は必ずサーバ側で行う（→ データ共有型Webアプリの基礎知識）
4. リポジトリは基本 Private にする。 GitHub Pages のように仕組み上 Public が必要なときだけ Public にし、切り替える前に秘密や個人情報が混ざっていないか確認する（→ GBA 6-2）
5. ユーザーが決めたパスワードを自前で保存する認証は避ける。 安全に作り切るのが難しいため。代わりの選び方は §5
6. 守るべきデータがあるのに、認証なしで公開しない。 本人だけが見るべき情報を誰でも読める状態にすると、それは流出

あわせて「作り込まない」も入っている。文章と画像を見せるだけなら静的サイトで十分で、扱う秘密・認証・個人情報が増えるほど地雷も増える（→ Webアプリの2つのタイプ）。

5. 認証は「そもそも要るか」から

いちばん判断を間違えやすいのが認証まわりなので、スキルの中身から要点を抜いておく。

多くの公開アプリは認証が要らない。 宣伝サイトや公開ツールは、誰でも見られるほうがよい。認証が要るのは、自分だけが使う管理画面、ログインした本人だけが見る個別ユーザー画面、身内にだけ見せたいページ、といった相手を絞りたい部分だけ。無駄な認証を作らないほうが安全になる。

必要になったときの選び方は、この順。

1. ソーシャルログイン（Google・GitHub などの「◯◯でログイン」）。認証そのものを外部に任せられるので、パスワードもパスキーも自分で扱わずに済む。ただし要求する情報は本人を見分けるのに要る最小限に絞る（→ ソーシャルログインの寄せ書きアプリ）
2. パスキー（＋リカバリコード）。外部サービスに頼らず自己完結する（→ パスキー＋リカバリコードのアカウント認証）
3. ランダムなログインキー（UUID）方式。メールもパスワードも要らず軽いが、条件が2つある。漏れても致命的でない情報のアカウントに限ること、そして日常的に使うサービスに限ること（→ ログインキー方式のアカウント管理）

3 の2つ目の条件は見落としやすい。ログインキーはブラウザの localStorage に置くが、そこは永続的な保存領域ではない。iPhone・iPad のブラウザは7日ほど開かないと中身を消すので、年に数回しか使わないサービスでは次に開いたときには消えている。この方式には復旧手段が無いので、そこで締め出しが確定する。

そして例外がひとつ。管理画面や、身内にだけ見せたいページのように、入る人が自分ひとり／少人数に限られるなら、「1つの共有パスワード」でよい。 Cloudflare の Secret に置いてサーバ側で照合する形にする。避けるべきなのは「利用者ごとにパスワードを登録・保存する」ほうで、共有パスワード1本はそれに当たらない（→ 管理画面をBasic認証で守る）。数人で守るだけなら Cloudflare Access に任せる手もある（無料で50人まで）。

身内向けだと「URLを知っている人だけ見られればよい」で済ませたくなるが、URL は履歴・リンクプレビュー・又貸しで漏れやすく、漏れたら中身も漏れる。URL は公開のままにして共有パスワードで守るほうが素直。やり直しもパスワードを変えるだけで済み、URL は据え置ける。

6. これは最低限であって、保証ではない

スキルを入れても安全が保証されるわけではない。踏むと戻れない地雷を避けるための最低限であって、網羅的なセキュリティ対策ではない。

決済・健康・他人の個人情報のように重い情報を扱うなら、作る前に詳しい人に相談する。「これくらいなら大丈夫だろう」で進めていい範囲を超えているかどうかは、扱う情報の重さで決まる。

会社の業務システムや社内向けアプリも対象外。その用途は、所属先のルールや情報システム部門の方針に従う。そして仕事と個人開発は、ルールも環境も必ず分ける。同じ環境に混ぜない。

7. 更新する・外す

スキルは更新されることがある。入れたあと自動では追随しないので、たまに確認する。

更新は、設定 → プラグイン → Kukude webapp safety と進んで、更新 ボタン。

プラグインの詳細ページ。更新・有効無効の切り替え・アンインストールがここにある

外したいときは、同じページの ⋮ から アンインストール。消さずに一時的に止めるだけなら、右のトグルで無効にできる。

マーケットプレイスにあるプラグインをまとめて確認したいときは、設定 → プラグイン → 右上の 参照 → コード タブ → yto-skills の横の … → アップデートを確認。

ターミナル（Claude Code CLI）ならこの1行。

/plugin marketplace update yto-skills

/plugin はデスクトップアプリでは使えないので、そちらでは上の画面から操作する。

何を変えたかは yto-skills のリポジトリの履歴で追える。