用途：该技能用于 Web 应用的现代 UI 组件模式，覆盖组件选择、组合、主题化与令牌系统，遵循 21st.dev SDK、Tailwind、Radix UI 等当前标准。适用场景包括设计或选择 UI 组件、构建设计令牌系统、实现主题（深色/浅色/自定义）、规划复合组件或变体系统、设计表单架构、定义响应式组件策略。
主要原则：组合优于继承，用小组件拼装，props 配置、children 内容、slots 变化；服务端优先，仅在需要交互（状态、事件处理、浏览器 API）时使用客户端组件；基于令牌的主题化，用 CSS 自定义属性控制所有视觉，不硬编码颜色、间距、字号；无障碍作为架构一部分，ARIA 角色、键盘导航与焦点管理属于组件定义；可组合基础原语（Button、Input、Text、Box）无样式且灵活。
规则要点：每个组件单文件、单一职责，显式 TypeScript props 接口，Zod 校验输入；复杂 UI 用复合组件（如 Card.Header/Body/Footer）；变体用 class-variance-authority（cva）；组件 props 不超过 10 个；不用运行时 CSS-in-JS，用 Tailwind 或 CSS Modules；避免 div 堆砌，使用语义 HTML。令牌分三层：全局（原始值）、语义（用途绑定）、组件（具体）。主题切换通过 html/body 上的 data 属性或 class 配合 CSS 自定义属性，至少支持深/浅色。表单采用 Zod schema 驱动，React Hook Form 等非受控方案，字段结构统一为 Label > Input > Helper Text > Error Message，避免无键盘支持的自定义 select。响应式使用容器查询，移动端变体作为独立状态，触控目标至少 44x44px，避免仅依赖悬停的交互。
模式包括三栏布局、渐进披露卡片、表单-智能体混合、实时状态仪表盘、技能配置面板。反模式包括上帝组件、主题 prop 逐层传递、全客户端组件、内联布局样式、滥用模态框、状态失控、硬编码断点、缺少错误边界。
限制：资料未提供具体安装命令、收费方式、平台支持范围或效果数据，暂未提供。