storybook-stories
Write comprehensive Storybook stories for React components with proper TypeScript types, args, controls, decorators, and interaction tests. Use this skill when the user asks to create or improve Storybook stories for components in the /components workspace.
Security Assessment
About storybook-stories
The 'storybook-stories' skill helps developers write comprehensive and production-ready Storybook stories for React components. It aims to solve the challenge of documenting React components in an interactive and well-structured manner, incorporating TypeScript types, component controls, decorators, and interaction tests. The skill simplifies the process of writing Stories, ensuring that all components are easily testable and configurable within Storybook, enabling developers to visualize and interact with components in different states and variants.
FAQ
How do I use this skill?
To use this skill, provide the React component you want to document in Storybook. You may specify states, variants, or interaction scenarios you'd like covered. The skill will generate a Storybook story with proper TypeScript types, args, and decorators.
Does the skill work with all React components?
Yes, the skill is designed to work with React components located within the '/components' workspace. However, it is tailored for use with components that follow a structured design system, specifically the Nordic Minimal design system.
Can I add custom decorators or context providers to the stories?
Yes, the skill supports adding custom decorators and context providers to your stories. You can wrap components in providers like theme or authentication contexts either globally or for specific stories.
Are there any specific requirements for using this skill?
This skill requires components to be styled using the Nordic Minimal design system and make use of custom SVG icons from '@finans/components'. Additionally, the stories should be located within the '/components' workspace.
What is the role of 'args' and 'controls' in the generated stories?
'Args' represent component props and are used to define the default values of the story. 'Controls' allow you to modify these args interactively within Storybook, making it possible to test different states and configurations of the component directly in the UI.
Install storybook-stories
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
andersnygaard/ettsted2