O Casamento Perfeito: Claude Code + Superpowers

Se você já achava o Claude Code (a ferramenta de linha de comando oficial da Anthropic) incrível, espere até ver o que acontece quando você adiciona a skill Superpowers ao seu fluxo de trabalho.

Criado pela comunidade de código aberto (disponível no repositório obra/superpowers), esse conjunto de ferramentas expande os limites do Claude, permitindo que ele interaja de forma muito mais profunda com seu sistema, execute tarefas complexas de automação e atue como um verdadeiro engenheiro de software sênior ao seu lado.

Neste guia prático e direto, você aprenderá a configurar e dominar essa ferramenta no seu dia a dia de desenvolvimento front-end e back-end.

Como Instalar a Skill Superpowers

A instalação é simples, mas requer que você já tenha o ecossistema do Node.js e o Claude Code configurados em sua máquina.

Passo 1: Preparando o Terreno

Certifique-se de que você possui o Node.js instalado (versão 18 ou superior recomendada). No seu terminal, você pode instalar o pacote de ferramentas globais do Superpowers executando:

npm install -g @obra/superpowers

Passo 2: Configurando no Claude Code

O Claude Code utiliza o protocolo MCP (Model Context Protocol) para gerenciar extensões e skills externas. Para conectar o Superpowers ao seu agente Claude, adicione a configuração do MCP ao seu arquivo de configuração do Claude (claude_config.json ou via comando direto):

claude mcp add superpowers npx -y @obra/superpowers

Isso dará ao Claude a capacidade de invocar dinamicamente os utilitários do Superpowers sempre que necessário durante o desenvolvimento.

Como Usar no Dia a Dia

Uma vez configurado, o Claude passa a ter acesso a superferramentas de busca, leitura de arquivos otimizada, execução de comandos sandbox e manipulação inteligente de código.

Você não precisa decorar comandos difíceis. Basta conversar com o Claude naturalmente dentro do seu terminal:

  • "Claude, analise essa pasta e otimize o carregamento das imagens usando Superpowers."
  • "Busque na API de exemplo e monte um componente React com os dados retornados."

Exemplo Passo a Passo: Criando um App de Clima Minimalista

Vamos ver o Superpowers em ação criando uma aplicação web simples (HTML + CSS com Tailwind + JS vanilla) que consome dados de uma API de clima.

Passo 1: Iniciando o Projeto

Abra o terminal na pasta onde deseja criar o projeto e inicie o Claude Code:

claude

Passo 2: O Comando Mágico

Peça ao Claude para estruturar o projeto utilizando os poderes aprimorados de busca e escrita do Superpowers:

Você: "Claude, use o Superpowers para criar uma página web minimalista de clima. Use Tailwind CSS via CDN. Crie um campo de busca e consuma uma API pública de previsão do tempo. Garanta que o layout seja dark mode elegante."

Passo 3: O Claude em Ação

O Claude utilizará as ferramentas do Superpowers para:

  1. Criar o arquivo index.html.
  2. Escrever uma estrutura semântica limpa.
  3. Adicionar o script JS necessário para fetch de dados (por exemplo, usando a Open-Meteo API).
  4. Estilizar tudo com classes Tailwind modernas.

Passo 4: O Código Gerado

O Claude criará um arquivo semelhante a este de forma autônoma:

<!DOCTYPE html>
<html lang="pt-BR" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minimalist Weather</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-zinc-950 text-zinc-100 flex items-center justify-center min-h-screen font-sans">
    <div class="w-full max-w-md p-8 bg-zinc-900 rounded-2xl border border-zinc-800 shadow-xl">
        <h1 class="text-2xl font-bold mb-6 text-center text-indigo-400">Weather App</h1>
        <div class="flex gap-2 mb-6">
            <input id="city" type="text" placeholder="Digite a latitude, longitude (ex: -23.55,-46.63)" class="w-full p-3 rounded-lg bg-zinc-800 border border-zinc-700 focus:outline-none focus:border-indigo-500 text-sm">
            <button id="search" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 rounded-lg text-sm font-semibold transition">Buscar</button>
        </div>
        <div id="result" class="hidden text-center">
            <p class="text-5xl font-extrabold my-4" id="temp">--°C</p>
            <p class="text-zinc-400 text-sm" id="wind">Vento: -- km/h</p>
        </div>
    </div>
    <script>
        document.getElementById('search').addEventListener('click', async () => {
            const coords = document.getElementById('city').value.split(',');
            if(coords.length !== 2) return alert('Insira latitude e longitude separadas por vírgula!');
            const [lat, lon] = coords;
            const res = await fetch(\`https://api.open-meteo.com/v1/forecast?latitude=\${lat.trim()}&longitude=\${lon.trim()}&current_weather=true\`);
            const data = await res.json();
            document.getElementById('temp').innerText = \`\${data.current_weather.temperature}°C\`;
            document.getElementById('wind').innerText = \`Vento: \${data.current_weather.windspeed} km/h\`;
            document.getElementById('result').classList.remove('hidden');
        });
    </script>
</body>
</html>

Se houver qualquer bug, basta digitar no terminal: "Corrija o bug no script de busca" e o Claude usará o Superpowers para analisar o fluxo, reescrever o bloco exato e salvar o arquivo automaticamente.

Conclusão

A skill Superpowers transforma o Claude Code de um assistente de chat para um verdadeiro copiloto de terminal com autonomia cirúrgica. Instale hoje mesmo e ganhe horas de produtividade no seu próximo projeto web!