K2BG Storybook Documentation Generator

Generate and update Storybook CSF3 stories and bilingual i18n translation files for UI components.

Updated Aug 6, 2023
One-click install
npx skills add https://github.com/k2bg-technology/k2bg-branding --skill k2bg-storybook-documentation-generator
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: K2BG Storybook Documentation Generator
Source: https://github.com/k2bg-technology/k2bg-branding/tree/main/.claude/skills/k2bg-storybook-docs
Command: npx skills add https://github.com/k2bg-technology/k2bg-branding --skill k2bg-storybook-documentation-generator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the creation and updating of Storybook documentation and associated i18n translation files for UI components, ensuring consistency and saving significant developer time.

Core Features & Use Cases

  • Automated Story Generation: Creates Storybook CSF3 stories based on component structure and props.
  • i18n Translation Management: Generates and updates English and Japanese translation files for component documentation.
  • Use Case: When a new Button component is added to the packages/ui library, this Skill can generate its initial Storybook story file and the corresponding description, overview, usage, accessibility, doList, dontList, relatedComponents, dependencies, and references entries in both English and Japanese translation files.

Quick Start

Use the K2BG Storybook Documentation Generator skill to create documentation for the new Avatar component located at packages/ui/src/components/Avatar/.

Frequently Asked Questions about K2BG Storybook Documentation Generator

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

FAQPage Schema
How do I generate Storybook CSF3 stories for new React components?

You can generate Storybook CSF3 stories by providing the component directory path to an automated generator, which scaffolds the story file based on component structure and props. This ensures documentation consistency and saves significant developer time.

What is the best way to manage bilingual i18n translation files for a UI component library?

Managing bilingual i18n translation files for a UI component library is best handled by automating the generation of English and Japanese localization files. This process updates component descriptions, usage, accessibility, and metadata entries to ensure translations remain consistent across documentation updates.

How do I scaffold documentation sections like accessibility and usage for TypeScript UI components?

To scaffold documentation sections like accessibility and usage for TypeScript UI components, you can automate the creation of structured Storybook entries. This includes generating specific metadata fields such as doList, dontList, relatedComponents, and references for each component.

Can I update existing Storybook documentation without rewriting the entire story file?

Yes, you can update existing Storybook documentation without rewriting the entire story file. Automated documentation generators support updates to existing sections, allowing you to modify specific i18n translations or metadata entries while maintaining the original file structure and formatting.

Does this Storybook documentation generator support Japanese localization for component metadata?

Yes, this Storybook documentation generator supports Japanese localization. It manages both English and Japanese translation files, automatically generating localized entries for component descriptions, usage instructions, accessibility guidelines, and related metadata.