vanilla-web

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Vanilla Web (HTML/CSS/JS)

原生Web（HTML/CSS/JS）

Baseline constraints (from the rule)

基线约束（来自规则）

Use these as non-negotiables:

"HTML/CSS/JS only (no framework)."
"Keep JS modular (ESM), split responsibilities (SRP)."
"Prefer small, focused functions and pure utilities; avoid global state."
"Ship complete runnable files and minimal tests before marking done."

以下为不可协商的要求：

"仅使用HTML/CSS/JS（无框架）。"
"保持JS模块化（ESM），拆分职责（SRP）。"
"优先选择小巧、专注的函数和纯工具类；避免全局状态。"
"在标记完成前，交付完整的可运行文件和最小化测试用例。"

When to activate this skill

何时启用此技能

Activate when the user asks for:

vanilla JS / plain HTML/CSS/JS / static page
“no framework”, “no React/Vue/Angular”
small UI components (modal, tabs, dropdown, form validation) built directly in the DOM
refactors to remove framework dependencies or reduce JS complexity

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

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

Output expectations

输出要求

Deliver complete runnable files (no missing imports/paths, no TODO placeholders).
Keep changes small, testable, and incremental.
Provide a short runbook: how to run/verify locally + what to check in DevTools.

交付完整可运行的文件（无缺失的导入/路径，无TODO占位符）。
保持变更小巧、可测试且增量式。
提供简短的运行手册：如何在本地运行/验证 + 在DevTools中需要检查的内容。

Implementation workflow

实施工作流

1) Clarify only what blocks correctness

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

Ask up to 3 questions only if requirements are ambiguous in a way that changes implementation. Otherwise proceed with explicit assumptions.

仅当需求存在歧义且会影响实现方式时，最多提出3个问题。否则基于明确的假设继续推进。

2) Structure & responsibilities

2) 结构与职责划分

Prefer this split:
- ```
index.html
```
  (semantic markup)
- ```
styles.css
```
  (or
```
css/…
```
  )
- ```
js/main.js
```
  as an ESM entrypoint +
```
js/modules/*.js
```
  for components/utilities
SRP: each module does one thing (DOM wiring, state, rendering, API, utilities).
Avoid global mutable state. If state is needed, encapsulate it in a module and expose minimal functions.

优先采用以下拆分方式：
- ```
index.html
```
  （语义化标记）
- ```
styles.css
```
  （或
```
css/…
```
  ）
- ```
js/main.js
```
  作为ESM入口文件 +
```
js/modules/*.js
```
  用于存放组件/工具类
SRP：每个模块仅负责一件事（DOM关联、状态管理、渲染、API调用、工具类）。
避免全局可变状态。若确实需要状态，将其封装在模块内并仅暴露必要的函数。

3) HTML guidelines

3) HTML指南

Use semantic tags (
```
header
```
,
```
main
```
,
```
nav
```
,
```
button
```
,
```
dialog
```
where applicable).
Accessibility baseline: keyboard navigation, focus states, ARIA only when needed (don’t ARIA-overuse).

使用语义化标签（适用时使用
```
header
```
、
```
main
```
、
```
nav
```
、
```
button
```
、
```
dialog
```
）。
可访问性基线：支持键盘导航、焦点状态，仅在必要时使用ARIA（避免过度使用ARIA）。

4) CSS guidelines

4) CSS指南

Prefer simple, predictable naming (BEM-like optional).
Use CSS variables for theme primitives.
Keep layout responsive by default (flex/grid + relative units).

优先选择简单、可预测的命名方式（可选用类似BEM的命名规范）。
使用CSS变量定义主题基础样式。
默认保持布局响应式（使用flex/grid + 相对单位）。

5) JavaScript guidelines (ESM)

5) JavaScript指南（ESM）

Use
```
type="module"
```
and explicit imports/exports.
Prefer pure utilities and small functions.
Use event delegation for lists/dynamic UIs.
Handle errors explicitly (network failures, missing DOM nodes, invalid inputs).

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

Verification checklist

验证清单

Use the detailed checklist in:

```
references/checklist.md
```

When finishing work, ensure:

No console errors/warnings caused by the change
All referenced assets resolve (paths/imports)
Feature works with keyboard and without requiring a framework runtime

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

```
references/checklist.md
```

完成工作时，确保：

变更不会导致控制台出现错误/警告
所有引用的资源均可正常加载（路径/导入）
功能可通过键盘操作，且无需框架运行时支持

Progressive disclosure

渐进式披露

Keep this SKILL.md lean; store deeper examples and checklists under

references/

. Do not paste large style guides into SKILL.md—link to repo examples instead.

保持此SKILL.md简洁；更深入的示例和清单存储在

references/

目录下。请勿将大型样式指南粘贴到SKILL.md中——请改为链接到仓库中的示例。

Suggested companion scripts (optional)

建议配套脚本（可选）

```
scripts/serve.sh
```
for quick static serving (manual verification)

See:

```
scripts/serve.sh
```

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

参考：

```
scripts/serve.sh
```