skills.rest
aziontech
aziontechOFFICIAL
Explore all skills by this author →
Website𝕏@aziontechGitHub

storybook-write

Generate canonical Storybook CSF3 story files for Azion Webkit Vue components.

2|5|Updated Oct 24, 2023
Search Tags:#automation#design system#vue#storybook#component documentation#csf3#argTypes
One-click install
npx skills add https://github.com/aziontech/webkit --skill storybook-write
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: storybook-write
Source: https://github.com/aziontech/webkit/tree/main/.claude/skills/storybook-write
Command: npx skills add https://github.com/aziontech/webkit --skill storybook-write

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about storybook-write

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

FAQPage Schema
How do I autogenerate Storybook CSF3 stories for Vue components?▼

Generate canonical Storybook stories by reading the component spec and outputting a CSF3 story file with a minimal, approved set of stories like Default, Types, Sizes, Loading, and Disabled. It ensures correct metadata structure and explicit argTypes.

How do I inject Vue component spec usage into Storybook docs?▼

Inject spec usage into Storybook docs by lifting the spec's ## Usage vue snippet and Purpose lead-in into parameters.docs.description.component. This establishes the spec as the single source of truth for component documentation.

How do I define argTypes for Vue events in Storybook CSF3?▼

Define argTypes for Vue events in Storybook CSF3 by generating camelCase on<EventName> keys aligned to the spec's Events. This ensures accurate controls and typings for component interactions within the Storybook environment.

Does Storybook story generation support state-specific stories for Loading and Disabled?▼

Storybook story generation supports state-specific stories for Loading and Disabled only when they are defined as supported props in the component spec. It emits a minimal, approved set of stories tailored to actual component capabilities.

What is the best way to maintain a consistent Storybook story structure for a Vue design system?▼

Maintain a consistent Storybook story structure by reusing a module-scope Template renderer for deterministic story composition. This enforces correct metadata structure and an approved, minimal set of stories across all Vue design system components.

Related Skills

Explore More Software Engineering Skills→
aziontechaziontech
22

storybook-update-component

Update Vue Storybook stories to reflect component prop, slot, and event changes.

Official
Advanced
CoRLab-TechCoRLab-Tech

storybook-story-writing

Generate and refactor CSF3 Storybook stories for React components.

Official
Intermediate
TheBushidoCollectiveTheBushidoCollective
187

storybook-story-writing

Create CSF3 Storybook stories with TypeScript-typed Meta and StoryObj.

Official
Intermediate
btabaskabtabaska
1

rule-frontend-storybook

Enforce CSF3 formatting and accessibility practices in Storybook stories.

Community
Advanced