用途：帮助开发者用现代前端框架构建可复用、易维护的 UI 组件，覆盖组件库与设计系统设计、复杂组合模式、CSS-in-JS 选型、无障碍与响应式组件、统一组件 API、旧组件重构、复合组件与 render props 等场景。
主要能力：
- 组件组合模式：复合组件（如 Select 及其子组件）、render props（将渲染交给父级）、Vue/Svelte 具名插槽。
- CSS-in-JS 方案对照：Tailwind CSS 适合快速原型与设计系统；CSS Modules 适合已有 CSS 渐进采用；styled-components 适合 React 动态样式；Emotion 灵活且利于 SSR；Vanilla Extract 零运行时，适合性能敏感应用。
- 组件 API 设计：语义化属性名（isLoading 而非 loading）、提供合理默认值、通过 children 支持组合、允许 className/style 覆盖样式。
- 框架模式：React 复合组件用 Context 共享状态；Vue 3 用 provide/inject 实现，如 Tabs；Svelte 5 用 Runes（$props、$derived）与 Snippet。
- 快速上手示例：用 class-variance-authority 的 cva 定义 variant 与 size，配合 forwardRef 与 cn 封装 React 按钮组件。
实践建议：单一职责、用 context 避免属性逐层传递、默认支持无障碍（ARIA、键盘）、同时支持受控与非受控、转发 ref、对昂贵渲染做 memo、为易错组件加错误边界。
常见问题：属性过多宜改用组合、样式冲突用 scoped 或 CSS Modules、避免重渲染级联、注意无障碍缺口与包体积（tree-shaking 未用变体）。
限制：该技能文档仅提供示例代码与设计指导，未说明安装方式、依赖版本、收费或价格、支持平台与运行环境，这些信息暂未提供。