component-doc

Generate and update MDX component documentation for Skyroc Web UI.

785|169|Updated Aug 8, 2024
One-click install
npx skills add https://github.com/Ohh-889/skyroc-admin --skill component-doc
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: component-doc
Source: https://github.com/Ohh-889/skyroc-admin/tree/main/.agents/skills/component-doc
Command: npx skills add https://github.com/Ohh-889/skyroc-admin --skill component-doc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automatically generates and updates MDX documentation for Skyroc Web UI components by aligning source, playground demos, and existing docs into a consistent component-docs structure.

Core Features & Use Cases

  • Automatic discovery of component sources, demos, and documentation across mono-repo layout.
  • MDX generation and synchronization with apps/web-ui-docs content guidelines, including props/type tables and live demos.
  • Use case: when a new component like Button is added or an existing one changes, generate or refresh its docs automatically to reflect the latest API and examples.

Quick Start

Create or refresh the MDX documentation for a given component by locating its source, playground, and existing docs, then update apps/web-ui-docs/content/docs/components/<slug>.mdx.

Frequently Asked Questions about component-doc

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

FAQPage Schema
How do I automatically generate MDX documentation for UI components?

To automatically generate MDX documentation for UI components, use a tool that locates component source code and playground demos to create structured docs. This Skill automates that process by aligning source files with existing documentation to output consistent MDX.

What is the best way to keep component docs in sync with source code changes?

The best way to keep component docs in sync with source code changes is to automate synchronization between your repository and documentation. This Skill refreshes existing MDX files by detecting source and demo updates to reflect the latest API.

How do I add MDX frontmatter and Props tables to my component documentation?

You add MDX frontmatter and Props tables by generating documentation that adheres to specific content guidelines. This Skill automatically structures your docs to include frontmatter, live Demo references, and Props/Type tables based on source code.

Can I use this documentation generator with a monorepo UI component library?

Yes, you can use this documentation generator with a monorepo UI component library. It automatically discovers component sources, demos, and existing documentation across a monorepo layout to update the correct MDX files.

How do I update existing component MDX files without losing cross-page type references?

To update existing component MDX files without losing cross-page type references, use a documentation tool that preserves internal linking structures. This Skill ensures generated documentation maintains necessary cross-page type references and doc structure.