用途
该技能用于指导极简静态站点的功能开发。它扩展自 Generic Feature Developer 技能，后者提供开发工作流、范围评估以及“自建还是集成”决策的基础内容，本技能在其之上补充静态站点相关的架构与实现约定。
静态站点架构
典型项目结构为：
project/
├── index.html # Main page
├── style.css # All styles
├── script.js # All interactions
├── assets/ # Images, icons
├── .github/workflows/ # Automation (optional)
└── docs/ # Documentation
其核心理念是无构建工具：编辑 → 保存 → 部署。使用纯 HTML（无模板引擎）、纯 CSS（无 Sass/Less/PostCSS）、纯 JS（无打包、无转译），生产环境不包含 node_modules。
开发工作流
本地测试可使用以下命令：
# Start local server (cross-platform options)
python -m http.server 8000 # Windows
python3 -m http.server 8000 # macOS/Linux
npx serve . # Node.js (recommended - all platforms)
# Visit http://localhost:8000
提交前的检查包括：审查标记与 CSS 在 Chrome、Firefox 和 Safari 中的支持情况；在 375px、768px 和 1024px 断点下检查布局；仅在用户要求时运行浏览器、Lighthouse 或截图检查。
渐进增强
其哲学为：内容优先（无 CSS/JS 也能工作）、用 CSS 增强（为支持的浏览器提供更好样式）、用 JS 增强（为启用 JS 的浏览器提供交互）。
示例模式使用原生 details/summary 元素实现无 JS 可用的菜单，并在支持 IntersectionObserver 时进行自定义动画增强。
原生 JavaScript 模式
涵盖以下常用模式：
- 事件委托：用单个监听器处理多个元素，通过 e.target.matches 判断目标。
- DOM Ready：使用 DOMContentLoaded 事件，或将脚本放在 body 末尾。
- 类切换：使用 classList.toggle、add、remove 控制可见性与状态。
自动化（GitHub Actions）
提供简单的部署工作流示例，在推送到 main 分支时通过 peaceiris/actions-gh-pages 部署到 GitHub Pages。
图片优化方面，建议提交前使用 pngquant 压缩 PNG、jpegoptim 优化 JPEG、cwebp 转换为 WebP。
功能检查清单
开始前：阅读 CLAUDE.md 了解项目约束、检查可复用的现有模式、理解性能预算。
开发中：每次只做一个更改、在多个浏览器中测试、测试响应式、保持页面体积在预算内。
完成前：Lighthouse 性能达到 95 以上、测试所有断点、提供截图用于对比、更新文档。
性能目标
| Metric | Target |
|---|---|
| Total weight | < 50KB |
| First Contentful Paint | < 1s |
| Lighthouse Performance | 95+ |
参见
- Generic Feature Developer：工作流与决策
- Code Review Standards：质量要求
- Design Patterns：UI 模式