skills.rest
input-output-hk
input-output-hkOFFICIAL
Explore all skills by this author →
WebsiteGitHub

storybook-creation

Automate Storybook 6.4 story and test creation for React components.

1.2k|296|Updated Oct 5, 2016
Search Tags:#react#storybook#automated testing#component testing#ui documentation
One-click install
npx skills add https://github.com/input-output-hk/daedalus --skill storybook-creation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: storybook-creation
Source: https://github.com/input-output-hk/daedalus/tree/main/.agent/skills/storybook-creation
Command: npx skills add https://github.com/input-output-hk/daedalus --skill storybook-creation

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @storybook/react, @storybook/addon-actions, @storybook/addon-knobs, @dump247/storybook-state, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the creation and management of Storybook stories for Daedalus React components, simplifying the process of writing, testing, and maintaining UI documentation.

Core Features & Use Cases

  • Storybook Story Creation: Automates the creation of .stories.tsx files and related infrastructure for React components.
  • Component Testing: Facilitates writing visual tests and component demos for new or existing features.
  • Use Case: When developing a new feature in Daedalus, use this Skill to automatically generate Storybook stories that can be used for documentation and testing.

Quick Start

Use the storybook-creation skill to generate a new Storybook story for the 'MyComponent' component.

Frequently Asked Questions about storybook-creation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate Storybook story creation for React components?▼

Automate Storybook story creation by generating .stories.tsx files, setting up mock data, and applying decorators to document and test React components without manual boilerplate writing.

What is the best way to write UI documentation for React components?▼

Writing UI documentation for React components is best handled by automating Storybook story files, which serve as both interactive component demos and visual test fixtures for your codebase.

Can I use Storybook 6.4 with webpack5 for component testing?▼

Yes, Storybook 6.4 with webpack5 supports component testing, allowing you to generate visual tests and apply decorators to React components within your existing build configuration.

Do I need the Storybook CLI to set up mock data and decorators for stories?▼

Yes, the Storybook CLI is required along with related libraries like addon-actions and addon-knobs to automate mock data setup and apply decorators to your generated stories.

How to generate component tests and demos for new React features?▼

Generate component tests and demos for new React features by automating the creation of Storybook stories that bundle visual tests, mock data, and UI documentation together.

When should I not use automated Storybook story generation?▼

Automated Storybook story generation is not ideal for non-component logic or projects outside the React ecosystem, as it targets React component testing and UI documentation specifically.

Related Skills

Explore More Software Engineering Skills→
JimmyTranDevJimmyTranDev
1

tool-storybook-mcp

Coordinate Storybook MCP workflows to query docs, generate stories, preview components, and run tests.

Community
Advanced
nekorush14nekorush14
4

storybook-development

Generate Storybook CSF3 stories with interaction and visual regression testing.

Community
Advanced
hakushunhakushun

frontend-component

Create React components with TypeScript, Storybook stories, and tests.

Community
Basic
qdhenryqdhenry

generate-storybook

Generate CSF3 .stories.tsx files for Next.js 15 components and pages.

Community
Advanced