Sumonta056/claude-storehouse

更新网站、演示和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 创建一个假的 home 目录，然后在该目录上启动真实的服务器，并记录下每次 GET 请求的响应。Home 路径会被转换为 /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 and usage"	dashboard.png	Features › Dashboard and usage
技能、代理、fork	功能 "Skills and agents"	skills.png	Features › Skills and agents
收藏、分类	功能 "Favorites"	favorites.png	Features › Favorites
插件、模组、卸载	功能 "Plugins and mods"	plugins.png	Features › Plugins and mods
Hooks、MCP 服务器	功能 "Hooks and MCP servers"	mcp.png	Features › Hooks and MCP servers
抽屉、编辑器、活动、备份	功能 "Edit in place, undo anything"	editor.png	Features › Edit in place
开关机制	章节 "How on / off works" 中的行	—	How on/off works 表格
新页面	新的 .feature 块（备用 flip）、.demo-tabs 中的演示标签、site/site.js 中 PAGE_NAMES 的名称	新的 <page>.png	新的 Features 子章节
CLI 参数	"CLI options" 面板	—	CLI options
键盘快捷键	"Keyboard shortcuts" 表格	—	Keyboard shortcuts
安全规则	"Safety and privacy" 面板	—	Safety and privacy
文件结构	—	—	How it works 树形结构
版本	<head> 中的 JSON-LD softwareVersion	—	Changelog (由 /release-tag 负责)

#demo 中的 "Things to try" 标签必须指向演示数据中存在的项目。

3. 为演示提供所需的内容

• 样本数据。 需要数据的功能（新的项目类型、模组、挂起的 hook）在 scripts/demo-home.js 中添加。截图也使用相同的数据。切勿在其中放入看起来像密钥或令牌的字符串：安全 hook 会阻止写入。
• 新的 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并附带 "not available in the live demo" 消息。然后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/。演示标签页可以切换页面，Reset demo 会重新加载，每个 "Try it in the demo" 链接会打开正确的页面。

5. 重新捕捉已更改的截图

永远不要截取真实的 ~/.claude 目录。所有截图都应在演示中拍摄，尺寸为1440 × 900，缩放比例为2。结果是2880 × 1800，与 <img> 标签声明的尺寸一致。

对于无需点击操作的页面，使用 headless 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对于相同的内容使用相同的措辞。采用句子大小写、简洁的动词和短句。
• 网站上的每个功能块：1个 <h3>，1或2个句子，最多4个列表项，1个 "Try it in the demo →" 链接，包含 data-demo="<page>"。
• README：将该功能添加到其 Features 子章节，最多5个要点。包含截图的子章节，应将截图放在要点之后。不要编辑 Changelog 章节。该章节由 /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): ...。