关于 docs-canvas
docs-canvas 是一项 Cursor skill，可将文档或代码库资料整理为可交互、可导航的画布。其大纲涵盖章节、代码、图表和引用；README 说明完整 skill 内容仍为占位状态。
主要功能
- 01文档画布布局
- 02规划导航与内容章节
- 03呈现代码块和图表
- 04添加提示框、表格与引用
适用场景
- 01交互式展示架构说明
- 02构建可导航的 API 参考
- 03制作代码库导览
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/docs-canvas确认已加载。
详细介绍
文档画布
构建一个用于呈现文档的画布——无论是架构说明、API 参考、设计文档、运维手册，还是代码库导览——都将其展示为可交互、可导航的界面，而不是扁平的 Markdown 文件。
状态： 占位内容。技能结构已就绪，因此画布欢迎页可以通过市场查询展示此插件，但完整的技能正文仍待编写。请将以下步骤视为初步提纲，并随着文档画布模式日趋成熟不断完善。
前提条件
请先阅读 ~/.cursor/skills-cursor/canvas/SKILL.md。其中包含你必须遵循的生成策略、设计指南、劣质内容规则、自检要求和文件路径约定。完整的组件和 Hook 接口定义在 ~/.cursor/skills-cursor/canvas/sdk/index.d.ts 及其同级 .d.ts 文件中——请阅读这些文件，了解准确的导出项和属性结构，不要凭猜测行事。
收集源材料
接受以下任一材料：Markdown 文件目录、单个文档 URL、内联提纲，或一个需要根据代码库作答的问题。收集标题、代码块、图表，以及文档之间的交叉引用。
规划画布布局
在编写任何组件之前，先确定顶层结构。文档画布通常包含：
- 概览 — 简短的摘要卡片，说明文档的目的、范围和受众。
- 目录 — 可导航的章节列表，最好固定或粘滞显示，方便读者跳转。
- 正文部分 — 每个逻辑单元对应一个部分（架构、API、示例、注意事项）。每个部分都可以混合使用正文、代码块、图表和提示框。
- 参考资料 — 相关文档、源文件、RFC 和外部资料的链接。
使用画布原语进行渲染
优先使用内置画布组件，而不是原始 HTML：
- 使用卡片/分区，以可视化方式归类相关内容。
- 使用带语法高亮的代码块展示代码片段。
- 使用图表（DAG 布局、mermaid）呈现架构。
- 使用提示框标注“重要”“警告”“注意”“已弃用”。
- 使用表格展示 API 参数列表和选项矩阵。
语气与内容
撰写面向读者的正文。先给出答案或要点，再进行说明。示例应简短且可运行。使用 code references 引用源文件，方便读者查看。
发挥创意
以上各部分是最低要求，而不是上限。目标是让读者以最快速度理解主题——因此请审视手头的源材料，并思考哪种呈现方式真正有帮助。图表、时序图、并排对比、决策树、术语表、精选常见问题、完整的大型示例——选择最合适的形式。