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