skills.rest
LedgerHQ
LedgerHQOFFICIAL
Explore all skills by this author →
WebsiteGitHub

component-mdx

Writes Storybook MDX component docs using the two-tab Overview and Implementation structure.

23|5|Updated Apr 3, 2025
Search Tags:#documentation#react#design system#storybook#mdx#component docs#source block
One-click install
npx skills add https://github.com/LedgerHQ/lumen --skill component-mdx-ledgerhq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-mdx
Source: https://github.com/LedgerHQ/lumen/tree/main/.claude/skills/component-mdx
Command: npx skills add https://github.com/LedgerHQ/lumen --skill component-mdx-ledgerhq

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Component documentation in Storybook often drifts out of sync with actual stories, duplicates code snippets, or ignores the design system's structure. This Skill enforces a consistent two-tab MDX documentation format so docs stay accurate and maintainable. ## Core Features & Use Cases - Two-Tab Structure Enforcement: Ensures every component doc uses Overview (anatomy, properties, accessibility) and Implementation (setup, code examples) tabs. - Story-Backed Code Examples: Requires <Source of={ComponentStories.StoryName} /> instead of hand-written fenced code blocks, keeping snippets in sync with Storybook. - Design-System Table Markup: Provides a copy-paste table template in references/tables.md using design tokens like body-2, text-accent, and border-muted. - Use Case: When documenting a new Button component, generate an MDX file with the required tab structure, link each code example to its story, and format any tables with the correct design-system tokens. ## Quick Start Write the Storybook MDX documentation for my component following the two-tab Overview and Implementation structure with story-backed Source examples.

Frequently Asked Questions about component-mdx

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

FAQPage Schema
How do I write Storybook MDX documentation for a component?▼

Structure the MDX file with two tabs: an Overview tab covering introduction, anatomy, properties, and accessibility, and an Implementation tab with setup notes and code examples. Use the CustomTabs and Tab components with a Meta block pointing to the component's stories.

How do I show code examples in Storybook MDX docs?▼

Use the Source block with a story reference, such as <Source of={ComponentStories.Base} />, instead of hand-written fenced code blocks. This keeps the snippet in sync with the actual story, especially when stories use dynamic types that reflect control changes.

When should I use fenced code blocks instead of Source in MDX?▼

Use fenced code blocks only when no story covers the snippet, such as one-off prop combinations. If a matching story exists, always prefer the Source block so the documentation stays synchronized with Storybook.

How do I add tables to Storybook MDX documentation?▼

Copy the table markup template from references/tables.md, which uses design-system tokens like body-2 typography, text-accent and text-muted colors, p-12 spacing, and border-muted borders. Avoid raw Tailwind palette classes like text-gray in table markup.

Why is my MDX documentation flagged during review?▼

Common issues include missing the two-tab Overview/Implementation structure, duplicating story code in fenced blocks where a Source reference exists, referencing removed or renamed props, or using raw Tailwind palette classes in tables instead of design tokens.

Related Skills

Explore More Software Engineering Skills→
TheBushidoCollectiveTheBushidoCollective
187

storybook-story-writing

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

Official
Intermediate
brainbrewlabsbrainbrewlabs
7

doc-publishing

Publishes documentation to GitHub Pages, Vercel, or Netlify from source docs and build outputs.

Official
Intermediate
ntaksh42ntaksh42

generate-props-documentation

Parse Astro component Props definitions and generate Markdown documentation.

Community
Advanced
TheBushidoCollectiveTheBushidoCollective
187

storybook-component-documentation

Generate Storybook component documentation with autodocs, MDX pages, and JSDoc comments.

Official
Intermediate