plan-canvas

Featured

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.

AI & Automation 267,712 stars 39986 forks Updated yesterday MIT

Install

View on GitHub

Quality Score: 96/100

Stars 20%
100
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# 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](https://github.com/kunchenguid/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 harn...

Details

Author
affaan-m
Repository
affaan-m/ECC
Created
8 months ago
Last Updated
yesterday
Language
JavaScript
License
MIT

Integrates with

Bundled in these plugins

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Listed

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.

0 Updated 6 days ago
kuldeep7ke
Web & Frontend Listed

plan-canvas

Present a plan for a visual/UX feature as an annotatable HTML canvas rendered in the project's own design tokens, instead of a markdown wall of text. MUST USE when the user says "use plan canvas" or "plan canvas". Also use when planning a UI feature, redesign, layout change, or component where competing options are easier to judge by seeing them than by reading them - and BEFORE building a new page or a decorative element the user describes by style rather than by spec ("add a sketch-style underline", "add a podcast page with their bios and logo"), or before porting a section from another site ("bring these testimonials over from my other site"). Skip for pure backend/logic/data plans, which stay as a text checklist.

0 Updated 2 days ago
brewed-ops
Code & Development Listed

visual-plan

Plan visually instead of dumping markdown: structure a plan as typed, lint-able blocks (.harness/plan/blocks.json — diagrams, wireframes, decisions, annotated real code, questions), render it to a plan.html derived entirely from ground truth (FEATURES.json, telemetry.jsonl, git), and serve it locally so the human reviews IN the page — pinned comments land in tracked comments.jsonl and BLOCK the features they cite until resolved with an answer. Use whenever someone says "visual plan", "/vplan", "plan this feature", "show me the plan", "make the plan reviewable", wants to review or comment on a plan, says "address my comments" / "/address-comments", or asks to see plan status rendered. Also use to structure a captured plan-mode plan (blocks tagged needs-structuring from the ExitPlanMode hook). The defining rule: the plan is a RENDERING of ground truth plus authored blocks — never a second source of truth; plan.html is generated and never hand-edited. Do NOT use for seeding a fresh repo's harness (that is conduc

0 Updated 2 weeks ago
scoobydrew83