Agentation skill

Você clica no elemento da página, escreve o que quer mudar, e o Claude recebe a anotação apontando o trecho certo do código.

por benjitaylor

instalações: 13,7 mil
estrelas no GitHub: 5.085
No skills.sh desde: janeiro de 2026
Licença: Própria

Atualizada no GitHub em 22 de setembro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

benjitaylor
agentation
Você clica no elemento da página, escreve o que quer mudar, e o Claude recebe a anotação apontando o trecho certo do código.Auditada13,7 mil instalações, grátis

O que ela faz

Instala e configura o Agentation num projeto Next.js. É uma barra de anotação visual: você clica num botão, num título ou num bloco da página, escreve a nota, e o agente recebe o pedido já ligado ao elemento certo.

O Claude detecta o gerenciador de pacotes, instala o pacote e põe o componente no layout raiz só em modo de desenvolvimento. Se você quer feedback ao vivo, ele liga o servidor MCP agentation-mcp na porta 4747; sem servidor, as notas ficam pra copiar e colar.

A skill não dá a instalação por concluída só porque a barra apareceu. O Claude roda o diagnóstico, cria uma anotação de teste e confere se ela chegou ao agente. Se alguma parte não deu pra testar, ele diz qual.

Nas palavras de quem fez

Add Agentation visual feedback toolbar to a Next.js project…

benjitaylor, no SKILL.md

Quando usar

Pedir ajustes de layout sem descrever onde fica cada coisa
Revisar uma landing page em Next.js e mandar várias correções de uma vez
Ligar o feedback do navegador direto no Claude Code
Conferir por que as anotações não estão chegando ao agente

Depois de instalar, é só pedir assim

Instala o Agentation nesse projeto e conecta com o Claude Code pelo MCP
Lê as anotações que deixei na página e faz os ajustes
Configura o Agentation só pra copiar e colar, sem servidor

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

Gen Agent Trust HubPassou
SocketPassou
SnykPassou

Perguntas

Como instalar a Agentation no Claude Code?

Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Agentation, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.

O que precisa pra funcionar?

Um projeto Next.js com React 18 ou mais novo e Node.js. Pra sincronizar ao vivo, o servidor agentation-mcp roda pelo npx. Não pede chave de API nem conta paga.

A barra aparece pro cliente no site no ar?

Não. O componente fica atrás de uma checagem de modo de desenvolvimento, então a barra não aparece em produção.

Roda no Codex e no Antigravity?

A anotação copiada serve pra qualquer agente. A ligação direta é por MCP: a skill traz o comando pronto pro Claude Code e, nos outros agentes, usa a configuração de MCP que eles já tiverem.

Levar essa skill

1x agentationR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/benjitaylor/agentation

Aprenda a usar

Criar site com IA: o passo a passo no Claude Code
Como eu crio site com IA pros clientes sem saber programar: no Claude Code, no Codex ou de graça no Antigravity. O passo a passo, sem cara de template.