docs-sandpack
Claude Code React docs-sandpack 技能：在 MDX 加入可交互的多文件示例
EnglishClaude Code 安装步骤
- 打开固定版本的仓库工作副本，确认 `.claude/skills/docs-sandpack/SKILL.md` 存在。
- 从仓库根目录启动 Claude Code，输入 `/docs-sandpack` 并描述要处理的内容与验证目标。
中文摘要
将 React 教程示例放进 Sandpack，并给各代码块标注文件名。适合把主组件和辅助组件拆开，让读者在页面上修改并观察结果。
SKILL.md 中文导读
可复现示例
为虚构的阅读列表教程加一个两文件例子。`src/App.js` 导入 `src/BookList.js`，初始有两本书，按按钮切换为只显示已读的一本。工作步骤
- 先确定一个能在页面上观察到的交互结果，再拆分主文件和辅助文件。
- 核对导入路径、代码围栏与预览，检查动作后显示的内容。
验收方法
Sandpack 应能识别两个文件，主文件导入与文件名一致。交互前显示两项，点击后只显示已读项。实际渲染结果需预览确认。
GitHub 原文 · 更新日期
适用环境
需要 Claude Code 和固定版本的 react.dev 工作副本。实际验证使用该项目已配置的文档预览。
常见问题
什么时候需要给代码围栏加文件名？
多文件示例需要用对应路径标注代码块，让导入可解析。单文件例子按项目模板使用默认入口即可。