用途：该技能用于在创建组件库、实现设计系统、构建复杂 UI（如 Button、Modal、Dropdown）或重构重复代码时，提供可复用的 UI 组件设计模式指导。
主要能力：
- Props API 设计：清晰命名、合理默认值、TypeScript 类型定义，可选 Props 用 ? 标记。
- 组合模式：通过 Card.Header、Card.Body、Card.Footer 等复合组件组合复杂 UI。
- Render Props / Children as Function：实现灵活定制，如 Dropdown 的 renderItem。
- 自定义 Hook 分离逻辑：如 useModal 将 UI 与业务逻辑分离。
- 性能优化：使用 React.memo、useMemo、useCallback 避免不必要重渲染。
使用方式：按步骤设计 Props、采用组合或渲染属性模式、用自定义 Hook 抽离逻辑、做性能优化。输出建议采用组件目录结构（组件、测试、Storybook、样式、导出），并提供组件模板（含 forwardRef 与 displayName）。
约束：必须遵循单一职责、Props 类型定义、无障碍（aria-*、role、tabindex）；禁止超过 5 层的 props drilling、在 UI 组件中写业务逻辑（API 调用、复杂计算）、内联对象或函数。
适用场景：React + TypeScript 前端项目、组件库、设计系统、复杂交互组件开发。
限制：资料未提供具体安装命令、收费信息、平台支持细节或效果数据；示例基于 React，其他框架适用性暂未提供。