Skills Directory

affaan-m/ECC

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.

1.4K installs 246K starsUpdated Sep 3, 2026License: MIT

Install

npx skills add affaan-m/ECC@plan-canvas

Runs in your terminal. Adds the skill globally for Claude Code, Cursor, Codex and others; add -g -y to skip prompts.

What it does

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…

Excerpt from the skill's own SKILL.md. Read the full file on GitHub before installing: skills run with your agent's permissions.

View source on GitHub

Before you install

Skills are plain text instructions the agent follows, sometimes with scripts. Check the source, prefer repositories with many installs and stars, and read any script it ships.

Categories

Related skills

  • backend-patterns

    affaan-m/ECC

    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.

    3.3K installs 246KDesign & UIReact & Next.jsSecurity
  • frontend-patterns

    affaan-m/ECC

    Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices. Use when building or reviewing React or Next.js components, state, or render performance.

    3.3K installs 246KDesign & UIReact & Next.jsData
  • security-review

    affaan-m/ECC

    Use this skill when adding authentication, handling user input, working with secrets, creating API endpoints, or implementing payment/sensitive features. Provides comprehensive security checklist and patterns.

    3.3K installs 246KSecurityDataCode review
  • coding-standards

    affaan-m/ECC

    Baseline cross-project coding conventions for naming, readability, immutability, and code-quality review. Use detailed frontend or backend skills for framework-specific patterns. Use when reviewing code quality or naming with no framework-specific skill that applies.

    3.1K installs 246KDesign & UIReact & Next.jsCode review
  • docker-patterns

    affaan-m/ECC

    >

    3.1K installs 246KSecurityDeploy & DevOpsCode review
  • frontend-slides

    affaan-m/ECC

    Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.

    3.1K installs 246KDesign & UIAnimationOffice documents

← Search skills

/skills/affaan-m/ECC/plan-canvas/