ui-storybook-docs

Generates MDX docs, CSF3 stories, and prop tables from ui-component-spec.

1|Updated May 6, 2026
One-click install
npx skills add https://github.com/ThorStarlord/interface-skills --skill ui-storybook-docs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-storybook-docs
Source: https://github.com/ThorStarlord/interface-skills/tree/main/skills/ui-storybook-docs
Command: npx skills add https://github.com/ThorStarlord/interface-skills --skill ui-storybook-docs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Interface teams need consumer-facing component documentation and Storybook stories, but they often duplicate or drift from the underlying approved component specification.

Core Features & Use Cases

  • Generates an MDX documentation page that explains what the component does for consumers and when to use it.
  • Produces a Storybook 8 (CSF3) stories file with one story per state from the approved ui-component-spec.
  • Creates a prop reference table sourced from the ui-component-spec anatomy, including accessibility and keyboard behavior notes.

Quick Start

Use ui-storybook-docs to generate public MDX docs, Storybook 8 stories, and a prop table for a shared component from its approved ui-component-spec output.

Frequently Asked Questions about ui-storybook-docs

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

FAQPage Schema
How do I generate Storybook 8 CSF3 stories from a component specification?

Generate Storybook 8 CSF3 stories by processing an approved component specification to extract the states matrix, producing one complete story per state without inventing any new component behaviors.

What is the best way to produce MDX documentation pages for UI components?

Producing MDX documentation pages involves extracting component names and anatomy from an approved spec to output consumer-facing docs that explain what the component does and when to use it.

How do I create a prop reference table with a11y notes and keyboard mappings?

Create a prop reference table by sourcing prop anatomy, a11y notes, and keyboard mapping from an approved ui-component-spec output, ensuring the reference table aligns to spec states.

Do I need an approved ui-component-spec to generate component documentation?

Yes, an approved ui-component-spec output is required to generate complete, non-invented MDX pages, CSF3 stories, and prop tables suitable for downstream validation.

Can I publish Storybook stories that match my component's exact states matrix?

Yes, you can publish Storybook stories that match the exact states matrix by extracting the approved specification's states and generating one corresponding CSF3 story per state.

Why does my generated component documentation drift from the underlying spec?

Documentation drifts when manually authored; generating MDX docs, CSF3 stories, and prop tables directly from the approved ui-component-spec prevents duplication and ensures alignment.