Claude Code React Docs Sandpack Skill for Interactive MDX Examples

Add interactive React examples to MDX and name the files in the code fences. Split the entry and helper components so a reader can edit them in the preview.

中文

Install in Claude Code

Use Claude Code in the pinned react.dev checkout and verify rendering with its configured documentation preview.

Open the pinned repository checkout and confirm `.claude/skills/docs-sandpack/SKILL.md` is present.
Start Claude Code in the repository root and call `/docs-sandpack` with the work and its verification goal.

Example task

Add a two-file reading-list example. src/App.js imports src/BookList.js, starts with two books, and offers a button that shows the one completed book.

What to check

Sandpack should recognize both files and resolve the import. Two items display initially and one after clicking. Confirm the rendered behavior in the preview.

Original SKILL.md on GitHub · Updated 2026-11-13

Frequently asked question

When do code fences need filenames?

Name the files in a multi-file example so imports resolve. A simple single-file example can use the project's default entry.