/design-handoff

Si tu vois des placeholders non familiers ou que tu dois vérifier quels outils sont connectés, consulte CONNECTORS.md.

Génère une documentation complète de handoff pour développeurs à partir d'une conception.

Utilisation

/design-handoff $ARGUMENTS

Génère les specs de handoff pour : @$1

Si une URL Figma est fournie, récupère la conception depuis Figma. Sinon, travaille à partir de la description ou de la capture d'écran fournie.

Ce qu'il faut inclure

Spécifications visuelles

• Mesures exactes (padding, marges, largeurs)
• Références de tokens de design (couleurs, typographie, espacements)
• Breakpoints responsifs et comportement
• Variantes et états des composants

Spécifications d'interaction

• Comportement au clic/tap
• États au survol
• Transitions et animations (durée, easing)
• Support des gestes (swipe, pinch, long-press)

Spécifications de contenu

• Limites de caractères
• Comportement de troncature
• États vides
• États de chargement
• États d'erreur

Cas limites

• Contenu minimal/maximal
• Texte international (chaînes plus longues)
• Connexions lentes
• Données manquantes

Accessibilité

• Ordre de focus
• Labels et rôles ARIA
• Interactions au clavier
• Annonces pour lecteur d'écran

Principes

1. Ne fais pas d'hypothèses — Si ce n'est pas spécifié, le développeur devinera. Spécifie tout.
2. Utilise des tokens, pas des valeurs — Référence spacing-md plutôt que 16px.
3. Montre tous les états — Défaut, survol, actif, désactivé, chargement, erreur, vide.
4. Décris le pourquoi — « Cela se replie sur mobile car les utilisateurs se servent surtout d'une main » aide les développeurs à prendre de bonnes décisions.

Sortie

## Handoff Spec : [Nom de la fonctionnalité/écran]

### Vue d'ensemble
[Ce que fait cet écran/cette fonctionnalité, contexte utilisateur]

### Layout
[Système de grille, breakpoints, comportement responsive]

### Design Tokens utilisés
| Token | Valeur | Utilisation |
|-------|--------|-------------|
| `color-primary` | #[hex] | Boutons CTA, liens |
| `spacing-md` | [X]px | Entre les sections |
| `font-heading-lg` | [taille/poids/famille] | Titre de page |

### Composants
| Composant | Variante | Props | Notes |
|-----------|----------|-------|-------|
| [Composant] | [Variante] | [Props] | [Comportement spécial] |

### États et interactions
| Élément | État | Comportement |
|---------|------|-------------|
| [Bouton CTA] | Survol | [Fond plus foncé de 10%] |
| [Bouton CTA] | Chargement | [Spinner, désactivé] |
| [Formulaire] | Erreur | [Bordure rouge, message d'erreur dessous] |

### Comportement responsive
| Breakpoint | Changements |
|------------|------------|
| Desktop (>1024px) | [Layout par défaut] |
| Tablet (768-1024px) | [Ce qui change] |
| Mobile (<768px) | [Ce qui change] |

### Cas limites
- **État vide** : [Ce qu'afficher quand aucune donnée]
- **Texte long** : [Règles de troncature]
- **Chargement** : [Skeleton ou spinner]
- **Erreur** : [Apparence de l'état d'erreur]

### Animation / Motion
| Élément | Déclencheur | Animation | Durée | Easing |
|---------|------------|-----------|-------|--------|
| [Élément] | [Déclencheur] | [Description] | [ms] | [easing] |

### Notes d'accessibilité
- [Ordre de focus]
- [Labels ARIA nécessaires]
- [Interactions au clavier]

Si des connecteurs sont disponibles

Si ~~outil de design est connecté :

• Récupère les mesures exactes, tokens et specs de composants depuis Figma
• Exporte les assets et génère une spec sheet complète

Si ~~project tracker est connecté :

• Relie le handoff au ticket d'implémentation
• Crée des sous-tâches pour chaque section de la spec

Conseils

1. Partage le lien Figma — Je peux récupérer les mesures exactes, tokens et infos de composants.
2. Mentionne les cas limites — « Que se passe-t-il avec 100 éléments ? » m'aide à spécifier les conditions limites.
3. Spécifie la stack technologique — « On utilise React + Tailwind » m'aide à donner des notes d'implémentation pertinentes.