showcase_skill

Overview

This skill creates and maintains high-quality UI component stories, fixtures, and visual regression setups for Storybook and React Cosmos. It turns prototypes and production components into comprehensive, accessible, and testable catalogs organized by Atoms/Molecules/Organisms. The skill enforces CSF 3.0 patterns, play functions, and autodocs so stories are portable and test-ready.

How this skill works

The skill auto-detects the project toolchain (Storybook, Cosmos, Histoire, Ladle) and generates CSF 3.0 stories, MDX docs, or Cosmos fixtures matching the component API and variants. It adds play functions, a11y checks, data-testid selectors, and tags for visual-test inclusion or exclusion, and outputs migration or audit reports with prioritized fixes. It can also scaffold Chromatic/Playwright/Lost Pixel visual regression flows and produce coverage scores by variant, state, interaction, and accessibility.

When to use it

• You need full story coverage for a component library or new component.
• Converting Forge preview stories into production-quality docs and tests.
• Setting up or maintaining visual regression for Storybook in CI.
• Creating React Cosmos fixtures or coexisting Storybook+Cosmos setups.
• Auditing story coverage, accessibility, and interaction quality.

Best practices

• Always use CSF 3.0 with satisfies Meta<typeof Component> and tags: ['autodocs'].
• Cover all visible variants and interaction states; include play functions for user flows rather than E2E tests.
• Add a11y addon and axe-core rules; surface critical issues as ON_A11Y_CRITICAL triggers.
• Use data-testid for stable selectors and tags to opt stories into visual regression.
• Keep business logic out of stories; never modify production code from stories.

Example use cases

• Enhance Forge preview stories into complete .stories.tsx files with play functions, MDX docs, and accessibility checks.
• Create React Cosmos fixtures with useFixtureInput and scoped decorators for interactive development.
• Run a story audit to produce a coverage report and prioritized action list for missing variants and a11y problems.
• Add Chromatic or Playwright visual regression baselines and CI jobs, tagging stories to include/exclude snapshots.
• Migrate CSF2 stories to CSF3 with automated templates and migration notes.