ウェブサイト、デモ、README を更新する

ウェブサイトは site/ にあります。.github/workflows/pages.yml により、main ブランチでCIが成功すると https://sumonta056.github.io/claude-storehouse/ にデプロイされます。

ライブデモは実際の public/ のコードを使用します。site/build.js は、public/ を _site/demo/ にコピーし、app.js の前に site/demo/demo-api.js を追加して、demo-data.json を書き込みます。このファイルを作成するために、ビルドは scripts/demo-home.js から偽のホームを作成し、その上で実際のサーバーを起動して、すべてのGETレスポンスを記録します。ホームパスは /Users/demo になります。

したがって、UIの変更は特別な作業なしにデモに反映されます。このスキルは、自動的には更新されない部分（サンプルデータ、偽の書き込みルート、スクリーンショット、テキスト）をカバーします。

編集を計画し、ファイルを変更する前に承認を得てください。コミットする前に必ず確認を求めてください。

1. 変更点を特定する

git log --oneline <last site or README commit>..HEAD と CHANGELOG.md → [Unreleased] リストでユーザーに見える変更を確認します。
git diff <that commit>..HEAD -- .claude/rules/business-logic.md .claude/rules/ui.md public/ で新しい動作を確認します。
テスト、リファクタリング、CIは無視します。サイトとREADMEはユーザーが見るものを説明します。

2. 各変更を表示場所にマッピングする

変更された領域	ウェブサイト (`site/index.html`)	スクリーンショット	README.md セクション
ダッシュボード、使用量帯域	機能「ダッシュボードと使用量」	`dashboard.png`	機能 › ダッシュボードと使用量
スキル、エージェント、フォーク	機能「スキルとエージェント」	`skills.png`	機能 › スキルとエージェント
お気に入り、カテゴリ	機能「お気に入り」	`favorites.png`	機能 › お気に入り
プラグイン、MOD、アンインストール	機能「プラグインとMOD」	`plugins.png`	機能 › プラグインとMOD
フック、MCPサーバー	機能「フックとMCPサーバー」	`mcp.png`	機能 › フックとMCPサーバー
ドロワー、エディタ、アクティビティ、バックアップ	機能「その場で編集、なんでも元に戻す」	`editor.png`	機能 › その場で編集
スイッチの仕組み	セクション「オン/オフの仕組み」の行	—	オン/オフの仕組みテーブル
新しいページ	新しい `.feature` ブロック（代替 `flip`）、`.demo-tabs` 内のデモタブ、`site/site.js` 内の `PAGE_NAMES` の名前	新しい `<page>.png`	新しい機能サブセクション
CLIフラグ	「CLIオプション」パネル	—	CLIオプション
キーボードショートカット	「キーボードショートカット」テーブル	—	キーボードショートカット
セーフティルール	「セーフティとプライバシー」パネル	—	セーフティとプライバシー
ファイルレイアウト	—	—	仕組みツリー
バージョン	`<head>` 内の JSON-LD `softwareVersion`	—	変更履歴 (`/release-tag` が管理)

#demo 内の「試してみよう」チップは、デモデータに存在するアイテムを指定する必要があります。

3. デモに必要なものを提供する

サンプルデータ。 データを必要とする機能（新しいアイテムタイプ、MOD、停止中のフック）は、scripts/demo-home.js でデータを取得します。スクリーンショットも同じデータを使用します。キーやトークンのように見える文字列を絶対に入れないでください。セキュリティフックが書き込みをブロックします。
新しいGETルート。 public/app.js が新しい GET /api/... を呼び出す場合、site/build.js の record() で記録し、site/demo/demo-api.js の route() で提供します。
新しい書き込みルート。 route() に、サーバーがファイルを変更するのと同じように db をメモリ上で変更するケースを追加し、src/api*.js のハンドラーと同じJSON構造を返します。実際の機能が元に戻せる場合は、アクティビティエントリに undo 関数を追加します。ブラウザで機能しない書き込み（エディタで開く、アンインストール、削除）は default ケースに該当し、501と「ライブデモでは利用できません」というメッセージを返します。UIはそのメッセージをトーストとして表示します。
変更されたレスポンス形式。 demo-api.js の該当する関数を更新します。test/site.test.js はビルドをチェックするもので、各ルートをチェックするわけではないので、Chromeでルートをテストしてください（ステップ4）。

