vanilla-web

Vanilla Web（HTML/CSS/JS）

基本约束（来自规则）

以下要求不可妥协：

• “仅使用 HTML/CSS/JS（不使用框架）。”
• “保持 JS 模块化（ESM），按职责拆分（SRP）。”
• “优先使用小而专注的函数和纯工具函数；避免全局状态。”
• “交付完整、可运行的文件，并在标记完成前提供最少量的测试。”

何时启用此技能

用户提出以下需求时启用：

• 原生 JS / 纯 HTML/CSS/JS / 静态页面
• “不使用框架”、“不使用 React/Vue/Angular”
• 直接在 DOM 中构建小型 UI 组件（模态框、标签页、下拉菜单、表单验证）
• 重构以移除框架依赖或降低 JS 复杂度

输出要求

1. 提供完整、可运行的文件（不缺少导入或路径，不留 TODO 占位符）。
2. 保持改动小规模、可测试且循序渐进。
3. 提供简短的运行指南：说明如何在本地运行和验证，以及在 DevTools 中需要检查的内容。

实施流程

1) 仅澄清会影响正确性的问题

只有在需求存在歧义且会改变实现方式时，才提出最多 3 个问题。 否则，请明确列出假设后继续。

2) 结构与职责

• 优先采用以下划分：
  • index.html（语义化标记）
  • styles.css（或 css/…）
  • js/main.js 作为 ESM 入口文件，组件和工具函数放在 js/modules/*.js
• SRP：每个模块只负责一项工作（DOM 绑定、状态、渲染、API、工具函数）。
• 避免全局可变状态。如果需要状态，请将其封装在模块中，并仅公开最少量的函数。

3) HTML 指南

• 使用语义化标签（适用时使用 header、main、nav、button、dialog）。
• 无障碍基线：键盘导航、焦点状态；仅在需要时使用 ARIA（不要过度使用 ARIA）。

4) CSS 指南

• 优先使用简单、易预测的命名方式（可选用类似 BEM 的命名）。
• 使用 CSS 变量定义主题基础值。
• 默认确保布局具有响应性（使用 flex/grid 和相对单位）。

5) JavaScript 指南（ESM）

• 使用 type="module" 和显式导入/导出。
• 优先使用纯工具函数和小型函数。
• 对列表和动态 UI 使用事件委托。
• 明确处理错误（网络故障、缺少 DOM 节点、无效输入）。

验证清单

使用以下文件中的详细清单：

• references/checklist.md

完成工作时，确保：

• 改动未引发控制台错误或警告
• 所有引用的资源均可正常加载（路径/导入）
• 功能可通过键盘使用，且不需要框架运行时

渐进式披露

保持此 SKILL.md 简洁；将更深入的示例和检查清单放在 references/ 下。 不要将大型风格指南粘贴到 SKILL.md 中——改为链接到仓库示例。

建议的配套脚本（可选）

• scripts/serve.sh，用于快速启动静态服务（手动验证）

参见：

• scripts/serve.sh