Can it help migrate old Storybook files?

Yes, it can identify CSF2 anti-patterns and refactor them into modern, clean CSF3 stories.

Can I use this with TypeScript projects?

Absolutely. The skill prioritizes type safety by using Meta and StoryObj types to ensure your stories match your component props.

How does it handle components that need a Router or Theme?

It implements Decorators to wrap your components in the necessary providers, ensuring they render correctly in the Storybook environment.

Does this skill support modern Storybook standards?

Yes, it specifically follows Component Story Format 3 (CSF3), which uses object syntax for better performance and maintainability.

Storybook Story Writing

Name: Storybook Story Writing
Author: TheBushidoCollective

byTheBushidoCollective

•

Design Tools

Generates and maintains professional UI component stories using modern Component Story Format 3 (CSF3) standards.

This skill enables Claude to architect high-quality, maintainable Storybook documentation for your design system. It focuses on the modern CSF3 standard, ensuring that every UI component is showcased across its full range of states—including loading, disabled, and responsive variations—with strict TypeScript safety. By implementing best practices like decorators for context and descriptive parameters for documentation, it transforms your component library into a robust, interactive playground for developers and designers alike.

Key Features

0195 GitHub stars

02Automated documentation generation via Storybook parameters

03Comprehensive component state coverage (loading, error, disabled)

04Modern CSF3 object syntax generation and migration

05Strict TypeScript integration with Meta and StoryObj types

06Contextual decorators for layout, routing, and theme providers

Use Cases

01Migrating legacy CSF2 template-based stories to modern CSF3 syntax

02Implementing responsive testing stories using custom viewport parameters

03Generating exhaustive documentation for complex form and layout components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add thebushidocollective/han storybook-story-writing

For use in Claude.ai and ChatGPT

Download Skill