component-architecture

# Component Architecture Skill

Patterns for designing maintainable, reusable component architectures in React and modern frameworks.

## Component Design Principles

### Single Responsibility
Each component should do one thing well.

```typescript
// Bad: Component does too much
function UserDashboard() {
  // Fetches data, handles auth, renders UI, manages state...
}

// Good: Separate concerns
function UserDashboard() {
  return (
    <DashboardLayout>
      <UserHeader />
      <UserStats />
      <RecentActivity />
    </DashboardLayout>
  );
}
```

### Composition Over Inheritance
Build complex UIs by composing simple components.

```typescript
// Compound component pattern
<Card>
  <Card.Header>
    <Card.Title>Settings</Card.Title>
  </Card.Header>
  <Card.Body>
    <SettingsForm />
  </Card.Body>
  <Card.Footer>
    <Button>Save</Button>
  </Card.Footer>
</Card>
```

### Props Interface Design

```typescript
interface ButtonProps {
  // Required props first
  children: React.ReactNode;

  // Optional with sensible defaults
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';

  // Boolean props (default false)
  isLoading?: boolean;
  isDisabled?: boolean;

  // Event handlers
  onClick?: (event: React.MouseEvent) => void;

  // Spread native props
  ...rest: React.ButtonHTMLAttributes<HTMLButtonElement>;
}
```

## Component Patterns

### Container/Presenter Pattern

**Container** (logic):
```typescript
function UserListContainer() {
  const { data, isLoading } = useUsers();
  const handleDelete = useDeleteUser();

  return (
    <UserList
      users={data}
      isLoading={isLoading}
      onDelete={handleDelete}
    />
  );
}
```

**Presenter** (UI):
```typescript
function UserList({ users, isLoading, onDelete }) {
  if (isLoading) return <Skeleton />;

  return (
    <ul>
      {users.map(user => (
        <UserItem key={user.id} user={user} onDelete={onDelete} />
      ))}
    </ul>
  );
}
```

### Compound Components

```typescr