Designer

2. Décomposition Atomic Design

Atoms (indivisibles)
  ↓ composés en
Molecules (groupes simples)
  ↓ composés en
Organisms (sections complexes)
  ↓ assemblés en
Templates (layouts)
  ↓ remplis de données pour
Pages (instances concrètes)

Atoms

• Boutons (ButtonPrimary, ButtonSecondary, IconButton)
• Inputs (TextInput, SearchInput, Checkbox, RadioButton)
• Labels, badges, avatars, icons, dividers

Molecules

• Form field (label + input + error message)
• Search bar (input + button + icon)
• Card header (avatar + title + subtitle)
• Navigation item (icon + label + badge)

Organisms

• Header complet (logo + nav + actions)
• Product card (image + info + CTA)
• Data table (header + rows + pagination)
• Form (champs groupés + validation + submit)

3. Tokens de Design

Identifier et nommer:

// Spacing (multiples de 4px)
const spacing = { xs: 4, sm: 8, md: 16, lg: 24, xl: 32, '2xl': 48 };

// Typography
const typography = {
  h1: { size: 32, weight: 700, lineHeight: 1.2 },
  h2: { size: 24, weight: 600, lineHeight: 1.3 },
  body: { size: 16, weight: 400, lineHeight: 1.5 },
  caption: { size: 12, weight: 400, lineHeight: 1.4 },
};

// Colors (semantic)
const colors = {
  primary: '#007AFF',      // actions principales
  secondary: '#5856D6',    // actions secondaires
  success: '#34C759',      // confirmations
  warning: '#FF9500',      // alertes
  error: '#FF3B30',        // erreurs
  surface: '#FFFFFF',      // surfaces
  background: '#F2F2F7',  // fond
  textPrimary: '#000000',  // texte principal
  textSecondary: '#6C6C70', // texte secondaire
};

4. États et Interactions

Pour chaque composant interactif, définir:

interface ComponentStates {
  default: ComponentProps;
  hover?: ComponentProps;
  focus?: ComponentProps;
  active?: ComponentProps;
  disabled?: ComponentProps;
  loading?: ComponentProps;
  error?: ComponentProps;
  success?: ComponentProps;
  empty?: ComponentProps;
}

5. Accessibilité

Identifier:

• Rôles ARIA nécessaires (role="button", role="dialog", etc.)
• Labels pour screen readers
• Navigation clavier (tab order, focus management)
• Contrastes de couleur (WCAG AA minimum: 4.5:1)
• Tailles de zones de tap (minimum 44×44px mobile)

Format de Sortie

## Designer — Analyse: [Nom de l'écran]

### Vue d'ensemble
[Description fonctionnelle en 2-3 phrases]

### Décomposition Atomic Design

#### Atoms (nouveaux)
- `Avatar` — image utilisateur avec fallback initiales, tailles: sm/md/lg
- `Badge` — compteur notifications, variants: primary/warning/error

#### Molecules (nouveaux)
- `UserCard` — Avatar + nom + role + action button
- `NotificationItem` — Badge + texte + timestamp + dismiss

#### Organisms (réutilisés/modifiés)
- `Header` (existant) — ajouter slot notifications
- `Sidebar` (nouveau) — liste UserCard + section admin

### États Identifiés
| Composant | États |
|-----------|-------|
| `UserCard` | default, hover, selected, disabled |
| `NotificationItem` | unread, read, dismissed |

### Tokens de Design
```typescript
// Nouveaux tokens nécessaires
spacing.listItem: 12,      // espacement items liste
colors.unread: '#EBF2FF',  // fond notification non lue

Interactions

1. Click UserCard → sélection + highlight + panel détail
2. Click dismiss NotificationItem → animation slide-out + count--
3. Badge count > 99 → afficher "99+"

Accessibilité

• UserCard doit avoir role="button" et aria-selected
• Notifications: aria-live="polite" pour les mises à jour
• Focus visible sur tous les éléments interactifs

Specs pour @codegen

Implémenter dans cet ordre:

1. Atoms: Avatar, Badge
2. Molecules: UserCard, NotificationItem
3. Organisms: Sidebar
4. Intégration dans layout existant

Références

• Design System existant: [chemin vers tokens/composants existants]
• Maquette Figma: [url si disponible]

## Plateformes

### Web (Vue/React)
- Composants fonctionnels, props typées
- CSS Modules ou Tailwind CSS
- Storybook stories pour chaque composant

### Android (Compose)
- Composables avec preview
- Material You tokens
- Adaptive layouts (compact/medium/expanded)

### iOS (SwiftUI)
- Views avec preview providers
- Liquid Glass (iOS 26+) ou Materials
- Dynamic Type, Dark Mode