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

•

Herramientas de Diseño

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.

Características Principales

01Automatic control inference from TypeScript interfaces and prop types

0239 GitHub stars

03Implementation of conditional controls based on current argument values

04Logical grouping of controls into categories for improved UX

05Custom configuration for advanced controls like color pickers and range sliders

06Integration of Storybook Actions for tracking event callbacks

Casos de Uso

01Standardizing design system documentation through consistent ArgType definitions

02Transforming static component stories into interactive playgrounds for cross-functional teams

03Debugging complex UI edge cases by toggling component properties in real-time

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add thebushidocollective/han storybook-args-controls

For use in Claude.ai and ChatGPT

Download Skill