pf-storybook_skill

Overview

This skill generates Storybook stories for components in the PF DEV monorepo. It creates well-structured .stories.tsx files that include basic stories, variants, sizes, states, composition examples, form examples, and interactive demos. The output follows the project's TypeScript conventions and Storybook autodocs patterns. It also adds argTypes and controls for convenient component exploration.

How this skill works

Point the generator at a component folder (e.g., packages/ui/src/atoms/Button) and it scaffolds a Storybook file with Meta, Story types, default story, variant stories, size stories, state stories (disabled/loading), and examples with custom render functions. For composite components it creates fullscreen layout examples with decorators to emulate real usage. For form and interactive components it includes controlled and validation examples using useState, plus argTypes for controls and action handlers for events.

When to use it

• Adding Storybook coverage for a new component
• Ensuring all variants and sizes have visual tests
• Creating interactive or composed examples for complex components
• Standardizing story structure across the monorepo
• Preparing stories before running visual tests or demos

Best practices

• Include variants and sizes for every visual component
• Add disabled/loading/error states where applicable
• Define argTypes with controls and descriptions for important props
• Use render examples for composition and icon/slot usage
• Add interactive controlled/validation examples for form inputs

Example use cases

• Scaffold Button.stories.tsx with Default, Secondary, Outline, Ghost, Destructive, Small, Large, Disabled, Loading, and WithIcon stories
• Create Sidebar stories that render full-screen layouts with Header, Content, and Footer composed children
• Generate Input stories with Default, WithLabel, WithError, Password, Controlled, and WithValidation examples
• Add argTypes for props like variant, size, disabled, type, and error to enable Storybook controls
• Produce decorator-wrapped stories to preview components inside common layout containers