Quickstart
1. Rode sua app
cd ~/projects/meu-app
npm run dev # ou pnpm, yarn, qualquer servidor local
App escutando em http://localhost:3000 (porta padrão).
2. Abra Claude Code no mesmo terminal
3. Peça pro Claude usar a skill
“Use a skill visual-eyes pra ver minha app em http://localhost:3000 e me diz o que melhorar no layout”
O Claude vai:
- Ler
~/.claude/skills/visual-eyes/SKILL.md
- Spawnar Playwright (Chromium em modo headless)
- Navegar para a URL
- Tirar screenshot
- Analisar visualmente
- Sugerir mudanças
4. Aceitar mudanças e iterar
“Ok, faz isso e tira outra screenshot pra comparar”
Claude aplica, recarrega, screenshota de novo, mostra antes/depois.
Comandos úteis
Sintaxes naturais que funcionam:
- “Mostra o estado atual”
- “Tira screenshot em viewport mobile (375x812)”
- “Compara antes e depois dessa mudança”
- “Tem algum erro de console na página?”
- “O botão X está visível em scroll?”
Próximos passos