Claude Code docs-components for React MDX Callouts
Choose Note, Pitfall, or DeepDive while editing the React documentation. The skill also checks spacing, heading levels, and anchors in MDX learning guides and API references.
中文Install in Claude Code
Use Claude Code in the pinned react.dev checkout and the project's documentation preview to inspect the rendered page.
- Confirm `.claude/skills/docs-components/SKILL.md` in the pinned react.dev checkout.
- Start Claude Code at the repository root and call `/docs-components` with the MDX file and the proposed callout text.
Example task
In a fictional state tutorial, add a titled warning about reading a stale value twice in an event handler. Add a separate expandable explanation of update batching.What to check
The warning should use a Pitfall with a level-five heading and ID. The explanation should use a DeepDive beginning with a level-four heading and ID. Check the blank line after each opening tag.
Original SKILL.md on GitHub · Updated
Frequently asked question
Should a terminology clarification and a common source of bugs use the same component?
Use Note for a terminology clarification. Use Pitfall for a mistake readers are likely to make and explain when the bug appears.