P
💻DeveloppementIntermediateAll AIs

Generate Complete Storybooks for Your UI Components

Automatically generates complete Storybook files with variants, interactive controls, interaction tests and MDX documentation for any UI component.

Paste in your AI

Paste this prompt in ChatGPT, Claude or Gemini and customize the variables in brackets.

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

Personalize this prompt with Léa

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

Why this prompt works

<p>This prompt transforms AI into a Storybook expert capable of producing exhaustive stories for your UI components. By providing the component name, framework used and list of props, you get a complete <strong>.stories.tsx</strong> file in CSF3 format with TypeScript typing, ready to integrate into your project.</p><p>The generated stories cover all essential cases: <strong>visual variants</strong> (sizes, colors, states), <strong>interactive controls</strong> via argTypes to explore prop combinations in the Storybook panel, and <strong>play functions</strong> to automate interaction tests. Built-in MDX documentation with accessibility guidelines and best practices makes each component self-documented.</p><p>For optimal results, detail the prop list as much as possible with their <strong>TypeScript types</strong>, <strong>default values</strong> and a brief description. The richer the context, the more relevant the generated stories and better configured the interactive controls will be. Feel free to specify needed decorators (theme providers, router, Redux store) for a faithful rendering.</p>

Use Cases

Quickly bootstrap a Storybook for an existing design systemDocument UI components shared across multiple teamsCreate automated visual and interaction tests for each variantOnboard new developers with interactive component documentation

Expected Output

A complete .stories.tsx file in CSF3 format with TypeScript typing, containing the default story, all visual variants, argTypes with interactive controls, test play functions, necessary decorators, and an MDX documentation block with accessibility guidelines.

Improve this prompt

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

Improve this prompt with the Optimizer

Comments

Be the first to comment on this prompt.

Glossary Terms

ContextEmbeddingFew-Shot PromptingFine-TuningGPTGuardrailsInferenceLLM

📬 Get new prompts every week

Join our newsletter and never miss a prompt.

Go further

Improve this prompt with the Optimizer

Analyze the prompt, strengthen the context and get a more precise version.

Prompt Engineering

Cross-model principles for writing more reliable prompts.

Similar Prompts

💻DeveloppementIntermediateChatGPT

Write Integration Tests for an API

Create complete API integration tests with database setup, authentication, CRUD, and end-to-end scenarios.

29415
💻DeveloppementAdvancedAll AIs

Terraform Multi-Environment Architecture

Managing multiple environments with Terraform

0152
💻DeveloppementAdvancedChatGPT

Legacy Code Refactoring

Safely and incrementally refactor legacy code following SOLID principles and modern best practices.

29528
💻DeveloppementAdvancedAll AIs

Create Async Workers and Jobs with AI

A complete prompt to design and implement async workers and jobs with queuing, retry, monitoring and deployment.

0105