00:00:00Este é o Superpowers, o framework de habilidades de agentes com mais de 50.000 estrelas no GitHub
00:00:05que impede seu agente de codificação de se apressar e cometer erros, forçando-o a seguir um
00:00:10fluxo de trabalho estruturado que inclui brainstorming, implementação, TDD (desenvolvimento guiado por testes),
00:00:15e até o uso de subagentes para executar tarefas e revisar códigos em paralelo.
00:00:19Mas o que o torna diferente de apenas usar o modo de planejamento ou algo como desenvolvimento guiado por especificações?
00:00:24Inscreva-se no canal e vamos descobrir.
00:00:27Este é um projeto chamado XDL, uma ferramenta de CLI usada para baixar vídeos do Twitter.
00:00:32Eu quero criar uma interface web para essa ferramenta que não apenas baixe vídeos para o navegador do usuário a partir
00:00:38de uma URL, mas também os utilize para criar um artigo. Usei o Opus 4.6 com o modo de planejamento no Claude Code
00:00:46para tentar criar essa interface. E foi isso que ele fez.
00:00:50Infelizmente, quando executei o código pela primeira vez, houve alguns problemas.
00:00:53Então revisei o código para tentar corrigir esses problemas e, espero, está resolvido.
00:00:58Agora parece que tudo está funcionando.
00:01:00Vou ao Twitter e copiar o link deste tweet.
00:01:03Desculpe, Kevin. Vou colar aqui e ver se ele baixa o vídeo.
00:01:06Ele está extraindo e conseguiu fazer o download.
00:01:09Se eu clicar aqui, abre em uma nova aba, o que não era o esperado, mas enfim, funciona.
00:01:15E se eu tentar criar um artigo a partir desse tweet, eu colo aqui e ele gera,
00:01:20podemos ver as diferentes etapas que ele está seguindo. Primeiro está extraindo o vídeo e depois
00:01:24processando o áudio. Agora que terminou, temos o artigo em Markdown perfeitamente formatado,
00:01:29o que é impressionante. E se olharmos para a mesma tarefa feita com o Opus 4.6,
00:01:35mas usando o Superpowers, já podemos ver que o design é muito melhor, com a opção de
00:01:39baixar e gerar um artigo. Colaremos a mesma URL do Twitter, clicamos em baixar e, novamente,
00:01:45ele extrai o vídeo, mas desta vez baixa direto no navegador e posso clicar para ver o
00:01:51vídeo. Agora, se usarmos o mesmo tweet para gerar o artigo aqui, podemos ver as etapas
00:01:56que ele seguiu. E agora que terminou todas as fases, ele está transmitindo o artigo para o meu navegador.
00:02:01E eu tenho a opção de copiar e colar onde eu quiser. Já dá para ver que a
00:02:06versão com Superpowers é melhor do que a sem ele. Analisaremos o
00:02:10código mais adiante, mas primeiro vamos ver como eu fiz isso. Assim que você
00:02:15instalar o plugin do Superpowers, teremos novos comandos de barra como brainstorm,
00:02:20execute plan e write the plan, que escreverá o plano a partir do brainstorm. Na verdade,
00:02:25só precisamos deste comando, pois o Superpowers nos guiará para a próxima etapa ao final da anterior.
00:02:31Vamos rodar isso e colar um prompt. Vou dar enter. Agora ele carrega a
00:02:35habilidade de brainstorming e começa a entender o projeto atual. E aqui ele vai me fazer algumas
00:02:39perguntas para melhorar o plano. Vou dizer que é React com Vite e depois passo a passo
00:02:44para a geração do artigo. Agora ele me pede para confirmar a estrutura da arquitetura,
00:02:49que me parece boa. Também pergunta sobre os layouts, os endpoints e a lógica
00:02:54do servidor. Após responder a tudo, ele prossegue para criar um plano, que agora
00:02:58foi colocado neste diretório. Se olharmos o plano, veremos que é muito detalhado,
00:03:03trazendo uma visão geral, a stack, a estrutura, além do design, layout, endpoints de API e
00:03:09muito mais. Na verdade, é bem parecido com o que o Claude Code nos daria se estivesse escrevendo o próprio plano.
00:03:15Mas o próximo passo é onde as coisas ficam interessantes. Após eu confirmar o plano e dizer que estou pronto
00:03:19para a implementação, ele escreve outro plano de implementação. Ele faz isso primeiro
00:03:25analisando o plano de design original que criamos. E o divide em tarefas menores e
00:03:31mais gerenciáveis que podem ser concluídas por subagentes em paralelo. Agora ele escreveu outro
00:03:36plano e o salvou no diretório de planos novamente. E se dermos uma olhada nele, podemos
00:03:41ver que, em vez de uma visão detalhada da arquitetura, ele divide tudo em
00:03:46tarefas. Temos uma tarefa aqui para criar o scaffold do projeto com algumas etapas internas.
00:03:52Temos outra tarefa para criar o esqueleto do cliente Vite e React. E, novamente, com etapas, e
00:03:57isso continua para cada tarefa necessária para concluir o projeto. A partir daqui, o Superpowers
00:04:03me pede para escolher uma abordagem. Quero a abordagem guiada por subagentes ou a de
00:04:08sessões paralelas? Nesta, usamos um subagente separado para cada tarefa sem confirmação humana.
00:04:14Já esta criará outra sessão a partir da sessão de plano, concluirá as tarefas em lotes
00:04:18e depois verificará comigo, o humano, se estou satisfeito com o lote concluído antes de continuar.
00:04:24Pela velocidade, vou escolher a abordagem guiada por subagentes. E agora ele
00:04:28começou a criar as tarefas que precisam ser concluídas para este projeto. Infelizmente,
00:04:32essas tarefas parecem diferentes das anteriores porque esqueci de gravar a tela na primeira
00:04:36vez. Então recomecei do zero, mas usei exatamente o mesmo prompt. O que está acontecendo agora
00:04:41é que cada subagente primeiro cria um teste. Ele escreve um teste que vai falhar. E então
00:04:47escreve o código mínimo para fazer esse teste passar. Quando termina a funcionalidade,
00:04:52ele verifica se ela atende aos requisitos especificados no plano e então passa a
00:04:57checar a qualidade do código, vendo se está limpo, bem estruturado e sustentável. Agora ele
00:05:02terminou a maioria das tarefas e vai testar tudo o que foi feito. E aqui está: ele
00:05:06concluiu todas as tarefas e até encontrou um bug no processo que conseguiu corrigir. Se
00:05:11olharmos o código, ele está dividido em servidor e fonte (source). Presumo que source seja o front-end.
00:05:16Temos alguns componentes aqui: aba de artigo, aba de download, etc. Se olharmos para
00:05:21o progresso da pipeline, temos os estágios em um objeto, uma interface TypeScript. Parece que está usando
00:05:27algum tipo de CSS-in-JS para a estilização. Pensando bem, eu deveria ter especificado o uso de Tailwind,
00:05:32mas tudo bem. E vejam só: isso é algo que o modo de plano do Opus não faria por padrão.
00:05:37Podemos ver que em cada etapa do caminho, o Superpowers fez um commit no git, desde o scaffold
00:05:43do projeto até a adição do wrapper da CLI, do Hono e tudo o mais. Se eu verificar o
00:05:48status do git, não há nada para eu commitar porque a branch está limpa, o que me dá muito menos trabalho.
00:05:53Você pode estar olhando para isso e se perguntando: onde estão os arquivos de teste? Falarei sobre isso
00:05:57mais tarde. Sinceramente, acho o Superpowers um projeto impressionante. Adoro o fato de ele
00:06:02focar em habilidades. Acho que tem 14, que fazem de tudo, desde brainstorming e
00:06:08planejamento até implementação e revisão de código. Adoro o foco em TDD,
00:06:12especificamente o TDD red-green, onde ele escreve os testes primeiro para que falhem (fiquem vermelhos) e
00:06:18depois escreve o código mínimo para passarem. Mas às vezes isso nem sempre funciona porque o agente escolhe
00:06:24não fazer isso. Vejam só. Aqui podemos ver que a habilidade de escrita do plano dizia explicitamente TDD.
00:06:31E por algum motivo, o Claude escolheu não fazer. Eu pedi para confirmar isso e ele disse: “Sim, a culpa é minha.”
00:06:36“A habilidade diz TDD e eu ainda assim não fiz”. Perguntei por que não fez, e ele respondeu
00:06:42que focou em entregar rápido em vez de seguir o processo. Não sei exatamente por que isso aconteceu com
00:06:47um modelo de última geração, mas serve para mostrar que você não deve aceitar cegamente o que o modelo
00:06:53faz. É importante ler o plano e garantir que ele faça o que você espera.
00:06:57Esta é uma das razões pelas quais não acho que usarei o Superpowers para cada um dos meus
00:07:03projetos ou requisitos de funcionalidades, puramente por serem pequenos. Se eu tiver uma funcionalidade pequena,
00:07:08prefiro interagir com o Claude para planejar, escrever um documento de plano e
00:07:13limpar o contexto para executar esse plano. Mas se eu estiver em uma situação onde
00:07:19estou implementando várias funcionalidades, o que acontece de vez em quando, então o Superpowers é uma
00:07:24ótima ferramenta, pois é muito bom em quebrar requisitos complexos em pedaços
00:07:31que podem ser concluídos por subagentes. Sim, o recurso de tarefas do Claude Code pode fazer isso,
00:07:37mas adoro que o Superpowers cria um plano para isso em vez de simplesmente sair implementando
00:07:43o código. Agora, como o Superpowers se compara a algo como Beads ou SpecKit ou a toda essa
00:07:48arquitetura de desenvolvimento guiado por especificações? Para mim, parece uma versão mais simples de planejar
00:07:53antes de executar. Claro, não tão simples quanto o Ralph, mas talvez um meio-termo
00:07:58entre Ralph e Beads. Mas me parece que há cada vez mais ferramentas assim
00:08:02ajudando as pessoas a escrever códigos melhores com seus agentes de IA. Isso é ótimo,
00:08:06mas cada um tem seu estilo. Acho bom pegar um pouco daqui, um pouco dali,
00:08:10e acabar criando seu próprio fluxo de trabalho que seja perfeito para você. Talvez seja algo que eu faça
00:08:16no futuro. E se tiverem sorte, farei um vídeo sobre isso para mostrar exatamente como fiz.