skills.rest
leboncoin
leboncoinOFFICIAL
Explore all skills by this author →
Website𝕏@leboncointechGitHub

create-storybook-docs

Generate and update Storybook stories and MDX docs for Spark UI components.

92|26|Updated Jan 26, 2023
Search Tags:#documentation#frontend#storybook#MDX#stories#component-docs#Spark UI
One-click install
npx skills add https://github.com/leboncoin/spark-web --skill create-storybook-docs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-storybook-docs
Source: https://github.com/leboncoin/spark-web/tree/main/.cursor/skills/create-storybook-docs
Command: npx skills add https://github.com/leboncoin/spark-web --skill create-storybook-docs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill automates the creation and updating of Storybook stories and MDX documentation for Spark UI components.

Core Features & Use Cases

  • Generate and update Storybook stories for Spark UI components in a consistent structure (Default, Uncontrolled, Controlled, and other variants).
  • Create and maintain MDX documentation files (ComponentName.doc.mdx) aligned with Spark UI guidelines.
  • Ensure documentation references and stories stay in sync as components evolve and are added to Storybook.

Quick Start

Provide the target Spark UI component name and run the skill to generate ComponentName.stories.tsx and ComponentName.doc.mdx as the initial docs and stories.

Frequently Asked Questions about create-storybook-docs

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

FAQPage Schema
How do I generate Storybook stories for Spark UI components?▼

You generate Storybook stories by providing the target Spark UI component name, which produces a ComponentName.stories.tsx file structured with Default, Uncontrolled, and Controlled variants.

What is the best way to create MDX documentation for my Spark UI stories?▼

The best way to create MDX documentation is to automate the generation of ComponentName.doc.mdx files, ensuring your component documentation stays aligned with Spark UI guidelines.

How do I keep Storybook MDX docs in sync when updating Spark UI components?▼

You keep Storybook MDX docs in sync by regenerating the ComponentName.doc.mdx and stories files, ensuring component documentation references stay updated as components evolve.

Do I need a specific Storybook project setup to generate Spark UI component docs?▼

You need a frontend project that already uses Storybook and MDX to generate the Spark UI component stories and documentation files without additional dependencies.

Can I add Uncontrolled and Controlled variants to existing Spark UI Storybook stories?▼

Yes, you can update existing Spark UI Storybook stories to include Uncontrolled and Controlled variants by regenerating the ComponentName.stories.tsx file with the required structural variants.

What are the limitations of automating Storybook documentation generation for Spark UI?▼

The automation is limited to generating and updating ComponentName.stories.tsx and ComponentName.doc.mdx files specifically for Spark UI components, following its established variant structure.

Related Skills

Explore More Software Engineering Skills→
vecearvecear

storybook-setup

Automate Storybook setup, configuration, and CSF3 story authoring for frontend projects.

Community
Intermediate
PMDevSolutionsPMDevSolutions
7

storybook-story-generation

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

Official
Advanced
HouseGarofaloHouseGarofalo
3

storybook

Document and test React UI components with Storybook stories and MDX.

Official
Intermediate
iButtersiButters
3

storybook

Create CSF 3.0 Storybook stories for React components with MDX documentation.

Community
Advanced