P
💻DeveloppementIntermediaireAll AIs

Générer des Storybooks complets pour vos composants UI

Génère automatiquement des fichiers Storybook complets avec variantes, contrôles interactifs, tests d'interaction et documentation MDX pour n'importe quel composant UI.

Coller dans votre IA

Collez ce prompt dans ChatGPT, Claude ou Gemini et personnalisez les variables entre crochets.

Tu es un développeur frontend expert en Storybook et en design systems. Génère des stories Storybook complètes pour le composant suivant :

Composant : [NOM_DU_COMPOSANT]
Framework : [FRAMEWORK : React | Vue | Angular | Svelte]
Librairie de style : [LIBRAIRIE_STYLE : Tailwind CSS | CSS Modules | Styled Components | SCSS | autre]
Props/inputs du composant :

[LISTE_DES_PROPS]

Pour chaque composant, génère :

  1. Story par défaut avec les props les plus courantes
  2. Toutes les variantes visuelles (tailles, couleurs, états : hover, disabled, loading, error, empty)
  3. Args et argTypes avec des contrôles interactifs (select, boolean, text, color, range) pour chaque prop
  4. Stories de composition montrant le composant utilisé avec d'autres composants
  5. Story responsive démontrant le comportement sur mobile, tablette et desktop
  6. Documentation MDX intégrée avec :
    • Description du composant et de son usage
    • Tableau des props avec types, valeurs par défaut et descriptions
    • Guidelines d'accessibilité (a11y)
    • Do's and Don'ts illustrés
  7. Decorators nécessaires (ThemeProvider, Router, Store, etc.)
  8. Play functions avec @storybook/test pour tester les interactions clés (clic, saisie, navigation clavier)

Respecte ces conventions :

  • Format CSF3 (Component Story Format 3) avec typage TypeScript
  • Utilise satisfies Meta<typeof [NOM_DU_COMPOSANT]> pour le typage
  • Nomme les stories de façon descriptive en PascalCase
  • Organise avec title: '[CATÉGORIE]/[NOM_DU_COMPOSANT]'
  • Ajoute des tags autodocs pour la documentation automatique
  • Inclus les paramètres viewport pour les stories responsives

Personnaliser ce prompt avec Léa

Réponds à 3 questions, Léa adapte le prompt à ta situation.

Pourquoi ce prompt fonctionne

<p>Ce prompt transforme l'IA en expert Storybook capable de produire des stories exhaustives pour vos composants UI. En fournissant le nom du composant, le framework utilisé et la liste des props, vous obtenez un fichier <strong>.stories.tsx</strong> complet au format CSF3 avec typage TypeScript, prêt à être intégré dans votre projet.</p><p>Les stories générées couvrent tous les cas essentiels : <strong>variantes visuelles</strong> (tailles, couleurs, états), <strong>contrôles interactifs</strong> via argTypes pour explorer les combinaisons de props dans le panel Storybook, et <strong>play functions</strong> pour automatiser les tests d'interaction. La documentation MDX intégrée avec guidelines d'accessibilité et bonnes pratiques rend chaque composant auto-documenté.</p><p>Pour un résultat optimal, détaillez au maximum la liste des props avec leurs <strong>types TypeScript</strong>, leurs <strong>valeurs par défaut</strong> et une brève description. Plus le contexte est riche, plus les stories générées seront pertinentes et les contrôles interactifs bien configurés. N'hésitez pas à préciser les decorators nécessaires (providers de thème, router, store Redux) pour un rendu fidèle.</p>

Cas d'usage

Bootstrapper rapidement un Storybook pour un design system existantDocumenter des composants UI partagés entre plusieurs équipesCréer des tests visuels et d'interaction automatisés pour chaque varianteOnboarder de nouveaux développeurs avec une documentation interactive des composants

Résultat attendu

Un fichier .stories.tsx complet au format CSF3 avec typage TypeScript, contenant la story par défaut, toutes les variantes visuelles, les argTypes avec contrôles interactifs, des play functions de test, les decorators nécessaires, et un bloc de documentation MDX avec guidelines d'accessibilité.

Améliorez ce prompt

Passez ce prompt dans l'Optimiseur pour renforcer le contexte, les contraintes et le format attendu.

Améliore ce prompt avec l'Optimiseur

Commentaires

Sois le premier à commenter ce prompt.

Termes du glossaire

ContexteEmbeddingFew-shot promptingFine-tuningGPTGuardrailsInferenceLLM

📬 Recevez de nouveaux prompts chaque semaine

Rejoignez notre newsletter et ne manquez aucun prompt.

Pour aller plus loin

Améliore ce prompt avec l'Optimiseur

Analyse le prompt, renforce le contexte et obtiens une version plus précise.

Prompt Engineering

Les principes transverses pour écrire des prompts plus fiables.

Prompts similaires

💻DeveloppementIntermediaireChatGPT

Écrire des tests d'intégration pour une API

Créez des tests d'intégration API complets avec setup de base de données, authentification, CRUD et scénarios end-to-end.

29415
💻DeveloppementAvanceAll AIs

Architecture multi-environnements Terraform

Gérer plusieurs environnements avec Terraform

0152
💻DeveloppementAvanceChatGPT

Refactoring de code legacy

Refactorisez du code legacy de manière sécurisée et incrémentale en suivant les principes SOLID et les bonnes pratiques modernes.

29528
💻DeveloppementAvanceAll AIs

Créer des workers et jobs asynchrones avec l'IA

Un prompt complet pour concevoir et implémenter des workers et jobs asynchrones avec file d'attente, retry, monitoring et déploiement.

0105