plan-canvas
Opens plans and artifacts in a browser window for you to comment on. It makes giving visual feedback on needed changes easier.
What it does
This tool lets you show a plan or a design to someone for review directly in their web browser. They can point to exactly what they want to change, ask questions, and approve or request modifications, all without leaving the page.
When to use it
- ✓When you need someone to approve a plan or a design.
- ✓When it's easier to point out what needs changing than to describe it in text.
- ✓When you want someone to review a local file (like .md or .html) and provide feedback.
Example of what to ask your AI
“Open the file 'my_plan.md' in the browser for review and wait for feedback.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
The tool opens the file on a webpage and waits for the person to interact. It notifies you when they approve or request changes, showing exactly where they pointed.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add affaan-m/ECC --skill plan-canvasOr download just the file:
curl -L https://raw.githubusercontent.com/affaan-m/ECC/main/skills/plan-canvas/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
Plan Canvas
Review loop for plans and visual artifacts: you write the artifact, the human reviews it in the browser — annotating the exact element they mean, chatting, and delivering an Approve plan / Request changes verdict — while you block on a single CLI call that returns their feedback as JSON.
Inspired by lavish-axi; rebuilt
ECC-native around the /plan confirmation gate, with zero dependencies.
When to Use
- You just wrote a plan artifact (
.claude/plans/*.plan.mdfrom/plan) and need the CONFIRM/approve decision — the canvas verdict replaces a typed "yes/proceed". - The user should point at what to change: reviewing designs, comparisons,
reports, or any local
.md/.htmlartifact. - The user asks for
/plan-canvas, a visual review, or "open it in the browser".
Do NOT use for: code review of diffs (/code-review), running web apps, or
remote URLs. The canvas serves local artifact files only.
How It Works
Invoke the CLI as ecc-plan-canvas — the bin shipped by the ecc-universal
package (on PATH after a global/plugin install; node "$CLAUDE_PLUGIN_ROOT/scripts/plan-canvas.js"
also works for plugin installs). Run it from the project you are reviewing in;
it works from any working directory. It manages a detached loopback server
(127.0.0.1:4517) shared by all sessions, keyed by artifact path — no session
ids to track.
The workflow is a plain CLI-plus-JSON loop, so it is model- and harness-agnostic:
any agent that can run a shell command and read stdout drives it the same way
(Claude Code, Codex, Cursor, Gemini, OpenCode, Copilot). Trigger it however your
harness surfaces skills — e.g. /plan-canvas in Claude Code, $plan-canvas in
Codex — or just run the ecc-plan-canvas commands directly.
# 1. Open the artifact in the user's browser (returns immediately)
ecc-plan-canvas open .claude/plans/feature.plan.md
# 2. Block until the human responds. Leave running; re-run if interrupted:
# queued feedback is never lost.
ecc-plan-canvas await .claude/plans/feature.plan.md
Stay listening, or the human talks to an empty chair
Feedback only reaches you while an await is actually parked on the session.
If your turn ends with nothing listening, the message sits in the queue and,
from the human's side of the glass, sending appears to do nothing at all.
So run await as a background task when your harness supports one (in
Claude Code, a Bash call with run_in_background: true). It exits the moment
feedback arrives and the harness hands you the JSON, which keeps the loop alive
across turns instead of dying with the foreground call. A foreground await
works too, but only until the harness time-limits it.
Two backstops exist, and neither is an excuse to skip the above:
ecc-plan-canvas pendinglists feedback queued with no listener. Check it whenever you are unsure whether you missed something.- The
stop:plan-canvas-pendinghook blocks your turn from ending while canvas feedback is undelivered, and hands you the messages. If you are reading feedback from that hook, you stopped listening too early.
await prints JSON when the human acts:
{
"status": "feedback",
"items": [
{ "kind": "annotation", "text": "Split this into two phases",
"anchor": { "selector": "h2:nth-of-type(3)", "tag": "h2", "snippet": "Phase 2: Migration" } },
{ "kind": "verdict", "verdict": "request-changes" }
]
}
kind: "chat"— freeform message; answer in the canvas, not the terminal.kind: "annotation"— feedback anchored to an element (anchor.selector,anchor.snippetshow what they pointed at;anchor.textRange.textwhen they highlighted a passage).kind: "verdict"—approvemeans the plan is CONFIRMED: stop polling, end the session, and start implementing.request-changesmeans revise the artifact (the canvas live-reloads it) and keep the loop going.
3. Always respond in the canvas, then keep listening. One command does both:
ecc-plan-canvas await <file> --reply "Split Phase 2 as requested. Take a look."
Every human message gets a reply in the canvas, even a one-liner like "On it, rewriting the risk table now." Silence in the chat panel is indistinguishable from a broken canvas, which is exactly the failure this loop exists to prevent. Answer there, not only in the terminal.
While you work, keep the chat honest with the activity indicator:
…
FAQ
What happens if the person doesn't give feedback?
The tool keeps waiting. If you're not listening, the person can see that their feedback is queued to be sent.
Can I use this to review code?
No, this tool is for plans and designs, not for code review or running web applications.
How does the person point out what they want to change?
They can click directly on elements on the page or select a piece of text to provide their feedback.
Details
Original description by the author
Open plans and HTML artifacts in a local browser canvas where the human annotates elements, chats, and approves or requests changes without leaving the page. Use when presenting a plan for review, or when feedback like "move this, change that" is easier pointed at than typed.
repo: affaan-m/ECC
Popularity
- GitHub stars
- 280k
- Ranking position
- #254
- License
- MIT
- Updated
- 10/15/2026
Comments
- …
More skills from this repository
accessibility
Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.
affaan-m/ECC
agent-architecture-audit
Makes your agent check if everything is working correctly. It finds and fixes problems in AI systems, ensuring they perform as expected.
affaan-m/ECC
agent-eval
Helps your agent compare different AI coding tools. It measures which one is faster, cheaper, and more reliable for specific tasks.
affaan-m/ECC
agent-harness-construction
Makes your agent better understand how to perform tasks. It optimizes the tools and instructions the agent uses to increase its chances of success.
affaan-m/ECC
Similar skills
context-engineering
Optimizes the initial setup and rules for the agent. It's useful for ensuring the agent has the right context to perform tasks efficiently and with quality.
addyosmani/agent-skills
doubt-driven-development
Questions all important decisions before they are made. It's useful when accuracy is crucial, to ensure there are no hidden flaws and that the plan is robust.
addyosmani/agent-skills
idea-refine
Transforms vague ideas into clear, actionable plans. Helps think through different options and choose the best path forward.
addyosmani/agent-skills