关于 semantic-html-first
semantic-html-first 是面向界面开发者的技能，倡导优先使用原生 HTML 元素构建交互。它以原生键盘、表单和无障碍语义为基础，并提供实现与审查指南。
主要功能
- 01优先选择匹配交互的原生元素
- 02用 ARIA 补充原生语义
- 03优先采用明确的元素组合
- 04先用原生伪类处理状态
- 05审查 DOM 中的语义元素
适用场景
- 01为按钮和链接选择合适的 HTML 元素
- 02构建原生折叠区或临时浮层
- 03检查键盘操作与禁用状态
- 04核对表单提交及屏幕阅读器语义
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/semantic-html-first确认已加载。
详细介绍
语义化 HTML 优先
语义化 HTML 是界面的基础设施。原生元素自带键盘支持、表单参与能力、禁用行为和无障碍语义，无需另行实现。
默认原则
- 从与交互匹配的原生元素开始。
- 使用 ARIA 来完善原生语义，而不是在
div/span上重新构建语义。 - 当
asChild多态性会掩盖实际元素时，优先使用明确的组合方式。 - 优先使用原生伪类（
:disabled、:checked、:open、:invalid）来设置状态样式，而不是另行维护平行的data-*状态系统。 - 如果存在库的基础组件，请确认它在 DOM 中仍会渲染为真正的语义化元素。
优先选择 / 避免选择
| 优先选择 | 避免选择 |
|---|---|
<button type="button"> | 没有必要时使用 <div onClick> / <span role="button"> |
使用 <a href> 进行导航 | 仅通过 JS 路由、样式仿成按钮的 div |
<details> / <summary> | 使用临时键盘代码实现的自定义展开控件 |
<dialog> / Popover API | 与焦点和顶层行为冲突的模态 div |
原生 <form> 控件 | 忽略 Enter/Space/禁用状态的可点击行 |
决策指南
- 执行操作：
button - 跳转到某处：
a[href] - 切换相关内容的显示状态：
details，或披露按钮 + 受控区域 - 需要临时覆盖层任务：
dialog或popover - 收集输入：
form内的原生表单控件
审核清单
- 能否使用原生元素？
- 无需额外代码即可通过 Tab 移动焦点？
- Enter/Space 能否激活按钮？
- 禁用状态能否正确阻止交互并影响元素的可访问性？
- 屏幕阅读器识别的角色是否与视觉控件一致？
- 表单控件能否随表单一起提交/重置？
- 自定义 ARIA 是否是补充，而非重写平台语义？
原文文章
- 关于语义化 Web
- 我为什么构建了一个语义化 HTML 优先的库
评论
支持 Markdown