plan-canvas

Opens plan artifacts in a browser canvas for annotated review and approval verdicts.

Updated May 7, 2026
One-click install
npx skills add https://github.com/mirzadham/trainingroombookingsystem2 --skill plan-canvas-mirzadham
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: plan-canvas
Source: https://github.com/mirzadham/trainingroombookingsystem2/tree/main/.agent/.agents/skills/plan-canvas
Command: npx skills add https://github.com/mirzadham/trainingroombookingsystem2 --skill plan-canvas-mirzadham

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Getting plan approval usually means pasting a plan into chat and waiting for a typed yes, which loses precision when feedback refers to specific sections. This Skill serves local plan and HTML artifacts in a browser where the reviewer annotates exact elements, chats, and returns an approve or request-changes verdict as structured JSON. ## Core Features & Use Cases - Browser Annotation Review: Renders Markdown plans (including Mermaid diagrams) or HTML artifacts on a local loopback server with an annotation layer anchored to page elements. - Blocking Feedback Loop: The await CLI command blocks until the human responds, returning annotations, chat messages, and verdicts as JSON. - Live-Reload Revision Cycle: Edit the artifact file and the canvas refreshes automatically, keeping the review loop going until approval. - Use Case: After writing .claude/plans/feature.plan.md, open it in the canvas, block on await, receive anchored feedback like "Split this into two phases" on a specific heading, revise, and get an approve verdict to start implementation. ## Quick Start Open my plan file in the browser canvas and wait for my annotated feedback and approval verdict.

Frequently Asked Questions about plan-canvas

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I get a plan approved in the browser instead of chat?▼

Run `ecc-plan-canvas open <file>` to render the plan in the browser, then `ecc-plan-canvas await <file>` to block until the reviewer responds. An approve verdict in the returned JSON means the plan is confirmed and implementation can begin.

How do I collect annotated feedback on a Markdown plan?▼

Open the Markdown file with the plan-canvas CLI; reviewers click elements to attach annotations anchored by CSS selector and text snippet. The await command returns each annotation as JSON with its anchor, so you know exactly which section to revise.

Does plan-canvas render Mermaid diagrams?▼

Yes, fenced mermaid code blocks in Markdown artifacts render as themed diagrams in the canvas. Mermaid loads from a pinned CDN and degrades to showing source when offline; a local mirror can be set via ECC_PLAN_CANVAS_MERMAID_URL.

Can I use plan-canvas for code review or remote URLs?▼

No, the canvas serves local Markdown and HTML artifact files only. It is not intended for diff-based code review, running web applications, or loading remote URLs.

What happens if the await command is interrupted?▼

Re-run the await command; queued feedback is never lost because state persists in ~/.claude/plan-canvas/. The loopback server is shared across sessions and keyed by artifact path, so no session IDs need tracking.