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é
Résultat attendu
Composant React TypeScript complet avec interface Props, attributs ARIA, gestion des états, tests RTL, stories Storybook et exemple d'utilisation.
Formez-vous en profondeur
Découvrez le skill complet sur Prompt Guide pour maîtriser cette technique de A à Z.
Voir sur Prompt Guide