How does this skill handle TypeScript types?

The skill prioritizes inferring controls directly from your component's TypeScript interfaces, ensuring your Storybook controls stay in sync with your code.

Can I organize many controls into sections?

Absolutely. The skill includes advanced patterns for grouping controls into categories like 'Appearance', 'Behavior', and 'Data' for better organization.

Does it support conditional logic for controls?

Yes, it includes implementation patterns for 'if' logic, allowing you to show or hide certain controls based on the value of another argument.

Can I hide specific controls from the Storybook UI?

Yes, it provides patterns for disabling controls for specific props or hiding them from the documentation table entirely while keeping them as functional args.

How are event handlers managed in this skill?

It utilizes Storybook Actions to map event callbacks to the Actions panel, allowing you to log and inspect component events during testing.

Storybook Args & Controls

Name: Storybook Args & Controls
Author: TheBushidoCollective

byTheBushidoCollective

•

デザインツール

Configures interactive controls and args for Storybook stories to create dynamic, explorable UI component demonstrations.

概要

This skill empowers developers to build robust Storybook environments by automating and optimizing the setup of Args and Controls. It provides domain-specific patterns for mapping TypeScript types to interactive UI controls, implementing conditional logic for complex component states, and grouping parameters for enhanced documentation. By using this skill, Claude can ensure that design systems remain highly explorable and well-documented, allowing developers and designers to test component variations in real-time without writing extensive boilerplate configuration.

主な機能

Automatic control inference from TypeScript interfaces and prop types
39 GitHub stars
Implementation of conditional controls based on current argument values
Logical grouping of controls into categories for improved UX
Custom configuration for advanced controls like color pickers and range sliders
Integration of Storybook Actions for tracking event callbacks

ユースケース

Standardizing design system documentation through consistent ArgType definitions
Transforming static component stories into interactive playgrounds for cross-functional teams
Debugging complex UI edge cases by toggling component properties in real-time

概要

主な機能

Automatic control inference from TypeScript interfaces and prop types
39 GitHub stars
Implementation of conditional controls based on current argument values
Logical grouping of controls into categories for improved UX
Custom configuration for advanced controls like color pickers and range sliders
Integration of Storybook Actions for tracking event callbacks

ユースケース

Standardizing design system documentation through consistent ArgType definitions
Transforming static component stories into interactive playgrounds for cross-functional teams
Debugging complex UI edge cases by toggling component properties in real-time