# docs-canvas

Turns architecture notes, API specs, and walkthroughs into an interactive Cursor Canvas with navigation and diagram cards.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1200 installs · ★ 14099
- Author: cursor
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/cursor/plugins/tree/HEAD/docs-canvas/skills/docs-canvas/SKILL.md
- Updated: 2026-10-25
- HTML: https://affpapa.org/en/nevibecode/skills/docs-canvas

## What it does

This skill guides the agent to convert technical docs into an interactive canvas layout instead of flat markdown. It accepts markdown directories or codebase questions. The generated canvas features an overview card, a sticky table of contents, and cross-references to project files. Visual content relies on native cards, tables, and mermaid diagrams.

The skill currently exists as an outline in the repository. Full component styling expects rules from `~/.cursor/skills-cursor/canvas/SKILL.md` and TypeScript definitions in `~/.cursor/skills-cursor/canvas/sdk/index.d.ts`. Without these local files, the agent can only produce a generalized layout.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add cursor/plugins --skill docs-canvas -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/docs-canvas/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/docs-canvas/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add cursor/plugins --skill docs-canvas -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/docs-canvas/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add cursor/plugins --skill docs-canvas -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/docs-canvas/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install cursor/plugins docs-canvas
```

2. **Manually: put the files in place**
- File: `.github/skills/docs-canvas/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add cursor/plugins --skill docs-canvas -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/cursor/plugins --path docs-canvas/skills/docs-canvas
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/docs-canvas/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add cursor/plugins --skill docs-canvas -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/cursor/plugins/tree/HEAD/docs-canvas/skills/docs-canvas/SKILL.md

## When to use it
- convert flat markdown files into an interactive documentation canvas
- generate architecture walkthroughs with diagrams and source links
- render API references with structured tables and runnable examples
- build navigable codebase runbooks with a table of contents

## Example prompts
- Create a docs canvas for our architecture using markdown files in docs/
- Render an API reference canvas with parameter tables and examples
- Build an interactive docs canvas walkthrough for the authentication flow

## Similar
- [obsidian-canvas-creator](https://affpapa.org/en/nevibecode/skills/obsidian-canvas-creator.md) — skill · 2000 installs
- [component-canvas](https://affpapa.org/en/nevibecode/skills/component-canvas.md) — skill · 685 installs
- [create-canvas](https://affpapa.org/en/nevibecode/skills/create-canvas.md) — skill · 381 installs
- [html-diagram](https://affpapa.org/en/nevibecode/skills/html-diagram.md) — skill · 4100 installs
- [startup-canvas](https://affpapa.org/en/nevibecode/skills/startup-canvas.md) — skill · 3200 installs
- [recommendation-canvas](https://affpapa.org/en/nevibecode/skills/recommendation-canvas.md) — skill · 2100 installs

From the same set: [cursor/plugins](https://affpapa.org/en/nevibecode/by/cursor/plugins.md) — 45 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md