What files does this skill generate for a new component?

It creates an MDX page in 'app/components/', multiple TSX example files in 'specs/examples/', and updates the 'specs/examples.mjs' registry.

How does it handle Medusa's specific writing style?

The skill is programmed with Vale compliance rules, ensuring correct terminology like 'ecommerce' and proper capitalization of 'Medusa Admin'.

Does it automatically document component props?

Yes, it uses the ComponentReference component which pulls from auto-generated JSON specs to display TypeScript prop documentation.

Can I use it to update existing documentation?

Absolutely. It can research existing components, identify missing variants, and generate the necessary code to expand existing documentation.

Medusa UI Component Documenter

Name: Medusa UI Component Documenter
Author: medusajs

bymedusajs

•

31,823

Design Tools

Generates comprehensive, live-example-driven documentation for Medusa UI components following strict architectural patterns.

About

This skill transforms Claude into an expert technical writer for the Medusa UI design system, streamlining the creation of component documentation within the Medusa project structure. It automates the generation of MDX pages, interactive TSX examples (including variants and states), and the necessary updates to the example registry. By analyzing component source code and TypeScript interfaces, it ensures that every UI element is accurately documented with functional previews and clear API references, all while maintaining compliance with Medusa's specific style guides and Vale linting rules.

Key Features

Automated MDX documentation page generation with metadata
Vale style guide compliance for technical writing
Automatic Example Registry (examples.mjs) management
31,823 GitHub stars
TypeScript prop analysis and API reference integration
Interactive TSX example creation for variants, states, and sizes

Use Cases

Updating existing component documentation to reflect API changes
Documenting new UI components added to the Medusa design system
Adding interactive examples for component states like loading or disabled

About

Key Features

Automated MDX documentation page generation with metadata
Vale style guide compliance for technical writing
Automatic Example Registry (examples.mjs) management
31,823 GitHub stars
TypeScript prop analysis and API reference integration
Interactive TSX example creation for variants, states, and sizes

Use Cases

Updating existing component documentation to reflect API changes
Documenting new UI components added to the Medusa design system
Adding interactive examples for component states like loading or disabled