show-your-work

Sim, o Claude Code pode mostrar imagens no terminal com o plugin show-your-work. Depois de instalado, o Claude mostra capturas de tela, designs, gráficos e outras imagens direto no chat. Funciona em terminais que suportam o protocolo gráfico kitty, como Ghostty e Warp.

Sim, o Claude Code pode reproduzir vídeos no terminal com o plugin show-your-work. Ele reproduz gravações de tela, animações, anúncios e vídeos de lançamento dentro do chat do Claude Code. Vem com um player de vídeo completo, com arrastar, controles de avanço, timestamps clicáveis e comparações lado a lado.

Você pode ver o que o Claude Code construiu instalando o plugin show-your-work. Sempre que o Claude constrói ou altera algo visual, ele tira uma captura de tela ou grava e mostra o resultado no chat. Você não precisa mudar para um navegador e encontrar a página sozinho.

Sim, o Claude Code pode testar seu aplicativo e mostrar uma gravação com o plugin show-your-work. O Claude testa os recursos que constrói com Playwright, grava cada execução e reproduz a gravação no chat. Os passos são listados ao lado do vídeo com timestamps. Cada verificação fica verde ou vermelha conforme o vídeo a alcança.

Sim, o Claude Code pode mostrar um antes e depois de uma alteração ou correção de bug com o plugin show-your-work. O Claude grava os mesmos passos do Playwright na versão antiga e na nova. Compare reproduz ambas as gravações lado a lado, em sincronia. Cada verificação de teste fica verde ou vermelha conforme o vídeo a alcança.

Sim, show-your-work é um plugin do Claude Code para QA visual. Ele grava as execuções de teste do Playwright do Claude e as reproduz no chat. Cada gravação vem com marcadores de alteração clicáveis e verificações que ficam verdes ou vermelhas conforme o vídeo é reproduzido. Para uma alteração ou correção de bug, ele reproduz o antes e depois lado a lado, em sincronia.

A maneira mais fácil de verificar se o Claude Code realmente corrigiu um bug é pedir que ele grave a correção com show-your-work. Peça ao Claude para corrigir o bug e mostrar o antes e depois. As versões antiga e nova são reproduzidas lado a lado, em sincronia, com as verificações que agora passam marcadas em verde.

show-your-work vai além de visualizar imagens no terminal. Sua principal força é o QA visual. Ele reproduz gravações sincronizadas de antes e depois do Playwright, lista as alterações em que você pode clicar para pular e fica cada verificação verde ou vermelha conforme o vídeo é reproduzido. Você pode revisar um recurso ou uma correção sem sair do Claude Code.

Não, show-your-work usa muito poucos tokens extras, porque foi construído do zero para ser eficiente em tokens e memória. Imagens e vídeos são desenhados direto no seu terminal com o protocolo gráfico kitty, sem usar nenhum token. Vídeos também são decodificados e transmitidos de forma eficiente, então pouca memória é usada.

O plugin show-your-work funciona em terminais que suportam o protocolo gráfico kitty, como Ghostty e Warp, em macOS, Linux e Windows.

Sim, show-your-work é gratuito e de código aberto sob a licença MIT.

Não, você não precisa atualizar manualmente. O plugin se atualiza sozinho, então você nunca fica para trás. Você pode escolher entre as versões Stable e Latest durante a introdução, ou a qualquer momento com /show-your-work.

Você pode ver a introdução novamente executando /show-your-work tour. Ela cobre gravações, antes e depois, histórico de versões e as configurações.

Não, ele não ocupa muito espaço. Ele mantém imagens e vídeos recentes para que você possa voltar a eles, e limpa os mais antigos quando somam cerca de 1 GB.

Você escolhe se deseja compartilhar dados de uso anônimos. Você pode fazer essa escolha durante a introdução ou alterá-la a qualquer momento com /show-your-work. Ele nunca coleta nenhum dado sensível. Os detalhes estão na Política de privacidade.

Aqui está tudo o que o plugin faz no seu computador, para que você saiba exatamente o que está instalando. Suas imagens e vídeos nunca saem da sua máquina.

