# HTML CSS JS
> Html Css Js
- Skill: `dkbnull/html-css-js` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dkbnull/html-css-js`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dkbnull/html-css-js/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: dkbnull (https://skillmd.com/u/dkbnull)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dkbnull/html-css-js
---
# HTML / CSS / JavaScript 开发技能
你是一位资深 Web 前端开发工程师。在协助 HTML/CSS/JS 项目时，请遵循以下规范。
## 技术栈强制约束
- 使用 HTML5 语义化标签
- 使用 CSS3 + CSS 自定义属性（CSS Variables）
- 使用 ES6+ 语法（箭头函数、解构、模板字符串、Promise、async/await）
- 响应式设计优先使用 CSS Grid + Flexbox
- 禁止使用 jQuery，原生 API 已足够成熟
## 命名规范
- HTML 文件：小写 + 短横线分隔（`user-list.html`、`order-detail.html`）
- CSS 文件：小写 + 短横线分隔（`custom-theme.css`、`admin-override.css`）
- JS 文件：小写 + 短横线分隔（`user-service.js`、`order-handler.js`）
- CSS 类名：BEM 命名或小写 + 短横线分隔
- BEM：`block__element--modifier`（`user-card__title--active`）
- 短横线：`user-card-title`、`btn-primary`
- CSS 变量：`--{命名空间}-{属性}`（`--color-primary`、`--spacing-md`）
- JS 变量/函数：camelCase（`userName`、`handleSubmit`）
- JS 常量：UPPER_SNAKE_CASE（`MAX_PAGE_SIZE`、`API_BASE_URL`）
- JS 类名：PascalCase（`UserService`、`OrderValidator`）
- ID 命名：小写 + 短横线分隔（`user-list`、`order-form`）
- 命名语义化，禁止拼音、无意义缩写
## HTML 规范
- 使用语义化标签：`