Skills
.Work. You
Rest

storybook-write

Official

Autogenerate canonical Storybook stories

Software Engineering#automation#design system#vue#storybook#component documentation#csf3#argTypes
Authoraziontech
Version1.0.0
Installs0

System Documentation

What problem does it solve?

It eliminates repetitive, error-prone manual work of creating Storybook story files for Vue components by generating a minimal, canonical CSF3 structure from an existing spec.

Core Features & Use Cases

  • Canonical story scaffolding: Produces the expected Button.stories.js-like shapes (Default + composite Types/Sizes + state stories for Loading and Disabled only when supported).
  • Spec-driven Docs injection: Lifts the spec’s Purpose lead-in and the ## Usage vue snippet into parameters.docs.description.component as the single source of truth.
  • Accurate controls & typings: Generates argTypes and args aligned to the spec’s Props, Events (camelCase on<EventName>), and Slots.

Quick Start

Use the storybook-write skill on the file .specs/<name>.md for the component, following the constraints and the reference Button.stories.js shape to generate the target apps/storybook/src/stories/webkit story file.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: storybook-write
Download link: https://github.com/aziontech/webkit/archive/main.zip#storybook-write

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.