component-docs

Generate Markdown documentation with usage examples, props tables, and Storybook stories for local UI components.

21|2|Updated Nov 5, 2023
One-click install
npx skills add https://github.com/motormetrics/motormetrics --skill component-docs-motormetrics
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: component-docs
Source: https://github.com/motormetrics/motormetrics/tree/main/.claude/skills/component-docs
Command: npx skills add https://github.com/motormetrics/motormetrics --skill component-docs-motormetrics

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Many teams struggle to keep local UI component documentation in sync with the codebase, resulting in outdated usage guidance and missing props details.

Core Features & Use Cases

  • Generate component documentation alongside local components in apps/web/src/components or the relevant route segments.
  • Include practical usage examples, a Props table, and Storybook stories to streamline adoption and testing.
  • Provide up-to-date references to official docs for third-party components (e.g., HeroUI v3) when applicable.

Quick Start

Generate a complete component documentation file for a local component by specifying its name and source path.

Frequently Asked Questions about component-docs

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

FAQPage Schema
How do I generate documentation for local UI components?

Generate local UI component documentation by specifying the component name and source path to automatically produce Markdown files containing usage examples, props tables, and JSDoc comments. This ensures your component docs stay synchronized with the codebase.

Can I generate Storybook stories alongside Markdown documentation for my components?

Yes, component documentation generation includes optional Storybook stories to streamline component adoption and testing. It automatically outputs Markdown files with usage examples, props tables, and JSDoc comments alongside these stories.

What is the best way to keep component props tables and usage examples updated?

The best way to keep component props tables and usage examples updated is to generate documentation directly from the source code located in apps/web/src/components or relevant route segments, ensuring Markdown docs and JSDoc comments match the implementation.

Does component documentation generation work with components outside of apps/web/src/components?

Yes, component documentation generation applies to components located under apps/web/src/components as well as relevant route segments. You can target local UI components by specifying their name and source path to produce Markdown docs.

Can I include references to official third-party component documentation in my generated docs?

Yes, generated component documentation provides up-to-date references to official docs for third-party components like HeroUI v3 when applicable, alongside the generated Markdown usage examples and props tables for your local components.