Para preparar imagens e vídeos, ele usa ffmpeg e ffprobe (transformando um vídeo em quadros e lendo sua duração) e, no macOS, sips (convertendo uma imagem para PNG). Quando você pressiona Ver, Mostrar no Finder ou Salvar em Downloads, ele abre o arquivo com open no macOS ou xdg-open no Linux. No macOS, mdfind ajuda /img a encontrar uma imagem que você colou, e dentro do tmux ele pergunta a tmux se as imagens podem passar.

Alguns scripts curtos são executados com sh e perl. Eles encontram ffmpeg e sua pasta pessoal, leem o tamanho da célula do terminal para que as imagens caibam, organizam a pasta temporária do plugin, abrem um visualizador no Linux e alternam entre os canais Stable e Latest. Ele também usa cp, mkdir, rm, cat e touch para seus próprios arquivos temporários, e claude plugin para instalar suas próprias atualizações deste repositório, no máximo uma vez por dia. Você pode desativar as atualizações. O atualizador será desativado depois que o plugin for movido para o diretório de plugins do Claude Code, que o mantém atualizado. Ele mantém estes arquivos:

• Quadros de vídeo e imagens convertidas vão para uma pasta temporária ($TMPDIR/claude-show-your-work-<your user id>), e qualquer coisa mais antiga que uma semana é limpa.
• Uma cópia de cada arquivo que o Claude mostra para você vai para .show-your-work/ no seu projeto, para que você possa revisar versões anteriores.
• Salvar em Downloads coloca uma cópia em ~/Downloads.
• Ativar imagens adiciona uma linha ao seu perfil de shell (veja Terminais), e desativar remove essa linha.
• Com SHOW_YOUR_WORK_DEBUG=1, ele grava um debug.log na pasta temporária.

Uma vez por dia, ele lê o número da versão mais recente do plugin de raw.githubusercontent.com.

Se os dados de Uso estiverem configurados para compartilhar em /show-your-work, ele envia contagens anônimas de uso para us.i.posthog.com. São nomes de eventos e contagens, além das versões do plugin e do Claude Code, seu terminal, seu sistema operacional e se o ffmpeg está instalado, sob um ID de instalação aleatório. Eles nunca incluem nomes de arquivos, caminhos, prompts, nada que você digite ou seu endereço IP. A chave no código é a chave pública do PostHog, que só pode enviar eventos.

Dentro do Claude Code, ele usa estes hooks:

• prompt.compose adiciona uma linha curta às instruções do Claude, informando que este terminal pode mostrar imagens (ou por que não pode). Isso só acontece quando as ferramentas do plugin estão disponíveis.
• prompt.submit fecha as configurações quando você envia uma mensagem e lembra os nomes das imagens que você cola, para que /img possa encontrá-las. Sua mensagem não é alterada.
• tool.call lida com as ferramentas próprias do plugin show_image e show_video. Ele nunca toca em outras ferramentas.
• command.run executa /img e /show-your-work. Logo após a instalação, ele executa /show-your-work tour uma vez para te mostrar o ambiente.
• ui.render desenha o player do plugin, avisos, configurações e tour.
• session.start e session.end configuram a pasta temporária e o terminal no início, e enviam quaisquer contagens de uso pendentes no final.

O plugin dá ao Claude duas ferramentas, show_image e show_video. Uma chamada básica precisa apenas de um caminho. Para um antes e depois, o Claude também passa o arquivo antigo e os resultados dos testes:

{
  "path": "qa/after.webm",          // the run on the fixed version
  "compare": "qa/before.webm",      // the same steps on the old version
  "title": "Pricing page",
  "url": "http://localhost:3000/pricing",
  "changes": [                      // what changed, and the second it shows up
    { "title": "Annual toggle sets prices", "at": 3.2 },
    { "title": "Plan buttons line up", "at": 5.4 }
  ],
  "summary": [                      // the test results, at most three lines
    { "label": "Billing: toggle works", "ok": true, "passed": 1, "total": 1 },
    { "label": "Layout: plans, buttons", "ok": true, "passed": 3, "total": 3 }
  ]
}

Vídeos são cortados em quadros a até 12 por segundo, na largura que a janela mostra (no máximo 2400 px), com um limite de 3.600 quadros (cinco minutos na taxa máxima). Para abrir um arquivo você mesmo, execute /img path/to/file.png.

Para trabalhar no plugin, edite os módulos em hooks/ (register.tsx é a entrada) e execute /reload-plugins para carregar suas alterações. Antes de enviar uma mudança, execute claude plugin validate . e claude plugin test ..