Skip to main content
affpapa.org
RU EN
skill CX Codex

docs-canvas — Claude Code skill: what it does, how to install

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

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add cursor/plugins --skill docs-canvas -a claude-code
Open on GitHub

What docs-canvas 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.

What it helps with

  • 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 for the agent

  • 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

How to install docs-canvas

1Skills CLI (Vercel)

npx skills add cursor/plugins --skill docs-canvas -a claude-code

2Manually: put the files in place

~/.claude/skills/docs-canvas/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/docs-canvas/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about docs-canvas

How to install docs-canvas in Claude Code?

Run npx skills add cursor/plugins --skill docs-canvas -a claude-code in your terminal. This creates ~/.claude/skills/docs-canvas/SKILL.md.

What does docs-canvas do?

It organizes architecture notes, walkthroughs, and API references into an interactive canvas layout with cards, diagrams, and a table of contents.

What prerequisites are needed for docs-canvas?

It relies on local canvas instructions in ~/.cursor/skills-cursor/canvas/SKILL.md and TypeScript definitions in ~/.cursor/skills-cursor/canvas/sdk/index.d.ts.

Similar skills

Everything for Writing and docs →
obsidian-canvas-creator axtonliu Turns text into a JSON Canvas file that Obsidian opens as an interactive board. Choose a radial mind map or a freeform layout with grouped zones. CX Codex +1 2,000installs component-canvas ibelick Builds a full-screen canvas where your project's components show up as they actually behave, with pan, zoom and variant comparisons. Useful when you need the whole design system in one view. CX Codex +1 685installs create-canvas ibelick This skill builds a freeform canvas inside your project so UI variants sit side by side, move around, and get compared without a page reload. CX Codex +1 381installs html-diagram plannotator Generates standalone interactive HTML diagrams without external services or build steps. Helps visualize component topology, state transitions, timelines, and quantitative structures. CX Codex +1 4,100installs startup-canvas phuryn A skill that generates a Startup Canvas for new products, combining a 9-section Product Strategy with Business Model (costs and revenue). Use it when launching a product or testing a startup idea. CX Codex +1 3,200installs recommendation-canvas deanpeters Evaluates AI product proposals across business goals, PESTEL threats, and solution hypotheses. Built for product managers defending new AI initiatives before leadership. CX Codex +1 2,100installs

From the same set45

continual-learning A skill that runs the continual-learning loop: distill past chats into AGENTS.md, with all the actual work handed to the agents-memory-updater subagent. CX Codex +1 1,500installs cli-for-agents Designs and audits terminal tools so coding agents can run commands headlessly without getting stuck in interactive menus. CX Codex +1 1,400installs review-plugin-submission Audits a Cursor plugin for marketplace readiness: manifest, component metadata, discovery paths, docs quality. CX Codex +1 1,200installs create-plugin-scaffold Builds a Cursor plugin scaffold: manifest, component folders and a marketplace entry. Handy when a plugin starts from an empty folder. CX Codex +1 1,200installs orchestrate This skill splits a large goal across parallel Cursor cloud agents and gathers their handoffs. It runs only when the user explicitly calls /orchestrate. CX Codex +1 1,200installs cursor-sdk A skill for anyone driving Cursor agents from TypeScript: which call shape to use, local or cloud runtime, and where errors come from. CX Codex +1 1,200installs ralph-loop A skill that keeps feeding the same prompt back to the agent after every turn, so each pass builds on the previous one. CX Codex +1 1,000installs create-learning-path A skill that turns a topic into a study plan with milestones, timed checkpoints and practice exercises. CX Codex +1 977installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor