用途
该技能面向构建无障碍、无样式（headless）UI 组件的场景，适用于创建组件库、设计系统或可复用 UI 原语。其模式参考 Base UI、Radix 和 Ark UI，并强调框架无关——核心概念可跨 React、Vue、Svelte、Solid 和原生 JS 应用。
主要能力
技能围绕若干组件架构模式展开：
- 复合组件（Compound Components）：组件作为通过 context 共享状态的相关部分，每个部分与 DOM 元素一一对应，可自由重排或省略，便于声明式组装与独立样式定位。
- 受控与非受控状态：同时支持外部状态控制与内部状态，采用一致的 prop 命名约定（如 open/defaultOpen/onOpenChange、value/defaultValue/onValueChange、checked/defaultChecked/onCheckedChange），变更详情包含 reason、event、cancel()。
- Prop Getters：返回 DOM 元素 HTML 属性的函数，将逻辑与渲染解耦，可跨框架移植，并通过 mergeProps() 组合。
- 通过 data 属性暴露状态：使用 data-open/data-closed、data-checked/data-unchecked、data-highlighted、data-disabled、data-valid、data-invalid、data-side、data-align 等属性，实现框架无关的样式控制，无需 JS 即可基于状态设置样式，并可在 DevTools 中检查。
- 无障碍：将 ARIA、键盘导航、焦点管理内建于架构，包括自动管理的 ARIA 属性、焦点陷阱、roving tabindex、虚拟焦点（aria-activedescendant）、typeahead 等。
- 浮动定位：相对触发器定位弹层，自动处理视口边界、滚动与缩放，配置项包括 side、align、sideOffset、collision（flip/shift）、trackAnchor。
此外还涉及 API 约定（交互、集合、弹层、定位类 props，以及 actionsRef 暴露 open()、close()、toggle() 等命令式操作）。
使用方式
技能提供多个参考文件，按需加载：html.md（HTML 控制器、mixins、context）、videojs-element.md（ReactiveElement 生命周期、属性、控制器）、react.md（React hooks、context、refs）、props.md（prop 命名、约定、默认值）、styling.md（data 属性、CSS 变量）、animation.md（CSS 过渡、JS 动画库）、polymorphism.md（render 与 asChild 模式）、collection.md（集合、portal、虚拟化）、anti-patterns.md（常见组件错误）、videojs.md（Video.js 组件架构）。无障碍模式可加载 aria 技能；结构化组件审查可加载 review 工作流（workflow.md、checklist.md、templates.md）。实现来源包括 Base UI Source、Radix Primitives、Zag.js、Floating UI。相关技能包括 aria、api、docs、api-reference。
适用场景
适合需要构建可复用、无障碍、可跨框架移植的 UI 组件库或设计系统的开发者，尤其是关注行为与样式分离、状态管理约定、键盘与焦点可访问性、弹层定位等问题的场景。
限制
资料未提供该技能的具体安装命令、收费方式、价格、平台支持范围或实际效果验证信息，这些内容暂未提供。