组件设计Skill component-design

---

name: component-design description: 遵循原子设计和组合模式设计React/Vue组件。在创建UI组件时使用。

组件设计技能

目的

创建一致、可重用的UI组件。

原子设计

参考: patterns/atomic-design.md

层级

1. 原子: 基本元素（按钮、输入框、标签）
2. 分子: 简单组合（表单字段、搜索框）
3. 生物体: 复杂部分（头部、表单、卡片）
4. 模板: 页面布局
5. 页面: 特定实例

组件模式

参考: patterns/composition.md

复合组件

<Select>
  <Select.Trigger />
  <Select.Content>
    <Select.Item value="1">选项 1</Select.Item>
  </Select.Content>
</Select>

渲染属性

<DataFetcher url="/api/users">
  {({ data, loading }) => (
    loading ? <Spinner /> : <UserList users={data} />
  )}
</DataFetcher>

自定义钩子

function useUser(id: string) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  // ...
  return { user, loading, error };
}

属性接口

interface ButtonProps {
  /** 按钮的视觉变体 */
  variant?: 'primary' | 'secondary' | 'ghost';
  /** 按钮的大小 */
  size?: 'sm' | 'md' | 'lg';
  /** 按钮是否禁用 */
  disabled?: boolean;
  /** 点击处理程序 */
  onClick?: () => void;
  /** 按钮内容 */
  children: React.ReactNode;
}

组件模板

使用: templates/component-template.tsx

状态管理

参考: patterns/state-management.md

决策树

1. 仅UI状态 → useState
2. 复杂本地状态 → useReducer
3. 兄弟间共享 → 提升到父级
4. 应用间共享 → 上下文或全局存储
5. 服务器状态 → React Query/SWR