Plan Canvas
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.
affaan-m on GitHub
Curated by PromptsEdge from a public repo · MIT license. All credit goes to the author.
What is this skill?
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.
When to use
- You just wrote a plan artifact (.claude/plans/.plan.md from /plan) and
- The user should point at what to change: reviewing designs, comparisons,
- The user asks for /plan-canvas, a visual review, or "open it in the browser".
Inspired by lavish-axi; rebuilt
ECC-native around the /plan confirmation gate, with zero dependencies.
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:
# animated "agent is thinking..." bubble; refresh it during long work
ecc-plan-canvas typing <file> --state thinking
# switch to "agent is typing..." just before a reply lands
ecc-plan-canvas typing <file> --state typing
await sets thinking for you the moment it hands you a batch, and --reply
clears it. Both states self-expire, so a crashed agent decays to an honest
"queued" instead of leaving the human watching dots forever. Refresh thinking
if a revision takes more than a minute.
4. End when review concludes: ecc-plan-canvas end <file>.
Diagrams (Mermaid)
When part of the plan is a flow, architecture, sequence, state machine, ER
model, or dependency graph, author it as a fenced ```mermaid block instead
of ASCII art or a wall of prose — the canvas renders it as a themed diagram the
human can point at. Reach for it when a picture reads faster than a paragraph;
skip it for simple lists or tables.
```mermaid
flowchart LR
A[Market resolves] --> B{Watchers?}
B -->|yes| C[Enqueue jobs] --> D[Fan-out worker]
```
Diagrams render in the ECC dark theme with the accent palette. Mermaid loads in
the browser from a pinned CDN; if that is unavailable (offline), the block
degrades to showing its source, so the review is never blocked. Point a local
mirror at ECC_PLAN_CANVAS_MERMAID_URL for air-gapped use.
Rules
- Markdown artifacts render in ECC's plan template (including Mermaid blocks);
.htmlartifacts render as-is with the annotation layer injected. For HTML authoring guidance use thefrontend-design-directionandartifact-designskills. - Edit the artifact file to revise — the canvas live-reloads on save. Never
re-run
opento refresh. {"status": "ended", "endedBy": "user"}(orsessionEnded: trueon a feedback batch) means the user closed the review: stop polling, deliver remaining updates in chat, and do not reopen. A plainopenon that session is refused; pass--reopenonly when the user asks to resume.- Sibling assets (images, CSS) must sit next to the artifact and be referenced by relative path.
- The server is loopback-only and exits after 30 idle minutes
(
ECC_PLAN_CANVAS_IDLE_MS);stopshuts it down explicitly. State lives in~/.claude/plan-canvas/(ECC_PLAN_CANVAS_STATE_DIR).
Examples
Plan approval flow — /plan writes
.claude/plans/notifications.plan.md and must WAIT for confirmation:
ecc-plan-canvas open .claude/plans/notifications.plan.md
ecc-plan-canvas await .claude/plans/notifications.plan.md
# → {"status":"feedback","items":[{"kind":"verdict","verdict":"approve"}]}
ecc-plan-canvas end .claude/plans/notifications.plan.md
# plan is confirmed — begin implementation
Revision loop — feedback arrives, you edit the file, reply, keep listening:
# await returned annotations → edit the .plan.md (canvas live-reloads)
ecc-plan-canvas await <file> --reply "Reworked the risk table."
# → blocks again until the next response
Anti-Patterns
- Polling with
--timeout-msin a loop. It exists for tests. Leave the plainawaitrunning instead. - Ending your turn with no
awaitlistening while the review is still open. That is the one failure the human experiences as "I sent a message and nothing happened". - Reading the feedback but answering only in the terminal. The human is looking at the canvas.
- Reopening after a user-initiated end "just to show" something.
- Pasting the whole plan into chat and opening a canvas — pick the canvas and keep the terminal summary to one line.
- Parsing the canvas chat from state files — everything you need arrives via
await.
Design notes and origin: docs/design/plan-canvas.md.
Install this skill
- 1
Get the skill — it’s free
Use the Get this skill panel. Unlocked skills stay in My skills. - 2
Download or clone the files
Download the zip, or clone the repo and copy theskills/plan-canvasfolder. - 3
Put it where your agent looks for skills
For Claude Code, use your personal skills folder (every project) or a project’s own folder:~/.claude/skills/plan-canvas/SKILL.md # all projects .claude/skills/plan-canvas/SKILL.md # this project only
- 4
Just ask
No command needed. The agent reads the skill’s description and loads it on its own when your request matches.
SKILL.md frontmatter
What your agent reads to decide when to load this skill.
--- name: plan-canvas description: 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. ---
Files
This skill lives in a public GitHub repo. Browse the files on GitHub ↗
Related skills
View all →- VideodbFreeSee, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio, video), and create real time alerts for events from live streams or desktop capture. Use when ingesting, indexing, searching, editing, transcoding, or alerting on video or audio content.
- Ui To VueFreeUse when the user has UI screenshots or design exports that need batch conversion into Vue 3 components, especially with Vant, Element Plus, or Ant Design Vue.
- Ui DemoFreeRecord polished UI demo videos using Playwright. Use when the user asks to create a demo, walkthrough, screen recording, or tutorial video of a web application. Produces WebM videos with visible cursor, natural pacing, and professional feel.
- TasteFreeA creative-direction (taste) layer for music videos and short-form edits in the angelcore / cloud-trance / hyperpop visual family. Distills a named-genre aesthetic vocabulary, a mood + color + light system, and a beat-synced editing grammar, then chains ECC's video skills (video-editing, fal-ai-media, remotion-video-creation, motion-*, content-engine) into one production pipeline. Use when the work is not just making a video function but making it feel intentional, when building a music video, a fancam/edit, a moodboard-driven reel, or when choosing a coherent visual direction for AI-generated b-roll.