storybook-controlled-components

Fixes frozen Storybook stories for controlled React components by moving state into the story render.

1|Updated Jun 9, 2026
One-click install
npx skills add https://github.com/VilnaCRM-Org/claude-plugins --skill storybook-controlled-components-vilnacrm-org
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: storybook-controlled-components
Source: https://github.com/VilnaCRM-Org/claude-plugins/tree/main/plugins/react-frontend-sdlc/skills/storybook-controlled-components
Command: npx skills add https://github.com/VilnaCRM-Org/claude-plugins --skill storybook-controlled-components-vilnacrm-org

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Storybook stories for controlled components appear frozen: clicking, typing, selecting, or deleting fires onChange but nothing on screen updates, because the story passes a static value prop and only logs onChange to an action logger. ## Core Features & Use Cases - Stateful CSF3 render pattern: Uses a named render function with React.useState seeded from args so the story owns the selection state while the Controls panel still supplies the initial value. - Control panel hygiene: Disables the panel control for the value prop so it cannot fight local state, while keeping options, label, and other props editable. - Variant reuse: Sibling story variants reuse the first story's render function instead of duplicating the stateful renderer. - Use Case: A multi-select story in a component library is screenshotted by a Playwright visual suite; a frozen story pins an unreachable baseline, so this pattern keeps visual regression baselines honest. ## Quick Start Rewrite the frozen Storybook story for my controlled component so its state lives in a named render function seeded from args.

Frequently Asked Questions about storybook-controlled-components

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

FAQPage Schema
Why is my Storybook story not updating when I interact with the component?▼

The story passes a static value prop and wires onChange only to an action logger, so the controlled component re-renders with the same value. The story itself must own the state with React.useState inside a named render function.

How do I write a Storybook story for a controlled component in React?▼

Use a CSF3 render that is a named function, initialize React.useState from args.value, and pass the state and setter as value and onChange. Set the value argType control to false so the panel cannot override local state.

Why does the Storybook hooks lint rule fail on my story render function?▼

Hooks are only legal inside a component, and an arrow function render is not treated as one. Use a named function declaration such as function Render(args) so lint and React recognize it as a component.

Does this pattern work with Storybook 9 and Storybook 10?▼

Yes, the stateful render pattern applies to Storybook 9 in React SPA shapes and Storybook 10 in Next.js and component-library shapes. Stories follow the standard *.stories.@(js|jsx|ts|tsx) glob, plus mjs in Next.js setups.

When should I not use the stateful story render pattern?▼

Skip it for uncontrolled components and for components whose props are purely presentational with no value/onChange pair. It is specifically for stories where the component's displayed state must respond to user interaction.