IntermediateAll AIs
Create an accessible React TypeScript component
Generate a complete React TypeScript component with strict types, WCAG accessibility, state management, RTL tests and Storybook stories.
Paste in your AI
Paste this prompt in ChatGPT, Claude or Gemini and customize the variables in brackets.
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
Why this prompt works
The explicit request for WCAG 2.1 accessibility is often omitted but fundamental. The list of 4 states (loading/error/empty/data) reproduces the checklist of an experienced frontend developer. The usage example in a parent anchors the component in a real context.
Use Cases
Build a shared component libraryStandardize complex components within a teamPrepare components compliant with accessibility audits
Expected Output
Complete React TypeScript component with Props interface, ARIA attributes, state management, RTL tests, Storybook stories and usage example.
Learn more
Check the full skill on Prompt Guide to master this technique from A to Z.
View on Prompt Guide