用途：该技能讲解以 data-* 属性替代 class 处理动态关注点，作为 HTML/CSS/JS 之间的桥接机制。语义元素与自定义元素负责结构，data-* 负责状态、变体与配置。
主要能力：状态属性（如 data-expanded、data-state="loading"、data-valid、data-open）；变体属性（如 data-type、data-topic、data-size）；配置属性（如 data-columns、data-gap、data-autoplay、data-orientation）。CSS 可用属性存在、精确值、部分匹配等选择器响应；JavaScript 通过 dataset API 读写，而非 classList。
使用方式：HTML 声明意图，CSS 依据属性值定义样式，JS 仅在需要时修改 data 属性。示例：nav.dataset.expanded = 'true'；button.dataset.state = 'loading'；事件委托用 event.target.closest('[data-action]')。可在 elements.json 中为自定义元素定义允许的 data 属性及枚举值。
适用场景：可展开导航、主题变体、加载按钮、标签样式、网格列数配置等 HTML 优先的组件开发。
限制：资料未提供具体安装命令、收费、平台或效果数据；命名约定与校验方式需按项目自行统一。