SaferSkills independently audited storybook-sync (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
description: Update and validate Storybook after recent component, style, or behavior changes.
Storybook Sync Skill
Use When
The user asks to update Storybook for the latest code changes
UI components, styles, props, or exports changed in src/
Stories are outdated or missing for new UI behavior
The user asks to rebuild Storybook static output
Required Workflow
Identify impacted stories from changed files:
Check modified files in src/
Ensure matching *.stories.tsx files are updated for each affected component
Prefer adjusting existing stories instead of creating redundant variants
If Storybook includes a landing, introduction, or welcome story, update it whenever the component set, naming, supported features, or recommended validation workflow changes
Verify story coverage for changed behavior:
Keep at least one representative default story
Add focused stories for new states/props/edge cases introduced by the change
Keep controls and args aligned with current component props
Ensure the welcome page accurately reflects the current components surfaced in Storybook and does not mention removed or outdated examples
Build Storybook from current sources:
Run: npm run build-storybook
Expected output directory: storybook-static/
(If requested or needed) run interactive Storybook for quick validation:
Run: npm run storybook
Check impacted stories render and controls behave correctly