react-component-documentation

Generate MDX documentation files from React component TypeScript source code.

2|1|Updated Mar 18, 2026
One-click install
npx skills add https://github.com/noma4i/sentry-selfhosted --skill react-component-documentation-noma4i
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-component-documentation
Source: https://github.com/noma4i/sentry-selfhosted/tree/main/source/sentry/.agents/skills/react-component-documentation
Command: npx skills add https://github.com/noma4i/sentry-selfhosted --skill react-component-documentation-noma4i

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the process of creating comprehensive documentation for React components by automating the generation of structured MDX files, including API details, usage examples, and accessibility considerations.

Core Features & Use Cases

  • Automated MDX Generation: Creates detailed component documentation in the MDX format based on type definitions and code analysis.
  • Supports Design System Components: Focuses on React components following Sentry's design principles, facilitating consistent internal documentation.
  • Use Case: When a developer updates a component, this Skill can quickly generate a ready-to-publish documentation file, ensuring up-to-date guidance for design and engineering teams.

Quick Start

Invoke the react-component-documentation skill to generate a documentation file for the Button component in the Sentry component library.

Frequently Asked Questions about react-component-documentation

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

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

To generate MDX documentation for React components automatically, this Skill parses your source code and TypeScript types to produce structured files with API details, usage examples, and accessibility notes.

How does type analysis work when documenting a React design system?

Type analysis for React design system documentation works by parsing component TypeScript definitions and code structure to extract accurate API properties, ensuring comprehensive and reliable MDX guides.

Can I use this to generate usage examples for Sentry design system components?

Yes, you can use this to generate usage examples for Sentry design system components, as the Skill is specifically tailored to support and maintain documentation following Sentry's design principles.

What is the best way to keep design system docs updated when React components change?

The best way to keep design system docs updated when React components change is to automate MDX file generation, which quickly produces ready-to-publish guides reflecting the latest code and type modifications.

Do I need TypeScript to automate React component documentation generation?

Yes, TypeScript is required to automate React component documentation generation, because the Skill relies on parsing TypeScript type definitions and code structure to extract accurate API details and properties.

What should I not expect when automating MDX generation for React components?

You should not expect automated MDX generation for React components to manually write custom narrative guides, as the Skill focuses strictly on analyzing code structure and types to output API details, examples, and accessibility notes.