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.
Install
/plugin marketplace add affaan-m/ECCThe repo is a Claude Code plugin marketplace. Run /plugin afterwards to pick the plugin that includes this skill.
npx skills add affaan-m/ECC --skill plan-canvasgit clone --depth 1 https://github.com/affaan-m/ECC.git /tmp/ECC
mkdir -p ~/.claude/skills
cp -r /tmp/ECC/.agents/skills/plan-canvas ~/.claude/skills/plan-canvasPersonal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.
From the SKILL.md
# 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.
Details
- Skill name
plan-canvas- Repository
- affaan-m/ECC
- Path
.agents/skills/plan-canvas/SKILL.md- License
- MIT
- Repo updated
- 30 October 2026
- Listed in
- hesreallyhim/awesome-claude-code
FAQ
What does the Plan Canvas skill do?
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.
How do I install the Plan Canvas skill?
Claude Code plugin: /plugin marketplace add affaan-m/ECC. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.
Is Plan Canvas popular?
It lives in affaan-m/ECC, which has 293,665 GitHub stars and 43,456 forks, and is included in 1 curated skill list.
Related skills
Accessibility
294kaffaan-m/ECC
WCAG 2.2 レベル AA 標準を用いてインクルーシブなデジタルプロダクトを設計・実装・監査します。Web 用のセマンティック ARIA および Web・ネイティブプラットフォーム(iOS/Android)のアクセシビリティトレイトを生成するために使用します。
Agent Architecture Audit
294kaffaan-m/ECC
エージェントおよび LLM アプリケーション向けのフルスタック診断。12 層のエージェントスタックにおけるラッパーリグレッション、メモリ汚染、ツール規律の失敗、隠れた修復ループ、レンダリング破損を監査します。重要度順の発見事項とコードファーストの修正を生成します。エージェントアプリケーション、自律ループ、または LLM を活用した機能を構築する開発者に必須です。
Agent Eval
294kaffaan-m/ECC
カスタムタスクでコーディングエージェント(Claude Code、Aider、Codex など)をヘッドツーヘッドで比較し、合格率、コスト、時間、一貫性のメトリクスを測定します
React Patterns
294kaffaan-m/ECC
React 18/19 patterns including hooks discipline, server/client component boundaries, Suspense + error boundaries, form actions, data fetching, state management decision trees, and accessibility-first composition. Use when writing or reviewing React components.
Nextjs Turbopack
294kaffaan-m/ECC
Next.js 16+とTurbopack — インクリメンタルバンドリング、FSキャッシング、開発速度、Turbopackとwebpackをいつどちらかどうかを選ぶか。
UI Demo
294kaffaan-m/ECC
Playwrightを使用して美しいUIデモ動画を録画する。ユーザーがWebアプリのデモ、ウォークスルー、スクリーン録画、またはチュートリアル動画の作成を求める場合に使用する。可視カーソル、自然なリズム、プロフェッショナルな仕上がりのWebM動画を生成する。
Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.