4. ビルドして確認する

npm run site
python3 -I -m http.server 8811 --bind 127.0.0.1 -d _site

Chrome DevTools MCP を使用します。自分のタブを開き、最後に閉じてください。

変更された各ページについて http://127.0.0.1:8811/demo/#<page> を開きます。コンソールにエラーがないことを確認します。
クリックして新しい機能を使用します。各書き込みでトーストが表示され、ページが更新され、アクティビティにリストされ、実際のアプリに「元に戻す」がある場合はそれが表示されます。
http://127.0.0.1:8811/ を開きます。デモタブでページが切り替わり、デモをリセット で再読み込みされ、各「デモで試す」リンクが正しいページを開くことを確認します。

5. 変更されたスクリーンショットを再取得する

実際の ~/.claude のスクリーンショットは絶対に撮らないでください。すべてのスクリーンショットはデモから、1440 × 900、スケール2で撮影します。結果は2880 × 1800になり、<img> タグで宣言されたサイズになります。

クリック操作がないページの場合は、ヘッドレスChromeを使用します。ショットごとに新しいプロファイルフォルダを使用します:

P=$(mktemp -d <scratchpad>/chrome.XXXXXX)
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless=new --disable-gpu --user-data-dir="$P" \
  --hide-scrollbars --force-device-scale-factor=2 --window-size=1440,900 --virtual-time-budget=4000 \
  --screenshot="$PWD/docs/images/<name>.png" "http://127.0.0.1:8811/demo/#<page>"

クリック操作が必要な状態（ドロワー、編集タブ、トグル）の場合は、MCPタブを使用します: emulate でビューポートを 1440x900x2 に設定し、evaluate_script で状態を操作し、take_screenshot で filePath を docs/images/<name>.png に設定してスクリーンショットを撮ります。resize_page は使用しないでください。高さが1612pxになります。

新しい画像をそれぞれ確認します。機能が表示され、ホバーマークやフォーカスリングが偶然に付いておらず、半分読み込まれた部分がないことを確認します。docs/images/icon.png は public/icon.svg の256pxレンダリングです。アイコンが変更された場合のみ再作成します。

6. テキストを記述する

サイトとREADMEは同じものに対して同じ単語を使用します。文の先頭は大文字、平易な動詞、短い文を使用します。
サイトの各機能ブロック: 1つの <h3>、1～2文、最大4つのリスト項目、1つの「デモで試す →」リンク（data-demo="<page>" 付き）。
README: 機能をその機能サブセクションに追加します（最大5つの箇条書き）。スクリーンショットがあるサブセクションでは、箇条書きの後に配置します。変更履歴セクションは編集しないでください。/release-tag が管理します。
すべてのREADME画像とリポジトリリンクは絶対URL（https://raw.githubusercontent.com/Sumonta056/claude-storehouse/main/... または https://github.com/Sumonta056/claude-storehouse/blob/main/...）を使用します。npmは相対パスを解決しません。
新しいスクリーンショットには、画像の内容を示す実際の alt テキストを設定します。
機能によって製品の説明が変わる場合は、site/index.html の <meta name="description">、og:description、twitter:description、および JSON-LD description を更新します。
すべての記述をコードと .claude/rules/business-logic.md に対して確認します。削除された機能をリストアップしないでください。

7. 確認する

npm run format を実行し、次に npm run check を実行します。出力を表示します。
npm run site が成功します。test/site.test.js は npm test の一部です。
サイトを1440pxと390pxで開きます: 横スクロールがなく、すべての画像が読み込まれ、コンソールにエラーがないことを確認します。
変更されたデモページまたはサイトをユーザー向けにアーティファクトリンクとして公開し、どのスクリーンショットが変更されたか、何を確認できなかったかを伝えます。

コミットする前に確認を求めてください。テキストとスクリーンショットには docs(site): ...、新しいサイトまたはデモ動作には feat(site): ...、READMEのみの変更には docs(readme): ... を使用します。

ウェブサイト・デモ・README更新