Este é o único plugin Claude Code que você REALMENTE precisa (Superpowers)

BBetter Stack
컴퓨터/소프트웨어창업/스타트업AI/미래기술

Transcript

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.

Key Takeaway

O Superpowers potencializa o Claude Code ao impor uma metodologia de engenharia de software rigorosa, utilizando subagentes e planejamento modular para entregar códigos de maior qualidade e organização.

Highlights

O Superpowers é um framework de habilidades para agentes de IA com mais de 50.000 estrelas no GitHub, focado em fluxos de trabalho estruturados.

A ferramenta força o agente a seguir etapas rigorosas de brainstorming, planejamento detalhado e TDD (Desenvolvimento Guiado por Testes).

Permite o uso de subagentes para executar tarefas em paralelo, aumentando a eficiência em projetos complexos.

O plugin realiza commits automáticos no Git para cada etapa concluída, mantendo o histórico de desenvolvimento limpo e organizado.

Diferencia-se do modo de planejamento padrão do Claude Code por dividir requisitos em tarefas menores e mais gerenciáveis.

Embora poderoso, o autor alerta que modelos de última geração ainda podem ignorar instruções de processo (como TDD) em favor da velocidade.

É ideal para implementações de múltiplas funcionalidades, mas pode ser excessivo para tarefas pequenas e simples.

Timeline

Introdução ao Superpowers e Fluxo de Trabalho

O vídeo começa apresentando o Superpowers como um framework essencial para evitar que agentes de codificação cometam erros por pressa. O narrador destaca que o diferencial desta ferramenta é a imposição de um fluxo estruturado que inclui brainstorming, implementação e o uso de subagentes. Ao contrário do modo de planejamento comum, o Superpowers utiliza uma abordagem de TDD para garantir a integridade do código. Esta seção estabelece a premissa de que a ferramenta organiza o caos do desenvolvimento automatizado. O autor convida o público a entender como essa estrutura se traduz na prática.

Demonstração Prática: Claude Code vs. Superpowers

O autor utiliza um projeto real chamado XDL, uma ferramenta de CLI para baixar vídeos do Twitter, para testar as capacidades da IA. Inicialmente, ele mostra que o uso do Claude Code no modo de planejamento padrão resultou em erros que precisaram de correção manual e uma interface funcional, mas simples. Em contrapartida, a versão desenvolvida com o Superpowers apresentou um design superior e funcionalidades mais refinadas, como o download direto no navegador. O exemplo demonstra que a versão com o plugin gerou um artigo em Markdown perfeitamente formatado a partir de um tweet. A comparação visual e funcional deixa claro que a estrutura adicional do Superpowers eleva a qualidade do produto final.

Comandos, Brainstorming e Planejamento Detalhado

Nesta fase, o narrador explica a interface de comandos do plugin, destacando funções como 'brainstorm' e 'execute plan'. O processo começa com o agente fazendo perguntas críticas ao usuário sobre a stack tecnológica, como o uso de React com Vite, e detalhes da arquitetura. Após a interação, o Superpowers gera um plano extremamente detalhado em um diretório específico, cobrindo desde endpoints de API até o layout. Este plano é fundamental porque serve como a base de conhecimento para todas as ações subsequentes do agente. O autor enfatiza que essa etapa de confirmação humana garante que a arquitetura esteja correta antes de qualquer linha de código ser escrita.

Implementação com Subagentes e Abordagens de Execução

O vídeo detalha como o plano de design é transformado em um plano de implementação prático, dividido em tarefas menores. O Superpowers oferece duas abordagens principais: a guiada por subagentes, que é mais rápida e automatizada, e a de sessões paralelas, que exige confirmação humana em lotes. O narrador opta pela agilidade dos subagentes, onde cada tarefa, como o scaffold do projeto ou a criação do cliente Vite, é tratada de forma independente. Cada subagente é responsável por uma parte lógica do sistema, permitindo que o desenvolvimento ocorra em paralelo. Essa modularidade é o que permite ao framework lidar com projetos de grande escala de forma eficiente.

Ciclo TDD, Qualidade de Código e Integração com Git

Aqui é explicado o ciclo de desenvolvimento 'red-green' do TDD, onde o agente escreve um teste que falha antes de codificar a solução mínima necessária. O processo inclui verificações de qualidade para garantir que o código seja limpo, sustentável e atenda aos requisitos originais. Um ponto de destaque é a automação do Git, onde o Superpowers realiza commits para cada etapa, resultando em uma branch limpa e organizada sem esforço do desenvolvedor. O autor observa que a ferramenta até detectou e corrigiu bugs autonomamente durante a fase de testes. No entanto, ele nota que o agente escolheu usar CSS-in-JS por falta de uma instrução específica sobre Tailwind no prompt inicial.

Limitações da IA e Conclusão sobre o Fluxo de Trabalho

Na conclusão, o autor faz uma análise crítica, revelando que nem sempre a IA segue o processo de TDD perfeitamente, priorizando às vezes a velocidade. Ele adverte que o usuário nunca deve aceitar cegamente o que o modelo faz, sendo essencial revisar os planos gerados. O Superpowers é recomendado para projetos com múltiplas funcionalidades complexas, enquanto interações diretas com o Claude são preferíveis para tarefas pequenas. O vídeo encerra comparando a ferramenta a outros frameworks como Beads e SpecKit, posicionando-a como um meio-termo equilibrado. O narrador incentiva os desenvolvedores a extraírem o melhor de cada ferramenta para criar um fluxo de trabalho personalizado e eficiente.

Community Posts

View all posts