react-component-documentation
Installation
SKILL.md
Component Documentation (MDX Stories)
Create a .mdx file for a Sentry component following the conventions in static/app/components/core/.
Step 0: Gather Editorial Content
Before writing, collect the information that makes documentation useful beyond mechanical structure. Ask the user these questions — or, if they aren't available, search existing usages in the codebase (Grep for the component name across static/app/views/) to infer answers.
| Question | Where it surfaces in the docs |
|---|---|
| When should a developer reach for this component? | Introduction or a ## When to use section |
| When should they NOT use it — and what should they use instead? | > [!WARNING] callout or ## See Also with guidance |
| What does each variant/priority mean semantically? | Description in each variant's section (e.g., "danger = destructive and irreversible") |
| What do developers commonly get wrong? | > [!WARNING] callouts, icon-only accessibility notes, required prop reminders |
| Does this component require a specific parent, peer, or provider to work correctly? | Noted in the introduction or a > [!NOTE] callout |
| Are there related components that overlap in purpose? | ## See Also with one-line guidance on when to prefer each |
| Which props and variants are worth documenting with a demo? | See prop triage below |
You don't need answers to all questions for every component. Skip ones that don't apply. The goal is to not write docs that only describe how to use the API — write docs that tell developers when and why.