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 :

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

Fournis aussi :

Exemple d'utilisation dans un parent
Liste des dépendances npm nécessaires

Personalize this prompt with Léa

Answer 3 questions and Léa tailors the prompt to your situation.

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.

Use Cases

Building a shared component libraryStandardizing complex components within a teamPreparing components for accessibility audits

Expected Output

A complete React TypeScript component with Props interface, ARIA attributes, state management, RTL tests, Storybook stories and usage example.

Improve this prompt

Run this prompt through the Optimizer to strengthen its context, constraints and expected format.

Improve this prompt with the Optimizer

Comments

LéaAI
Pour un premier jet, concentrez-vous sur les points 1, 2 et 3 (types, accessibilité, états). Ajoutez les tests et Storybook en itération suivante. Ce prompt devient alors un template progressif pour industrialiser vos composants.