skills.rest
diazMelgarejo
diazMelgarejoCOMMUNITY
Explore all skills by this author →
Website𝕏@Melgarejo_yDiazGitHub

plan-canvas

Opens plan artifacts in a browser canvas for annotation and approval feedback.

Updated Mar 22, 2026
Search Tags:#markdown#mermaid#cli#feedback loop#approval workflow#plan review#browser annotation
One-click install
npx skills add https://github.com/diazMelgarejo/orama-system --skill plan-canvas-diazmelgarejo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: plan-canvas
Source: https://github.com/diazMelgarejo/orama-system/tree/main/.cursor/.agents/skills/plan-canvas
Command: npx skills add https://github.com/diazMelgarejo/orama-system --skill plan-canvas-diazmelgarejo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Getting plan approval usually means pasting a plan into chat and waiting for a typed yes, which loses precision when feedback refers to specific sections. This Skill serves local plan or HTML artifacts in a browser canvas where the reviewer annotates exact elements, chats, and returns an approve or request-changes verdict as structured JSON. ## Core Features & Use Cases - Browser-based review loop: Serves local .md and .html artifacts on a loopback server with an annotation layer, so reviewers point at the exact element they mean. - Structured feedback via CLI: The await command blocks until the human responds and returns JSON containing annotations, chat messages, and an approve or request-changes verdict. - Mermaid diagram rendering: Renders fenced mermaid blocks as themed diagrams in the canvas, degrading to source text when the CDN is unavailable. - Use Case: After /plan writes .claude/plans/notifications.plan.md, open it in the canvas, block on await, and begin implementation the moment the reviewer clicks Approve plan. ## Quick Start Open my plan file in the browser canvas and wait for my approval or annotated feedback before you start implementing.

Frequently Asked Questions about plan-canvas

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I get plan approval in the browser instead of chat?▼

Run ecc-plan-canvas open on the plan file to serve it in the reviewer's browser, then run ecc-plan-canvas await to block until they respond. The await command returns JSON containing annotations and an approve or request-changes verdict.

How do I collect annotated feedback on a Markdown plan?▼

Open the Markdown artifact with the plan-canvas CLI and the reviewer clicks elements to attach comments. Each annotation arrives via await with an anchor containing the CSS selector, tag, and text snippet of the pointed-at element.

Does plan-canvas work with remote URLs or running web apps?▼

No, the canvas serves local artifact files only, such as .md and .html files on disk. It is not intended for code review of diffs, running web applications, or remote URLs.

Can I use plan-canvas with Codex, Cursor, or other agent harnesses?▼

Yes, the workflow is a plain CLI-plus-JSON loop, so any agent that can run shell commands and read stdout can drive it. Trigger it via slash commands like /plan-canvas or run the ecc-plan-canvas commands directly.

What happens if the reviewer closes the canvas session?▼

The await command returns a status of ended with endedBy set to user, meaning you should stop polling and deliver remaining updates in chat. Reopening requires the --reopen flag and should only happen when the user asks to resume.

Why is my Mermaid diagram showing as source code in the canvas?▼

Mermaid loads from a pinned CDN in the browser, so offline environments cause the block to degrade to its source text. Point the ECC_PLAN_CANVAS_MERMAID_URL environment variable at a local mirror for air-gapped use.

Related Skills

Explore More Product & Management Skills→
langchain-ailangchain-ai
28.8k

planning

Breaks down coding tasks into structured implementation plans with file identification and risk assessment.

Official
Basic
theomonforttheomonfort
3

implement-plan

Execute approved implementation plans phase by phase with verification pauses.

Community
Advanced
lth0lth0

frontend-design

Generate production-grade HTML/CSS/JS frontend interfaces with cohesive typography, color, and motion.

Community
Advanced
mirzadhammirzadham

plan-canvas

Opens plan artifacts in a browser canvas for annotated review and approval verdicts.

Community
Intermediate