docs-canvas について
Docs Canvasは、ドキュメントを平坦なMarkdown文書ではなく、操作・移動できるキャンバスにまとめるCursorスキルです。資料をセクション、図、コード、参照情報に整理する手順を示しますが、現在はプレースホルダーです。
主な機能
- 01Markdown、URL、概要、コードベースの質問に対応
- 02ナビゲーション可能な構成を計画
- 03セクションやカードで内容を表示
- 04図、コードブロック、コールアウトを使用
活用シーン
- 01アーキテクチャ資料を移動しやすいキャンバスに整理
- 02コードや図を交えてAPIリファレンスを提示
- 03運用手順書やコードベースの解説を整理
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ cursor/ plugins --skill docs-canvasインストール後、Claude Code で/docs-canvasを入力して読み込まれたか確認します。
詳細
Docs Canvas
ドキュメント(アーキテクチャのメモ、API リファレンス、設計ドキュメント、運用手順書、コードベースの解説など)を、平坦な Markdown ファイルではなく、操作して移動できるサーフェスとして提示するキャンバスを作成します。
ステータス: プレースホルダーです。スキルの構成は用意されているため、キャンバスのウェルカムページでマーケットプレイスのクエリを通じてこのプラグインを表示できますが、スキルの本文はまだ作成されていません。以下の手順は出発点として扱い、ドキュメントキャンバスのパターンが成熟するにつれて改善してください。
前提条件
まず ~/.cursor/skills-cursor/canvas/SKILL.md を読んでください。ここには、従う必要がある生成ポリシー、設計ガイダンス、粗雑な出力に関するルール、セルフチェック、ファイルパスの規約が記載されています。コンポーネントとフックの全仕様は ~/.cursor/skills-cursor/canvas/sdk/index.d.ts と同階層の .d.ts ファイルに宣言されています。推測するのではなく、正確なエクスポートとプロパティの形状を確認するために、これらを読んでください。
ソース資料を集める
次のいずれかを受け付けます。Markdown ファイルのディレクトリ、単一のドキュメント URL、インラインの概要、またはコードベースに基づいて回答する質問です。見出し、コードブロック、図、ドキュメント間の相互参照を収集してください。
キャンバスのレイアウトを計画する
コンポーネントを書く前に、最上位の構成を決めてください。ドキュメントキャンバスには通常、次の要素があります。
- 概要 — ドキュメントの目的、対象範囲、読者を簡潔にまとめたカードです。
- 目次 — セクション間を移動できるリストです。読者が各所に移動できるよう、固定表示またはスティッキー表示にするのが理想的です。
- 本文セクション — 論理単位(アーキテクチャ、API、例、注意点など)ごとに1つのセクションを設けます。各セクションには、文章、コードブロック、図、コールアウトを組み合わせて配置できます。
- 参考資料 — 関連ドキュメント、ソースファイル、RFC、外部資料へのリンクです。
キャンバスのプリミティブで表示する
生の HTML より、組み込みのキャンバスコンポーネントを優先してください。
- 関連するコンテンツを視覚的にまとめるには、カードやセクションを使用します。
- スニペットには、構文ハイライト付きのコードブロックを使用します。
- アーキテクチャには、図(DAG レイアウト、mermaid)を使用します。
- 「重要」「警告」「注記」「非推奨」には、コールアウトを使用します。
- API パラメーターの一覧やオプションの比較には、テーブルを使用します。
トーンと内容
読者に向けた文章を書いてください。まず回答または要点を示し、その後で説明します。例は小さく、実行できるものにしてください。読者がすぐに確認できるよう、code references でソースファイルを示してください。
創造性を発揮する
上記のセクションは最低限の目安であり、上限ではありません。目標は、読者がトピックをできるだけ早く理解できるようにすることです。そのため、目の前のソース資料を見て、どのような表現が実際に役立つかを考えてください。図、シーケンス図、並べて比較する形式、決定木、用語集、厳選した FAQ、大きな実例など、内容に合ったものを選んでください。