skills.rest
GovTechSG
GovTechSGOFFICIAL
Explore all skills by this author →
WebsiteGitHub

storybook-stories

Generate Storybook stories from basic.js and additional.stories.js templates.

18|10|Updated Aug 30, 2022
Search Tags:#automation#templates#documentation#frontend#storybook#component-stories#storybook-stories
One-click install
npx skills add https://github.com/GovTechSG/sgds-web-component --skill storybook-stories-govtechsg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: storybook-stories
Source: https://github.com/GovTechSG/sgds-web-component/tree/main/.github/skills/storybook-stories
Command: npx skills add https://github.com/GovTechSG/sgds-web-component --skill storybook-stories-govtechsg

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Storybook story creation and maintenance are streamlined by using templates and automatic file concatenation, removing repetitive setup tasks.

Core Features & Use Cases

  • Template-driven generation for stories under stories/component-templates/[ComponentName]/
  • Automatic concatenation of basic.js and additional.stories.js during load for consistent stories
  • Documentation integration with reference examples and writing guidelines to ensure consistency with sgds-writing rules
  • Use cases include adding new component stories, updating variants, and documenting usage for Storybook.

Quick Start

Create a new component folder under stories/component-templates with basic.js and additional.stories.js, then rely on the concatenation during load.

Frequently Asked Questions about storybook-stories

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

FAQPage Schema
How do I automate Storybook story creation for new frontend components?▼

Automate Storybook story creation by using a template-driven approach that generates files under stories/component-templates/ and automatically concatenates basic.js and additional.stories.js during load for consistent component documentation.

What is the best way to organize Storybook component stories and variants?▼

Organize Storybook component stories by placing them in dedicated folders under stories/component-templates/[ComponentName]/, separating base configurations in basic.js from extended variants in additional.stories.js for maintainable frontend documentation.

Do I need to manually concatenate Storybook story files when updating component variants?▼

No, manual concatenation is unnecessary because the template-based approach automatically merges basic.js and additional.stories.js during load, ensuring consistent Storybook stories without repetitive file setup tasks.

How does template-based Storybook generation ensure documentation consistency?▼

Template-based Storybook generation ensures documentation consistency by integrating reference examples and writing guidelines that conform to sgds-writing rules, enforcing standardized naming, formatting, and documentation across all generated component stories.

Can I use this template approach to document usage guidelines for existing Storybook components?▼

Yes, you can document usage for existing Storybook components by updating variants within the stories/component-templates/ directory structure and relying on the automatic concatenation to maintain consistent story outputs.

What are the limitations of using templates for Storybook story automation?▼

Storybook story automation via templates requires strict adherence to the defined naming conventions and file structure within stories/component-templates/, and relies on the sgds-writing guidance to maintain formatting and documentation compliance.

Related Skills

Explore More Software Engineering Skills→
Dragoon0xDragoon0x
4

storybook

Generate Storybook configuration and story files for React components.

Community
Intermediate
TinkerbellsTinkerbells
1

storybook

Create and maintain Vue component stories using CSF3 syntax in Storybook.

Community
Intermediate
00PrabalK0000PrabalK00
1

component-storybook-generator

Generate Storybook stories with states, controls, and edge-case variants.

Community
Intermediate
PMDevSolutionsPMDevSolutions
7

storybook-story-generation

Generate CSF3 Storybook stories and MDX autodocs from React component source.

Official
Advanced