Composant React avec Claude Code
Ce prompt guide Claude Code pour générer des composants React TypeScript qui suivent les bonnes pratiques modernes.
Le prompt
Crée un composant React TypeScript pour [DESCRIPTION DU COMPOSANT].
Contraintes techniques:
- TypeScript strict, pas de "any"
- Props typées avec une interface exportée
- Tailwind CSS v4 pour le styling (classes utilitaires uniquement)
- Composant serveur par défaut, "use client" seulement si état ou événements nécessaires
- Accessibilité: rôles ARIA, navigation clavier, contraste suffisant
- Nommage: PascalCase pour le composant, camelCase pour les props
Structure du fichier:
1. Imports
2. Interface Props (exportée)
3. Composant (export default)
4. Pas de styles inline, pas de CSS modules
Gestion des variantes:
- Utilise des props discriminées plutôt que des booléens multiples
- Exemple: variant: "primary" | "secondary" au lieu de isPrimary, isSecondary
Si le composant a des états interactifs:
- Sépare la logique dans un hook custom (use[NomComposant])
- Le hook retourne un objet typé
Fournis aussi:
- Un exemple d'utilisation dans un fichier parent
- Les cas limites à tester (props vides, texte long, responsive)
Utilisation
Collez ce prompt dans Claude Code avec une description précise du composant souhaité. Plus votre description est détaillée (props attendues, comportement, design), plus le résultat sera exploitable directement. Ajustez les contraintes selon votre stack (Tailwind v3, CSS modules, etc.).