Component Design Skill

Component Design Skill

Purpose

Create consistent, reusable UI components.

Atomic Design

Reference: patterns/​atomic-design.md

Hierarchy

1. Atoms: Basic elements (Button, Input, Label)
2. Molecules: Simple groups (FormField, SearchBox)
3. Organisms: Complex sections (Header, Form, Card)
4. Templates: Page layouts
5. Pages: Specific instances

Component Patterns

Reference: patterns/​composition.md

Compound Components

<Select>
  <Select.Trigger />
  <Select.Content>
    <Select.Item value="1">Option 1</​Select.Item>
  </​Select.Content>
</​Select>

Render Props

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

Custom Hooks

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

Props Interface

interface ButtonProps {
  /​** Visual variant of the button */
  variant?: 'primary' | 'secondary' | 'ghost';
  /​** Size of the button */
  size?: 'sm' | 'md' | 'lg';
  /​** Whether button is disabled */
  disabled?: boolean;
  /​** Click handler */
  onClick?: () => void;
  /​** Button content */
  children: React.ReactNode;
}

Component Template

Use: templates/​component-template.tsx

State Management

Reference: patterns/​state-management.md

Decision Tree

1. UI-only state → useState
2. Complex local state → useReducer
3. Shared between siblings → Lift to parent
4. Shared across app → Context or global store
5. Server state → React Query/​SWR