用途：该技能用于构建可复用、易维护的 UI 组件，统一组件 API 与样式方案，适用于设计系统、组件库、复杂组合模式、无障碍响应式组件以及旧组件重构。
主要能力：
- 组件组合模式：Compound Components、Render Props，以及 Vue/Svelte 的具名插槽。
- CSS-in-JS 方案对比：Tailwind CSS（工具类）、CSS Modules（作用域样式）、styled-components（模板字面量）、Emotion（对象/模板、SSR 友好）、Vanilla Extract（零运行时）。
- 组件 API 设计：语义化属性名（如 isLoading）、合理默认值、children 组合、className/style 覆盖。
- 框架模式：React 用 createContext/useContext 实现 Compound Components；Vue 3 用 provide/inject 与 composables；Svelte 5 使用 $props/$derived 与 snippet。
使用方式：按框架选择对应模式，React 示例用 cva 定义变体并结合 Tailwind 与 forwardRef 转发 ref；Vue 用 InjectionKey 向子组件提供上下文；Svelte 用 runes 声明 props 与派生 class。
最佳实践：单一职责、用 context 避免 prop drilling、默认无障碍（ARIA 与键盘支持）、受控与非受控并存、forwardRef、必要时用 React.memo/useMemo、错误边界。
限制与注意：资料未提供具体安装命令、版本要求、收费或价格信息；常见问题包括属性膨胀、样式冲突、重渲染级联、无障碍缺口与包体积，需要按项目情况评估。文中给出的代码示例仅为演示模式，不应直接视为完整可运行实现。