storybook-visual-state-nested-props

Name: storybook-visual-state-nested-props
Availability: InStock
Author: VilnaCRM-Org

Diagnoses Storybook screenshot tests where nested URL args silently fail to apply component state.

1|Updated Jun 9, 2026

Search Tags:#react #playwright #visual testing #storybook #visual regression #screenshot baseline #storybook args

Ready to run

npx skills add https://github.com/VilnaCRM-Org/claude-plugins --skill storybook-visual-state-nested-props-vilnacrm-org

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: storybook-visual-state-nested-props
Source: https://github.com/VilnaCRM-Org/claude-plugins/tree/main/plugins/react-frontend-sdlc/skills/storybook-visual-state-nested-props
Command: npx skills add https://github.com/VilnaCRM-Org/claude-plugins --skill storybook-visual-state-nested-props-vilnacrm-org

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Storybook's URL-arg resolver only handles flat props and top-level dot paths, so an arg targeting a nested array element or object path (like `actions[0].pressed`) is silently ignored — the screenshot captures the default render while the test still passes, producing a baseline that proves nothing. ## Core Features & Use Cases - Silent-failure diagnosis: Identifies when `&args=` values targeting nested props are dropped without error, leaving the story in its rest state. - Story-based state pattern: Guides moving nested values into a dedicated named story whose `args` contain the fully built object, then pointing the visual spec at that story id. - Baseline regeneration workflow: Covers verifying the story render in a browser, regenerating baselines via the repository's visual-baseline update target, and inspecting the written PNG. - Use Case: A Playwright visual test sets `?args=actions[0].pressed:true` but the recorded baseline looks identical to the rest state — this Skill explains why and shows how to bake the pressed state into an `EyePressed` story instead. ## Quick Start Ask the assistant to fix a Storybook visual state test whose nested URL args never apply by moving the state into a dedicated story and regenerating the baseline.

Frequently Asked Questions about storybook-visual-state-nested-props

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

FAQPage Schema

Why does my Storybook args URL parameter not change the component state?▼

Storybook's URL-arg resolver only supports flat props and top-level dot paths. Args targeting array indices or deep object paths like actions[0].pressed are silently ignored with no error, so the story renders with default props.

How do I test a nested prop state in a Storybook visual test?▼

Create a dedicated named story whose args contain the fully built nested value, then point the visual spec at that story id instead of passing args in the URL. Reserve &args= for flat, top-level scalar props only.

Why does my visual regression test pass but show the wrong state?▼

A default render can sit inside the diff tolerance and pass forever, so a green run is not proof the state applied. Open the story in a browser first to confirm the intended state renders before recording any baseline.

Does Storybook support deep arg paths like actions.0.pressed?▼

No. The resolver supports none of the deep path shapes such as actions.0.pressed or actions[0][pressed]. Deepening the arg path never works; the value must be moved into the story's args instead.

When should I not use this approach for visual test failures?▼

This does not apply to stale renders from hot-reloading dev servers, diffs caused by animation or font loading, or missing baselines from title filters selecting no test. Those are not arg-resolution problems.