Storybook

What This Skill Does

The Storybook skill empowers OpenClaw to act as a frontend architecture expert, assisting developers in creating, maintaining, and refining UI component documentation. It provides the agent with deep knowledge of Component Story Format (CSF), enabling it to structure stories, define metadata, implement complex decorators, and write interactive play functions for automated testing. By utilizing this skill, the agent can transform raw component props into structured Storybook controls, bridge the gap between design and development by configuring custom render functions, and ensure consistency across component libraries using organizational patterns like title hierarchy and autodocs.

Installation

To integrate this skill into your environment, run the following command in your terminal: clawhub install openclaw/skills/skills/ivangdavila/storybook

Use Cases

• Automated Documentation: Generate comprehensive documentation pages for design systems using tags: ['autodocs'] and descriptive metadata.
• Component Testing: Develop interactive visual regression and integration tests using play functions and userEvent interactions within the browser context.
• Complex UI Wrapping: Apply theme providers, Redux wrappers, or layout decorators globally or to specific component stories.
• Edge Case Simulation: Programmatically generate variations of components to visualize empty, loading, error, and disabled states without manual setup.
• Prop Management: Define precise argTypes to create intuitive control UIs for non-technical stakeholders to interact with design tokens and component props.

Example Prompts

1. "Create a Storybook story for the UserProfile component that includes an interactive play function to verify that clicking the edit button opens the modal."
2. "Refactor my existing Button component stories to use CSF3 object syntax and add a decorator that wraps the stories in a Material UI ThemeProvider."
3. "Define argTypes for a custom Slider component that allows the user to toggle between 'compact' and 'expanded' variants while restricting the 'color' control to a predefined set of brand-specific hex codes."

Tips & Limitations

• Prefer Decorators: Use decorators for global cross-cutting concerns like providers and layouts, rather than render functions, to keep individual story files clean.
• TypeScript Synergy: Always leverage satisfies Meta<typeof Component> to catch type errors early in your story definition.
• Action Tracking: Utilize fn() from @storybook/test to spy on event handlers, which is significantly more robust than traditional console logging.
• Limitations: This skill assumes an existing Storybook installation. It cannot perform file system operations outside of the designated project directory. Interaction tests are restricted to the browser context provided by Storybook's test runner.