更新首页布局样式和逻辑

CLAUDE.md

@@ -221,6 +221,66 @@ These rules capture long-term repository preferences confirmed by the user and s
 - `VITE_PUBLIC_PATH` - Public base path for production build
 - `VITE_OPEN_CDN` - Enable CDN for external dependencies
 
+## AI Skills
+
+本项目已全局安装 **gstack** 和 **Superpowers** 两组技能（skill），通过斜杠命令调用。
+
+### gstack — 浏览器验证与发布
+
+负责 QA 测试、浏览器自动化、安全审计、代码审查和发布部署。
+
+| 阶段 | 命令 | 功能 |
+|------|------|------|
+| **审查** | `/gstack-review` | 代码审查，自动修复明显问题，标记完整性缺口 |
+| | `/gstack-cso` | 安全审计（OWASP Top 10 + STRIDE），含漏洞验证 |
+| **QA 测试** | `/gstack-qa <url>` | 打开浏览器进行功能测试，发现 bug 并自动修复 |
+| | `/gstack-qa-only <url>` | 仅检测并报告 bug，不修改代码 |
+| | `/gstack-browse` | AI 浏览网页内容（通过 Playwright + 系统 Chrome） |
+| | `/gstack-scrape` | 抓取网页内容 |
+| **性能** | `/gstack-benchmark` | 页面加载性能基准测试 |
+| | `/gstack-canary` | 部署后监控：控制台错误、性能回归、页面故障 |
+| **发布** | `/gstack-ship` | 同步主分支、运行测试、推送、创建 PR |
+| | `/gstack-land-and-deploy` | 合并 PR、等待 CI、部署、验证生产环境 |
+| **诊断** | `/gstack-investigate` | 系统性根因调试 |
+| | `/gstack-retro` | 迭代回顾分析 |
+
+浏览器功能依赖 Playwright，已配置使用系统 Chrome（`C:\Program Files\Google\Chrome\Application\chrome.exe`），无需额外下载浏览器。
+
+### Superpowers — 思考与计划
+
+负责头脑风暴、方案设计、计划编写与执行、系统性调试。
+
+| 阶段 | 命令 | 功能 |
+|------|------|------|
+| **构思** | `/sp-brainstorm` | 交互式头脑风暴，梳理需求和方案 |
+| | `/sp-using-superpowers` | Superpowers 使用指南 |
+| **计划** | `/sp-write-plan` | 编写实现计划 |
+| | `/sp-execute-plan` | 按批次执行计划 |
+| **开发** | `/sp-subagent-dev` | 子代理驱动开发：规范→审查→实现→验证 |
+| | `/sp-tdd` | 测试驱动开发工作流 |
+| | `/sp-dispatch-agents` | 并行分发子代理任务 |
+| **调试** | `/sp-debug` | 系统性调试方法论 |
+| **审查** | `/sp-request-review` | 请求代码审查 |
+| | `/sp-receive-review` | 接收并处理审查反馈 |
+| **完成** | `/sp-verify` | 完成前验证检查 |
+| | `/sp-finish-branch` | 完成开发分支 |
+| **工具** | `/sp-write-skills` | 编写自定义 skill |
+| | `/sp-git-worktrees` | Git 工作树使用指南 |
+
+### 工作流建议
+
+推荐开发流程按此顺序使用两组 skill：
+
+```
+/sp-brainstorm          →  梳理需求
+/sp-write-plan          →  编写实现计划
+(编码实现)
+/gstack-review          →  代码审查
+/gstack-qa <url>        →  QA 测试
+/gstack-cso             →  安全检查
+/gstack-ship            →  发布
+```
+
 ## Development Notes
 
 - The project uses `/@` alias for `src/`