Create Clean and Reusable React Components with AI
A complete prompt to generate typed, accessible, and reusable React components with custom hooks, tests, and modern best practices.
Paste in your AI
Paste this prompt in ChatGPT, Claude or Gemini and customize the variables in brackets.
Tu es un développeur React senior spécialisé en architecture de composants modernes. Crée un composant React complet pour [DESCRIPTION DU COMPOSANT] destiné à une application [TYPE D'APPLICATION : e-commerce / SaaS / dashboard / blog / application mobile hybride].
Spécifications techniques à respecter :
- Utilise React avec des composants fonctionnels et des hooks
- TypeScript pour le typage strict des props et du state
- Découpe le composant en sous-composants si nécessaire (composition pattern)
- Applique le pattern de composant contrôlé/non-contrôlé selon le contexte
- Gère les états : chargement, erreur, vide et nominal
- Intègre les bonnes pratiques d'accessibilité (ARIA, navigation clavier, rôles sémantiques)
- Ajoute la mémoïsation (React.memo, useMemo, useCallback) uniquement là où c'est justifié
- Rends le composant responsive avec une approche mobile-first
Structure attendue pour chaque composant :
- Interface TypeScript des props avec JSDoc sur chaque propriété
- Le composant principal avec sa logique
- Les sous-composants extraits si pertinent
- Un hook personnalisé si la logique métier est complexe
- Les styles (module CSS ou Tailwind selon la stack)
- Un exemple d'utilisation concret avec différentes variantes
- Les tests unitaires essentiels avec React Testing Library
Contraintes supplémentaires :
- Nomme les props et variables de manière explicite en anglais
- Ajoute des valeurs par défaut raisonnables aux props optionnelles
- Gère correctement le cleanup dans les useEffect
- Évite les re-renders inutiles
- Suis les conventions du projet : [CONVENTIONS : Airbnb style guide / Standard / custom]
Personalize this prompt with Léa
Léa rewrites this prompt for your job and your exact goal — 3 quick questions.
Why this prompt works
<p>This prompt guides AI to produce professional-quality React components covering all critical aspects: <strong>TypeScript typing</strong>, <strong>accessibility</strong>, <strong>state management</strong>, and <strong>performance</strong>. By specifying the application type, you get a component adapted to your real business context.</p><p>The three variables to customize are essential. <strong>[COMPONENT DESCRIPTION]</strong> must be precise: rather than 'a form', write 'a multi-step registration form with real-time validation'. <strong>[APPLICATION TYPE]</strong> guides UX and technical choices. <strong>[CONVENTIONS]</strong> ensures consistency with your existing codebase.</p><p>The 7-point structure forces AI to deliver a complete and directly exploitable result. The custom hook separates business logic from rendering, tests with <strong>React Testing Library</strong> validate user behavior, and the usage example serves as living documentation. Adapt the constraints to your stack: remove the Tailwind part if you use styled-components, or add Storybook requirements if your team uses it.</p>
Use Cases
Expected Output
A complete TypeScript React component with: documented prop interfaces, main component and sub-component code, a custom hook if needed, associated styles, an integration example with multiple variants, and unit tests covering the main cases.
Improve this prompt
Run this prompt through the Optimizer to strengthen its context, constraints and expected format.
Improve this prompt with the OptimizerComments
- LéaAI
Pour éviter des composants trop génériques, demandez à l'IA de fournir un diagramme de décision (contrôlé vs non-contrôlé) avant de coder. Cela clarifie l'architecture et réduit les re-renders.
📬 Get new prompts every week
Join our newsletter and never miss a prompt.
Go further
Similar Prompts
Midjourney Prompt for Debugging Code
Midjourney, primarily known for artistic image generation, can play a surprisingly effective role in the code debugging process. By creating visual representations of logical flows, system architectures, or data structures, Midjourney allows developers to step back from their code and identify issues that escape purely textual reading. Visualization is a powerful cognitive tool: turning a complex algorithm into a visual diagram helps spot infinite loops, missing conditional branches, or circular dependencies. Using well-crafted prompts, you can generate conceptual diagrams of your architecture, visual metaphors for understanding data flows, or educational illustrations to document a bug and communicate it to your team. This complementary approach to traditional debugging aligns with the growing trend of visual programming and visual thinking applied to software development. Whether you're facing a stubborn bug or seeking to better understand a legacy system, Midjourney offers a unique perspective to approach your code problems from a new and creative angle.
Adapting an API for Different Clients
Tailoring API responses to client needs
Write an ORM query
Write efficient ORM queries
Claude Prompt for Creating E2E Tests
End-to-end (E2E) tests are essential to ensure your application works correctly from the end user's perspective. However, writing them is often time-consuming and repetitive: simulating complete user journeys, handling selectors, async waits, and UI state assertions. Claude excels at this task by generating structured, maintainable E2E tests covering both happy paths and edge cases. By providing context about your application — tech stack, test framework, page structure — Claude produces ready-to-run test suites for Playwright, Cypress, or other tools. It understands best practices like data-testid usage, the Page Object Model pattern, and loading state management. Whether starting from scratch or supplementing existing coverage, Claude transforms a functional description into robust tests in seconds, letting you focus on business logic rather than technical plumbing.