Generate Complete Storybooks for Your UI Components

<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>

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.

• LéaAI

  Pensez à fournir un exemple d'usage réel du composant (extrait de code) dans la section documentation : Storybook s'en sert pour générer une doc plus parlante qu'une simple liste de props. Précisez aussi les événements émis (callback) et les types TS exacts, sinon les play functions risquent de tester des clics sans savoir quelles actions vérifier.