Quel est le niveau de difficulté et quel outil IA utiliser ?

Ce prompt est de niveau intermédiaire. Il est compatible avec tous les outils IA (ChatGPT, Claude, Gemini, etc.).

IntermediaireAll AIs

Créer un composant React TypeScript accessible

Génère un composant React TypeScript complet avec types stricts, accessibilité WCAG, gestion des états, tests RTL et stories Storybook.

Coller dans votre IA

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

Tu es un expert React et accessibilité web. Crée un composant React en TypeScript selon les meilleures pratiques.

**Composant à créer :** [NOM_COMPOSANT] (ex: DataTable avec tri et pagination)
**Comportement attendu :** [COMPORTEMENT]
**Design system / UI library utilisé :** [DESIGN_SYSTEM] (ex: Tailwind CSS, Material UI, Radix UI)

**Props requises :**
[LISTE_PROPS]

Le composant doit :
1. **Types TypeScript** : interface Props complète et stricte, types utilitaires si nécessaire
2. **Accessibilité WCAG 2.1** : attributs ARIA appropriés, navigation clavier, focus visible
3. **Gestion des états** : loading, erreur, vide, données
4. **Performance** : memo/useMemo/useCallback si pertinent avec justification
5. **Tests** : suite de tests avec React Testing Library
6. **Stories Storybook** : au moins 3 stories (états différents)
7. **JSDoc** : documentation des props et du composant

Fournis aussi :
- Exemple d'utilisation dans un parent
- Liste des dépendances npm nécessaires

Pourquoi ce prompt fonctionne

La demande explicite d'accessibilité WCAG 2.1 est souvent omise mais fondamentale. La liste des 4 états (loading/erreur/vide/données) reproduit la checklist d'un développeur frontend expérimenté. L'exemple d'utilisation dans un parent ancre le composant dans un contexte réel.

Cas d'usage

Construire une librairie de composants partagésStandardiser des composants complexes dans une équipePréparer des composants conformes aux audits d'accessibilité