跳到主要内容

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.

在 GitHub 打开

安装方式

cp -r .agents/skills/plan-canvas ~/.claude/skills/plan-canvas

把该 skill 目录放进客户端 skills 目录。不同客户端的目录可能不同,Claude Code 默认是 ~/.claude/skills/

整仓一次性获取:git clone --depth 1 https://github.com/affaan-m/ECC.git

依赖与权限

  • 无需 API Key
  • 需要联网访问外部服务
  • 依赖外部命令:node
  • 以上为按正文与 frontmatter 自动推断的信号,仅供参考;安装前建议先阅读原文。

SKILL.md 正文

来源 affaan-m/ECC@b92f181 · 许可 MIT · 内容未修改

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.md from /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 / .html artifact.

  • 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 pending lists feedback queued with no listener. Check it

whenever you are unsure whether you missed something.

  • The stop:plan-canvas-pending hook 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.snippet show what they pointed at; anchor.textRange.text when

they highlighted a passage).

  • kind: "verdict" — approve means the plan is CONFIRMED: stop polling,

end the session, and start implementing. request-changes means 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.

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);

.html artifacts render as-is with the annotation layer injected. For HTML

authoring guidance use the frontend-design-direction and artifact-design

skills.

  • Edit the artifact file to revise — the canvas live-reloads on save. Never

re-run open to refresh.

  • {"status": "ended", "endedBy": "user"} (or sessionEnded: true on a

feedback batch) means the user closed the review: stop polling, deliver

remaining updates in chat, and do not reopen. A plain open on that

session is refused; pass --reopen only 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); stop shuts 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-ms in a loop. It exists for tests. Leave the plain

await running instead.

  • Ending your turn with no await listening 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.

质量与来源

所属仓库
affaan-m/ECC
仓库星标
28 万
最近更新
今天
采集时间
今天
commit
b92f181b3b74
内容指纹
sha256:45b208f8551ccc3
文件路径
.agents/skills/plan-canvas/SKILL.md

同仓库其它 Skill

查看全部 50 个
agent-introspection-debugging
Structured self-debugging workflow for AI agent failures using capture, diagnosis, contained recovery, and introspection reports. Use when an agent run fails and you need a reproducible diagnosis instead of a retry.
精选 affaan-m/ECC 28 万 原文
Claude CodeCodex CLICursor
agent-sort
Build an evidence-backed ECC install plan for a specific repo by sorting skills, commands, rules, hooks, and extras into DAILY vs LIBRARY buckets using parallel repo-aware review passes. Use when ECC should be trimmed to what a project actually needs instead of loading the full bundle.
精选 affaan-m/ECC 28 万 原文
Claude CodeCodex CLICursor
api-design
REST API design patterns including resource naming, status codes, pagination, filtering, error responses, versioning, and rate limiting for production APIs. Use when designing or reviewing REST endpoints, resource names, status codes, pagination, or versioning.
精选 affaan-m/ECC 28 万 原文
Claude CodeCodex CLICursor
article-writing
Write articles, guides, blog posts, tutorials, newsletter issues, and other long-form content in a distinctive voice derived from supplied examples or brand guidance. Use when the user wants polished written content longer than a paragraph, especially when voice consistency, structure, and credibility matter.
精选 affaan-m/ECC 28 万 原文
Claude CodeCodex CLICursor
backend-patterns
Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes. Use when building or reviewing Node.js, Express, or Next.js API routes and their data access.
精选 affaan-m/ECC 28 万 原文
Claude CodeCodex CLICursor
benchmark-methodology
Use after competitive-platform-analysis has produced a tiered competitor set. Scores each competitor across nine weighted dimensions (positioning, voice, visual craft, offer packaging, evidence, enterprise-readiness, thought leadership, pricing, client's strategic tension) with explicit 1–5 rubrics and a tension-plot. Precedes competitive-report-structure.
精选 affaan-m/ECC 28 万 原文
Claude CodeCodex CLICursor

相似 Skill

更多「编码」
access
Manage Discord channel access — approve pairings, edit allowlists, set DM/group policy. Use when the user asks to pair, approve someone, check who's allowed, or change policy for the Discord channel.
精选 anthropics/claude-plugins-official 3.8 万 原文
Claude CodeMCP 客户端
configure
Set up the Discord channel — save the bot token and review access policy. Use when the user pastes a Discord bot token, asks to configure Discord, asks "how do I set this up" or "who can reach me," or wants to check channel status.
精选 anthropics/claude-plugins-official 3.8 万 原文
Claude CodeMCP 客户端
access
Manage iMessage channel access — approve pairings, edit allowlists, set DM/group policy. Use when the user asks to pair, approve someone, check who's allowed, or change policy for the iMessage channel.
精选 anthropics/claude-plugins-official 3.8 万 原文
Claude CodeMCP 客户端
configure
Check iMessage channel setup and review access policy. Use when the user asks to configure iMessage, asks "how do I set this up" or "who can reach me," or wants to know why texts aren't reaching the assistant.
精选 anthropics/claude-plugins-official 3.8 万 原文
Claude CodeMCP 客户端
access
Manage Telegram channel access — approve pairings, edit allowlists, set DM/group policy. Use when the user asks to pair, approve someone, check who's allowed, or change policy for the Telegram channel.
精选 anthropics/claude-plugins-official 3.8 万 原文
Claude CodeMCP 客户端
configure
Set up the Telegram channel — save the bot token and review access policy. Use when the user pastes a Telegram bot token, asks to configure Telegram, asks "how do I set this up" or "who can reach me," or wants to check channel status.
精选 anthropics/claude-plugins-official 3.8 万 原文
Claude CodeMCP 客户端