generate-component-documentation

Generate Markdown documentation for new components using existing docs templates.

12.5k|757|Updated Jun 13, 2024
One-click install
npx skills add https://github.com/longbridge/gpui-component --skill generate-component-documentation-longbridge
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: generate-component-documentation
Source: https://github.com/longbridge/gpui-component/tree/main/.claude/skills/generate-component-documentation
Command: npx skills add https://github.com/longbridge/gpui-component --skill generate-component-documentation-longbridge

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Writing documentation for every new component is time-consuming and prone to inconsistency. This skill automates and standardizes component documentation, ensuring all components follow a shared structure and style.

Core Features & Use Cases

  • Template-driven documentation generation that mirrors existing docs styles and layout.
  • References the same-named story implementations to align API and usage examples.
  • Produces ready-to-publish Markdown documents with a consistent structure for onboarding, design reviews, and contributor guides.

Quick Start

Run the generate-component-documentation tool on the new component to produce a standardized Markdown doc in the docs folder.

Frequently Asked Questions about generate-component-documentation

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

FAQPage Schema
How do I generate consistent Markdown documentation for new UI components?

You can generate consistent component documentation by applying established docs templates that reference existing story implementations and API notes, outputting standardized Markdown files directly into your docs directory.

Why does my component documentation end up with inconsistent structure across different files?

Component documentation becomes inconsistent when written manually without a shared template. Using a template-driven generation process that mirrors existing docs styles ensures every component follows the same standardized Markdown structure.

What do I need to prepare before automating component docs generation?

You need access to the component's source structure and the docs repository. The generation tool uses these to reference same-named story implementations and API notes to produce accurate Markdown files.

Can I link existing story references and API notes into the generated component docs?

Yes, the documentation generation process explicitly supports linking to existing story references and API notes to ensure the generated Markdown includes accurate usage examples aligned with the actual component API.

What is the best way to standardize Markdown docs for a large component library?

The best way to standardize component library docs is using a template-driven approach that automatically applies your established style guide to each new component, producing ready-to-publish Markdown documents with consistent structure.