What are Storybook Args?

Args are inputs to components that Storybook tracks and makes interactive, allowing you to change props via the UI without modifying code.

Does it support complex data types?

Yes, it covers configuration for objects, arrays, and custom control components for specialized data structures like color pickers or sliders.

Can I hide specific controls?

Yes, this skill includes implementation patterns for disabling controls for static props or hiding specific internal properties from the documentation table.

How does this skill handle TypeScript?

It provides patterns for inferring controls directly from TypeScript interfaces to reduce boilerplate and ensure type safety in your documentation.

Storybook Args & Controls

Name: Storybook Args & Controls
Author: TheBushidoCollective

byTheBushidoCollective

•

Design Tools

Configures dynamic interactive controls and argument types for Storybook components to create explorable and well-documented design systems.

Storybook Args & Controls is a specialized skill designed to streamline the creation of interactive component documentation. It provides expert guidance on defining Args and ArgTypes, allowing developers and designers to manipulate component properties in real-time within the Storybook UI. By leveraging TypeScript inference, custom control types, and conditional logic, this skill ensures that Storybook environments remain organized, user-friendly, and perfectly aligned with the underlying component API, facilitating better collaboration and more robust UI testing.

Key Features

01Dynamic control configuration for interactive UI testing

02Automatic TypeScript-to-Control inference and mapping

03Conditional control logic based on component state

04Integration with Storybook Actions for event handler tracking

05Categorized UI organization for complex component APIs

0695 GitHub stars

Use Cases

01Testing edge-case prop combinations without manual code changes

02Building a comprehensive UI kit with explorable component variants

03Creating designer-friendly documentation with clear property descriptions

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