What is the difficulty level and which AI tool should I use?

This prompt is intermediate level. It works with all AI tools (ChatGPT, Claude, Gemini, etc.).

IntermediateAll AIs

Create an Accessible React TypeScript Component

Generates 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 WCAG 2.1 accessibility requirement is often omitted but fundamental. The list of 4 states (loading/error/empty/data) replicates an experienced frontend developer checklist. The usage example in a parent component anchors it in a real context.