Fec storybook component doc

Skill bovinphang/frontend-craft/skills/fec-storybook-component-doc

frontend-craft is a universal frontend plugin that brings the same opinionated engineering standards to all 15 AI coding assistants.

Install

npx -y skills add bovinphang/frontend-craft --skill fec-storybook-component-doc

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

19 stars19 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Use when setting up or reviewing Storybook component documentation, design-system presentation, isolated component state previews, stories, addons, decorators, MDX docs, component-state interaction checks, visual baselines, or Chromatic. For real-browser cross-page journeys or broader coverage planning, choose the matching testing workflow first; Chinese triggers include Storybook, component documentation, Design System, visual regression.

SKILL.md

2.9 KB, as published. Nobody here has run it

Storybook component documentation

Purpose

Establish documentation, design system display and isolated state preview environment for UI components; interaction and visual testing only cover component states within the Storybook scene.

Procedure

Initialize or identify an existing Storybook configuration, inheriting the project framework adapter, stories globs, themes, and build commands.
Each component's Story covers default state, main variant, size, semantic tone, disabled, loading, error, empty, selected, invalid and key edge states.
Components that rely on Router, Store, i18n, and ThemeProvider are wrapped with decorators and do not copy the application entry in Story.
Use MDX to supplement complex components with usage instructions, Props, slots/children, variant matrices, status examples, accessibility requirements and source code display.
When automation is required, connect interaction tests, addon-a11y, Chromatic or Storybook Test Runner; these capabilities serve component documentation and design system display and do not undertake cross-page business journeys.
Design system components should record token sources, Tailwind/class variants, dark modes, responsive sizes, and unsupported combinations to avoid consumers guessing at assembly.

Detailed reference

Load references/story-patterns.md when you need main.ts, preview.ts, stories, decorators, MDX, interaction tests and visual regression examples.

Constraints

Story needs to be updated synchronously with component prop changes.
Provider dependencies must be completed through decorators.
Storybook build product storybook-static/ should not be committed to Git.
Storybook is used for development and component documentation and is not a replacement for production page SEO.
Storybook visual baseline for component state; cross-page screenshots and real routing processes are offloaded to E2E workflow.
Large component libraries need to control stories glob and addon overhead.
Don’t use Storybook to hide component API issues; if variant combinations explode, you should first converge component responsibilities or split components.

Expected Output

Interactive component documentation and design system showcase site with isolated previews of each component state, Props tables to generate, and key Storybook scenes with optional play testing or visual regression baselines.