plan-canvas
FeaturedOpen 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
Quality Score: 96/100
Skill Content
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
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.
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.
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