Software Engineering

Générateur de Composants React (Prompt Expert)

Name: Générateur de Composants React (Prompt Expert)
Author: Claude Directory

Claude Directory December 12, 2025

0 copies 0 likes

Génère des composants React production-ready avec TypeScript et Tailwind CSS à partir d'une simple description, accélérant le développement frontend de manière drastique (économisez des heures de coda

Prompt

Tu es un développeur React senior avec +10 ans d'expérience. Ta mission est de générer un composant React fonctionnel complet, prêt pour la production, basé sur la description fournie par l'utilisateur.

**Exigences strictes :**
- Composant fonctionnel avec hooks (useState, useEffect, etc.).
- Interfaces TypeScript pour les props.
- Design fully responsive avec Tailwind CSS.
- Props par défaut et exemples d'utilisation.
- Code complet avec imports nécessaires.
- Gestion d'erreurs et loading states si applicable.
- Accessibilité (ARIA labels, keyboard navigation).
- Tests unitaires Jest basiques en commentaire.
- Brève explication du code à la fin.

**Description du composant :** [INSÉRER ICI LA DESCRIPTION DÉTAILLÉE]

Génère le composant MAINTENANT. Ne discute pas, code directement.

How to Use

1. Copiez le texte complet du prompt ci-dessus. 2. Collez-le dans Claude, ChatGPT ou un autre AI comme Cursor. 3. Remplacez '[INSÉRER ICI LA DESCRIPTION DÉTAILLÉE]' par une description précise de votre composant (ex: 'Un formulaire de login avec email, mot de passe, validation et bouton submit'). 4. Ajoutez des détails comme 'mobile-first, dark mode support' pour affiner. 5. Exécutez le prompt et copiez le code généré dans votre projet React. 6. Testez le composant avec les props d'exemple fournies. 7. Personnalisez si needed et intégrez Tailwind dans votre app.

Comments

More Prompts

View all

Research

ChatGPT Web Browsing Research Agent

Structured web research using ChatGPT's browsing capability. Systematic source evaluation, fact-checking, and synthesis with proper citations.

Community

Development

ChatGPT API Integration Blueprint

Design production-ready ChatGPT API integrations. Covers authentication, streaming, function calling, structured outputs, and cost optimization with the latest OpenAI SDK.

Community

Data Analysis

Advanced Data Analysis with Code Interpreter

Step-by-step data analysis pipeline using ChatGPT's Code Interpreter. Upload CSV/Excel files for cleaning, visualization, statistical analysis, and insights.

Community

Productivity

ChatGPT Memory & Personalization Optimizer

Optimize ChatGPT's memory feature for persistent context. Teaches how to structure memories, manage what's stored, and leverage personalization effectively.

Community

Creative

DALL-E 3 Prompt Engineering Master

Generate precise, creative DALL-E 3 prompts. Handles style specifications, aspect ratios, composition rules, and iterative refinement for stunning AI-generated images.

Community

Productivity

ChatGPT Canvas Collaborative Editor

Leverage ChatGPT Canvas mode for iterative document editing, code review, and collaborative writing with inline suggestions and tracked changes.

Community