skills.rest
sernstberger
sernstbergerCOMMUNITY
Explore all skills by this author →
GitHub

docs-page-generator

Generate documentation pages for base-joy components with props extraction and route updates.

Updated Aug 23, 2026
Search Tags:#documentation#technical writing#component#docs#api reference#generator#playground
One-click install
npx skills add https://github.com/sernstberger/base-joy --skill docs-page-generator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: docs-page-generator
Source: https://github.com/sernstberger/base-joy/tree/main/.claude/skills/docs-page-generator
Command: npx skills add https://github.com/sernstberger/base-joy --skill docs-page-generator

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Writing comprehensive and consistent documentation for new UI components is often a tedious and overlooked task, leading to outdated or incomplete developer resources. This Skill streamlines the creation of documentation pages, ensuring clarity and consistency across your design system.

Core Features & Use Cases

  • Standardized Page Generation: Creates documentation pages with all required sections, including ComponentHeader, Playground, Examples, and API Reference.
  • Interactive Playground Setup: Configures interactive controls and code templates for live component demos, enhancing developer experience.
  • API Reference Integration: Automatically includes generated props tables, ensuring API documentation is always accurate and up-to-date.
  • Use Case: After developing a new Card component, use this Skill to generate its full documentation page, complete with interactive examples and a detailed API reference, in minutes.

Quick Start

Generate a documentation page for the Input component, ensuring it includes a playground and API reference.

Frequently Asked Questions about docs-page-generator

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

FAQPage Schema
How do I automate documentation page generation for UI components?▼

Documentation page generation automates creation of complete docs for components by analyzing source code, extracting props and features, and producing styled pages with playgrounds and API references. This eliminates manual setup and ensures consistency across your design system.

Can I generate interactive playgrounds and API references automatically?▼

Yes. The Skill configures interactive playgrounds with live code templates and automatically includes generated props tables, keeping API documentation accurate and up-to-date without manual maintenance.

What's included in an auto-generated component documentation page?▼

Generated pages include ComponentHeader, interactive Playground, Examples section, and API Reference. The Skill also updates routes and navigation configuration automatically, requiring only the component source analysis.

Does this work with base-joy components and custom UI frameworks?▼

This Skill is designed for base-joy components specifically. It handles prop parsing, variant extraction, decorators, and baseUi wiring, then updates routes and navigation within your documentation app structure.

What do I need to prepare before generating documentation?▼

Ensure your component source is complete with props like variant, color, size, and default values defined. The Skill parses this metadata to generate documentation, so well-structured component code is the primary prerequisite.

How does this handle props JSON and metadata updates?▼

The Skill runs yarn props:generate to ensure props JSON exists and is current, then updates routes in apps/docs/src/routes.tsx and navigation in apps/docs/src/config/navigation.ts automatically.

Related Skills

Explore More Content & Communication Skills→
Snowflake-LabsSnowflake-Labs
12

read-ors-configuration

A concise summary of your roleplay character: name,</name> personality, and/or behavior, formatted as a single string sentence. Typically不超过50字，此处省略

Official
Intermediate
sorodriguezzsorodriguezz

Adding Compiled Code to Customer Databases

Package compiled ObjectScript classes, routines, and globals into a deployable file.

Community
Intermediate
zm2231zm2231

style-guide-generator

Generate markdown style guides with token documentation and component catalogs.

Community
Advanced
padjeipadjei

design-systems-slds-validate

Validate Lightning Web Components for SLDS compliance and generate a detailed scorecard.

Community
Advanced