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.

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

01Automated MDX documentation page generation with metadata

02Vale style guide compliance for technical writing

03Automatic Example Registry (examples.mjs) management

0431,823 GitHub stars

05TypeScript prop analysis and API reference integration

06Interactive TSX example creation for variants, states, and sizes

Use Cases

01Updating existing component documentation to reflect API changes

02Documenting new UI components added to the Medusa design system

03Adding interactive examples for component states like loading or disabled

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add medusajs/medusa ui-component-doc

For use in Claude.ai and ChatGPT

Download Skill