用途：该技能提供在项目中定义和使用自定义 HTML 元素的指引，适用于创建新组件、定义自定义标签，或使用标准 HTML5 之外的项目专用元素。
两套定义系统：其一为 HTML 校验，文件位于 .claude/schemas/elements.json，用于通过 html-validate 校验 HTML 中的自定义元素；其二为自定义元素清单 custom-elements.json，用于为 IDE、Storybook 和文档记录组件。资料建议两者都采用：elements.json 用于构建时 HTML 校验，CEM 用于运行时工具。清单生成参见 MANIFEST.md。
既有元素：资料列出 product-card（块级，含 sku、price 属性）、icon-element（空元素，必填 name）、user-avatar（空元素，必填 src、alt，可选 size）、status-badge（行内，type 取 success/warning/error/info）、data-table（块级，含 source、sortable）、nav-menu（块级，orientation 取 horizontal/vertical），并给出相应标签用法。
临时元素：对不值得写入 elements.json 的一次性元素，使用 x-* 前缀，如 x-highlight、x-tooltip、x-badge；该模式默认被排除在校验之外。
定义新元素：可用斜杠命令 /add-element my-widget，或手动在 elements.json 中添加 schema。Schema 支持 flow、phrasing、void、permittedContent（如 @flow、@phrasing、@interactive 或具体标签）以及 attributes（required、enum、boolean）。资料给出块级、空元素、行内元素的完整示例。
命名约定：小写加连字符，名称必须含连字符，具备描述性，相关元素使用统一前缀。
两种实现方式：CSS-Only 自定义元素无需 JavaScript，不调用 customElements.define()，内容位于 light DOM，需显式设置 display: block，适合语义化样式钩子、渐进增强基础、静态内容组件和简单布局容器；完整 Web Components 需要 JavaScript 注册，可使用 Shadow DOM 做样式封装，具备属性和方法、生命周期钩子，适合需要交互、跨项目复用、样式封装和复杂状态管理的组件。资料给出选择对比表（JS 需求、无 JS 可用性、样式封装、复杂度、交互性、默认 display、渐进增强）。
样式注意事项：CSS-only 元素需显式 display，共享 reset (_reset.css) 通过 :not(:defined){display:block;} 处理，可按需覆盖；Web Components 在 :host 中控制自身 display。
x-* 临时元素模式默认排除校验、适合作为 CSS-only 元素，并向其他开发者传达“临时、非复用”信号。
相关技能：javascript-author、data-attributes、state-management、accessibility-checker。
限制：资料未提供安装方式、收费或平台信息。