Sumonta056/claude-storehouse：更新網站、示範與 README

更新網站、示範與 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 <上次網站或 README 的提交>..HEAD 與 CHANGELOG.md → [Unreleased] 區段會列出使用者可見的變更。
• git diff <該提交>..HEAD -- .claude/rules/business-logic.md .claude/rules/ui.md public/ 會顯示新的行為。
• 忽略測試、重構與 CI。網站和 README 只描述使用者看到的內容。

2. 將每個變更對應到它顯示的位置

變更區域	網站 (site/index.html)	螢幕截圖	README.md 章節
儀表板、用量頻帶	功能「儀表板與用量」	dashboard.png	功能特色 › 儀表板與用量
技能、代理程式、Fork	功能「技能與代理程式」	skills.png	功能特色 › 技能與代理程式
我的最愛、分類	功能「我的最愛」	favorites.png	功能特色 › 我的最愛
外掛、模組、解除安裝	功能「外掛與模組」	plugins.png	功能特色 › 外掛與模組
掛鉤、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. 給示範所需的內容

• 範例資料。 需要資料的功能（新的項目類型、模組、已暫停的掛鉤）應在 scripts/demo-home.js 中提供。螢幕截圖也使用相同的資料。絕不要在範例資料中放入看起來像金鑰或令牌的字串：安全掛鉤會封鎖寫入。
• 新的 GET 路由。 如果 public/app.js 呼叫了新的 GET /api/...，請在 site/build.js 的 record() 中記錄它，並在 site/demo/demo-api.js 的 route() 中提供服務。
• 新的寫入路由。 在 route() 中新增一個 case，以與伺服器修改檔案相同的方式修改記憶體中的 db，並回傳與 src/api*.js 中的處理器相同的 JSON 格式。如果真實的處理器可以復原，請為活動記錄加入 undo 函式。無法在瀏覽器中運作的寫入（例如在編輯器中開啟、解除安裝、刪除）應落入 default case，並回傳 501 狀態碼及「即時示範中無法使用」的訊息。UI 隨後會以 Toast 形式顯示該訊息。
• 變更的回應格式。 更新 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。自行開啟分頁，並在結束時關閉它。

1. 為每個受影響的頁面開啟 http://127.0.0.1:8811/demo/#<page>。主控台不應有任何錯誤。
2. 透過點擊操作來使用新功能。每次寫入動作都應顯示 Toast，頁面應更新，且活動記錄應列出該動作，並在真實應用程式有復原功能時顯示「復原」。
3. 開啟 http://127.0.0.1:8811/。示範分頁應能切換頁面，重設示範按鈕應能重新載入，且每個「在示範中試試看」的連結都應開啟正確的頁面。

5. 重新擷取受影響的螢幕截圖

絕不對真實的 ~/.claude 目錄進行截圖。所有截圖都應從示範頁面以 1440 × 900、2x 縮放比例拍攝。結果尺寸為 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 分頁：使用 viewport 1440x900x2 執行 emulate，透過 evaluate_script 驅動狀態，然後使用 filePath = docs/images/<name>.png 執行 take_screenshot。請勿使用 resize_page，它會產生 1612 像素的高度。

請檢查每一張新圖片。它應顯示該功能，沒有意外的懸停標記或焦點環，且沒有任何部分處於半載入狀態。docs/images/icon.png 是 public/icon.svg 的 256 像素渲染。只有當圖示變更時才需要重新產生它。

6. 撰寫文字

• 網站與 README 對相同事物應使用相同的用詞。採用 sentence case、平實的動詞與簡短的句子。
• 網站上的每個功能區塊：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. 檢查

1. 執行 npm run format，然後執行 npm run check。顯示輸出結果。
2. npm run site 應成功執行。test/site.test.js 是 npm test 的一部分。
3. 分別在 1440 像素與 390 像素寬度下開啟網站：不應有橫向滾動條，每張圖片都應載入，主控台不應有錯誤。
4. 將變更後的示範頁面或網站發布為 Artifact 連結給使用者，並告知哪些截圖變更了，以及哪些項目你無法檢查。

在提交前務必詢問使用者。文字與截圖變更使用 docs(site): ...，新的網站或示範行為使用 feat(site): ...，僅 README 變更使用 docs(readme): ...。