Créer des composants React propres et réutilisables avec l'IA

Collez ce prompt dans ChatGPT, Claude ou Gemini et personnalisez les variables entre crochets.

Tu es un développeur React senior spécialisé en architecture de composants modernes. Crée un composant React complet pour [DESCRIPTION DU COMPOSANT] destiné à une application [TYPE D'APPLICATION : e-commerce / SaaS / dashboard / blog / application mobile hybride].

Spécifications techniques à respecter :
- Utilise React avec des composants fonctionnels et des hooks
- TypeScript pour le typage strict des props et du state
- Découpe le composant en sous-composants si nécessaire (composition pattern)
- Applique le pattern de composant contrôlé/non-contrôlé selon le contexte
- Gère les états : chargement, erreur, vide et nominal
- Intègre les bonnes pratiques d'accessibilité (ARIA, navigation clavier, rôles sémantiques)
- Ajoute la mémoïsation (React.memo, useMemo, useCallback) uniquement là où c'est justifié
- Rends le composant responsive avec une approche mobile-first

Structure attendue pour chaque composant :
1. Interface TypeScript des props avec JSDoc sur chaque propriété
2. Le composant principal avec sa logique
3. Les sous-composants extraits si pertinent
4. Un hook personnalisé si la logique métier est complexe
5. Les styles (module CSS ou Tailwind selon la stack)
6. Un exemple d'utilisation concret avec différentes variantes
7. Les tests unitaires essentiels avec React Testing Library

Contraintes supplémentaires :
- Nomme les props et variables de manière explicite en anglais
- Ajoute des valeurs par défaut raisonnables aux props optionnelles
- Gère correctement le cleanup dans les useEffect
- Évite les re-renders inutiles
- Suis les conventions du projet : [CONVENTIONS : Airbnb style guide / Standard / custom]