plan-canvas
Abre planos e artefatos em uma janela do navegador para você comentar. Facilita dar feedback visual sobre mudanças necessárias.
O que ela faz
Essa ferramenta permite que você mostre um plano ou um desenho para outra pessoa revisar diretamente no navegador. A pessoa pode apontar exatamente o que quer mudar, fazer perguntas e aprovar ou pedir alterações, tudo sem sair da página.
Quando usar
- ✓Quando você precisa que alguém aprove um plano ou um desenho.
- ✓Quando é mais fácil apontar o que mudar do que descrever por texto.
- ✓Quando você quer que a pessoa veja um arquivo local (como um .md ou .html) e dê feedback.
Exemplo do que pedir para a IA
“Abra o arquivo 'meu_plano.md' no navegador para revisão e espere o feedback.”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
A ferramenta abre o arquivo em uma página web e espera que a pessoa interaja. Ela te avisa quando a pessoa aprova ou pede mudanças, mostrando exatamente onde ela apontou.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add affaan-m/ECC --skill plan-canvasOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/affaan-m/ECC/main/skills/plan-canvas/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
Plan Canvas
Loop de revisão para planos e artefatos visuais: você escreve o artefato, o humano o revisa no navegador — anotando o elemento exato que ele quer dizer, conversando e entregando um veredito de Aprovar plano / Solicitar alterações — enquanto você bloqueia em uma única chamada CLI que retorna o feedback dele como JSON.
Inspirado por lavish-axi; reconstruído nativamente em ECC em torno do portão de confirmação /plan, com zero dependências.
Quando Usar
- Você acabou de escrever um artefato de plano (
.claude/plans/*.plan.mdde/plan) e precisa da decisão CONFIRMAR/aprovar — o veredito do canvas substitui um "sim/prosseguir" digitado. - O usuário deve apontar para o que mudar: revisando designs, comparações,
relatórios ou qualquer artefato local
.md/.html. - O usuário pede por
/plan-canvas, uma revisão visual ou "abrir no navegador".
NÃO use para: revisão de código de diffs (/code-review), execução de aplicativos web ou
URLs remotos. O canvas serve apenas para arquivos de artefatos locais.
Como Funciona
Invoque a CLI como ecc-plan-canvas — o binário enviado pelo pacote ecc-universal
(no PATH após uma instalação global/plugin; node "$CLAUDE_PLUGIN_ROOT/scripts/plan-canvas.js"
também funciona para instalações de plugin). Execute-o a partir do projeto que você está revisando;
ele funciona de qualquer diretório de trabalho. Ele gerencia um servidor de loopback desanexado (127.0.0.1:4517)
compartilhado por todas as sessões, com chave pelo caminho do artefato — sem IDs de sessão para rastrear.
O fluxo de trabalho é um loop simples de CLI mais JSON, então é agnóstico ao modelo e ao harness:
qualquer agente que possa executar um comando shell e ler stdout o conduz da mesma forma
(Claude Code, Codex, Cursor, Gemini, OpenCode, Copilot). Acione-o como seu
harness expõe as habilidades — por exemplo, /plan-canvas no Claude Code, $plan-canvas no
Codex — ou apenas execute os comandos ecc-plan-canvas diretamente.
# 1. Open the artifact in the user's browser (returns immediately)
ecc-plan-canvas open .claude/plans/feature.plan.md
# 2. Block until the human responds. Leave running; re-run if interrupted:
# queued feedback is never lost.
ecc-plan-canvas await .claude/plans/feature.plan.md
Fique escutando, ou o humano fala para uma cadeira vazia
O feedback só chega até você enquanto um await está realmente estacionado na sessão.
Se a sua vez terminar sem nada escutando, a mensagem fica na fila e,
do lado do humano do vidro, o envio parece não fazer nada.
Portanto, execute await como uma tarefa em segundo plano quando seu harness suportar uma (no Claude Code, uma chamada Bash com run_in_background: true). Ele sai no momento em que o feedback chega e o harness entrega o JSON, o que mantém o loop vivo entre as voltas em vez de morrer com a chamada em primeiro plano. Um await em primeiro plano
também funciona, mas apenas até que o harness o limite por tempo.
Existem dois mecanismos de segurança, e nenhum deles é desculpa para pular o acima:
ecc-plan-canvas pendinglista o feedback enfileirado sem um ouvinte. Verifique-o sempre que tiver dúvidas se perdeu algo.- O hook
stop:plan-canvas-pendingimpede que sua vez termine enquanto o feedback do canvas não for entregue, e entrega as mensagens para você. Se você estiver lendo feedback desse hook, você parou de escutar cedo demais.
await imprime JSON quando o humano age:
{
"status": "feedback",
"items": [
{ "kind": "annotation", "text": "Split this into two phases",
"anchor": { "selector": "h2:nth-of-type(3)", "tag": "h2", "snippet": "Phase 2: Migration" } },
{ "kind": "verdict", "verdict": "request-changes" }
]
}
kind: "chat"— mensagem livre; responda no canvas, não no terminal.kind: "annotation"— feedback ancorado a um elemento (anchor.selector,anchor.snippetmostram o que eles apontaram;anchor.textRange.textquando eles destacaram uma passagem).kind: "verdict"—approvesignifica que o plano está CONFIRMADO: pare de sondar, encerre a sessão e comece a implementar.request-changessignifica revisar o artefato (o canvas o recarrega ao vivo) e manter o loop em andamento.
3. Sempre responda no canvas, depois continue escutando. Um comando faz ambos:
ecc-plan-canvas await <file> --reply "Split Phase 2 as requested. Take a look."
Cada mensagem humana recebe uma resposta no canvas, mesmo um texto curto como "Entendido, reescrevendo a tabela de riscos agora." O silêncio no painel de chat é indistinguível de um canvas quebrado, que é exatamente a falha que este loop existe para evitar. Responda lá, não apenas no terminal.
Enquanto você trabalha, mantenha o chat honesto com o indicador de atividade:
…
Perguntas frequentes
O que acontece se a pessoa não der feedback?
A ferramenta continua esperando. Se você não estiver ouvindo, a pessoa pode ver que o feedback está na fila para ser enviado.
Posso usar para revisar código?
Não, essa ferramenta é para planos e desenhos, não para revisar código ou rodar aplicativos web.
Como a pessoa aponta o que quer mudar?
A pessoa pode clicar diretamente nos elementos da página ou selecionar um trecho de texto para dar o feedback.
Detalhes
Descrição original do autor
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.
repo: affaan-m/ECC
Popularidade
- Estrelas no GitHub
- 280 mil
- Posição no ranking
- #254
- Licença
- MIT
- Atualizada em
- 15/10/2026
Comentários
- …
Mais skills deste repositório
accessibility
Ajuda seu agente a criar interfaces que todos possam usar. Garante que sites e aplicativos funcionem bem para pessoas com deficiência, como cegos ou com mobilidade reduzida.
affaan-m/ECC
agent-architecture-audit
Faz seu agente verificar se tudo está funcionando corretamente. Ele encontra e conserta problemas em sistemas de IA, garantindo que funcionem como esperado.
affaan-m/ECC
agent-eval
Ajuda seu agente a comparar diferentes ferramentas de programação de IA. Ele mede qual é mais rápido, barato e confiável para realizar tarefas específicas.
affaan-m/ECC
agent-harness-construction
Faz seu agente entender melhor como realizar tarefas. Ele otimiza as ferramentas e instruções que o agente usa para aumentar suas chances de sucesso.
affaan-m/ECC
Skills parecidas
context-engineering
Otimiza a configuração inicial e as regras para o agente. É útil para garantir que o agente tenha o contexto certo para realizar tarefas de forma eficiente e com qualidade.
addyosmani/agent-skills
doubt-driven-development
Questiona todas as decisões importantes antes de serem tomadas. É útil quando a precisão é crucial, para garantir que não haja falhas escondidas e que o plano seja robusto.
addyosmani/agent-skills
idea-refine
Transforma ideias vagas em planos claros e realizáveis. Ajuda a pensar em diferentes opções e a escolher o melhor caminho a seguir.
addyosmani/agent-skills