以 skill 自身的术语
运用现代组合模式、CSS-in-JS 方案以及组件 API 设计原则，跨 React、Vue 和 Svelte 构建可复用 UI 组件。涵盖复合组件、render props、slots，以及 React context、Vue composables、Svelte runes 等特定框架模式。适用于组件库、设计系统以及旧组件的重构。
强调默认即可访问的组件，具备语义化的 props、单一职责、ref 转发，以及受控与非受控模式的区分。包含使用 class-variance-authority、Tailwind CSS 及作用域样式方案实现按钮、手风琴、下拉选择和标签页等组件的具体示例。
它产出什么
- 使用 class-variance-authority 和 Tailwind CSS 实现按钮、手风琴、下拉选择、标签页和卡片等设计系统组件。
工作方式
- 01选择一种 CSS-in-JS 方案
可从 Tailwind CSS（用于快速原型设计）、CSS Modules（用于作用域样式）、styled-components（用于 React 动态样式）、Emotion（利于 SSR 的灵活方案），或 Vanilla Extract（零运行时性能）中选择。
- 02设计组件 API
使用语义化的 prop 命名，例如用 isLoading 而非 loading，提供合理的默认值，通过 children 支持组合方式，并允许通过 className 或 style 属性覆盖样式。
- 03实现特定框架的模式
对于复合组件使用 React context，对于 Vue 3 使用带有 provide 和 inject 的 composables，或对于 Svelte 5 使用带有 $props 和 $derived 的 runes 来管理响应式状态。