MODULO 4.3

๐Ÿ—๏ธ Prompts de Building e TDD

De Plan Mode a Test-Driven Development com Claude Code. Aprenda os prompts que garantem codigo de qualidade desde a primeira linha, com testes antes da implementacao.

6
Topicos
35
Minutos
Avancado
Nivel
Teoria + Pratica
Tipo
1

๐Ÿ“ Feature Blueprint (Plan Mode Approach)

O Feature Blueprint e a evolucao do Plan Mode para features especificas. Enquanto o Plan Mode generico pede um plano geral, o Blueprint vai mais fundo: identifica todos os arquivos que precisam mudar, detalha a abordagem passo a passo, e mapeia riscos especificos da feature.

๐ŸŽฏ Conceito Principal

I want to add [feature].

Enter plan mode:
1. Identify affected files
2. Outline approach
3. Flag risks
4. Wait for approval
  • โ€ข Arquivos afetados: O Claude navega o codebase e lista exatamente quais arquivos precisam ser criados, modificados ou deletados. Isso evita surpresas no meio do build
  • โ€ข Abordagem detalhada: Nao e "adicionar autenticacao". E "1. Criar middleware de auth em src/middleware/auth.ts, 2. Adicionar schema de user em prisma/schema.prisma, 3. Criar rota POST /auth/login..." - cada passo e concreto
  • โ€ข Riscos sinalizados: "Esta feature requer alteracao na tabela users que pode afetar queries existentes" - esse tipo de aviso previne desastres

๐Ÿ’ก Dica Pratica

Antes de aprovar o blueprint, faca perguntas: "E se o usuario estiver deslogado?", "Como isso afeta mobile?", "Precisa de migration?". Quanto mais voce questiona o plano, melhor ele fica. O custo de ajustar um plano e zero. O custo de refazer codigo e alto.

2

๐Ÿงช Build With Tests (TDD Prompt)

O Build With Tests e o prompt que implementa Test-Driven Development com Claude Code. Em vez de construir a feature e depois escrever testes (que quase nunca acontece), voce forca o Claude a escrever o teste primeiro, implementar, rodar, e so entao avancar para o proximo pedaco.

๐ŸŽฏ Conceito Principal

Build [feature].

For each piece:
1. Write test first
2. Write implementation
3. Run tests
4. Move to next piece

Do not batch tests.
  • โ€ข Teste primeiro: O Claude escreve o teste que define o comportamento esperado. Depois escreve o codigo que faz o teste passar. Isso garante que cada pedaco funciona antes de avancar
  • โ€ข Execucao real: O Claude roda os testes no terminal. Se falha, corrige antes de continuar. Voce ve o ciclo red-green acontecendo em tempo real
  • โ€ข "Do not batch tests": Sem essa instrucao, o Claude tende a escrever todos os testes de uma vez e depois toda a implementacao. Isso anula o beneficio do TDD

๐Ÿ’ก Dica Pratica

Certifique-se de que seu projeto ja tem um framework de testes configurado (Jest, Vitest, pytest, etc.) antes de usar este prompt. O Claude precisa poder executar os testes realmente. Se nao ha test runner, peca primeiro para configurar um.

3

๐Ÿงฑ Incremental Building (Step-by-Step)

Nem toda feature precisa de TDD formal. O Incremental Building e a versao pragmatica de construcao passo-a-passo. O Claude constroi uma peca, verifica que funciona, e so entao avanca para a proxima. Sem testes automatizados, mas com validacao a cada passo.

๐ŸŽฏ Conceito Principal

O Incremental Building funciona com um prompt que forca pausas entre etapas:

Build [feature] incrementally.

After each step:
1. Show what was built
2. Verify it works
3. Wait for my OK before continuing

Start with the smallest working version.
  • โ€ข Smallest working version: Comeca com o minimo viavel. Um endpoint que retorna hello world. Um componente que renderiza um div. Depois evolui incrementalmente
  • โ€ข Checkpoints manuais: A cada passo voce valida visualmente ou com um teste manual. So apos seu OK o Claude continua. Isso evita que ele construa 500 linhas de codigo que nao compilam
  • โ€ข Ideal para UI: Construir interfaces incrementalmente permite que voce veja o resultado visual a cada passo e peca ajustes antes de adicionar mais complexidade

๐Ÿ’ก Dica Pratica

Combine Incremental Building com git commits a cada checkpoint. Depois de cada "OK", peca ao Claude para commitar. Assim, se algo der errado num passo futuro, voce pode voltar para o ultimo ponto estavel sem perder tudo.

4

๐ŸŽจ Component Building (UI Component Prompt)

Construir componentes de UI requer um tipo especifico de prompt. O Component Building prompt define props, estados, variantes e acessibilidade de forma estruturada, garantindo componentes completos e reutilizaveis desde a primeira versao.

๐ŸŽฏ Conceito Principal

Build a [component name] component.

Requirements:
- Props: [list expected props]
- States: [default, hover, active, disabled, loading]
- Variants: [primary, secondary, ghost]
- Accessibility: keyboard nav, aria labels, screen reader

Follow existing component patterns in the codebase.
  • โ€ข Props explicitas: Listar as props evita que o Claude invente interfaces que nao fazem sentido para seu design system
  • โ€ข Todos os estados: Hover, active, disabled, loading. Sem isso, o Claude constroi so o estado default e voce descobre os outros no QA
  • โ€ข "Follow existing patterns": O Claude le os componentes ja existentes e replica o mesmo estilo, convencoes de naming e estrutura de arquivos

๐Ÿ’ก Dica Pratica

Se voce usa Storybook ou similar, adicione ao prompt: "Also create a Storybook story showing all variants and states." O Claude gera o componente e a documentacao visual de uma vez.

5

๐Ÿ”Œ API Endpoint Building (Backend Prompt)

Endpoints de API tem requisitos especificos: validacao de input, tratamento de erros, autorizacao, paginacao. O API Endpoint prompt garante que nenhum desses aspectos seja esquecido, produzindo endpoints production-ready desde o inicio.

๐ŸŽฏ Conceito Principal

Build a [METHOD] /api/[resource] endpoint.

Requirements:
- Input validation with error messages
- Proper HTTP status codes
- Error handling (try/catch, custom errors)
- Authentication/authorization check
- Rate limiting considerations

Follow existing API patterns in this codebase.
  • โ€ข Validacao com mensagens: Nao basta validar. O usuario precisa saber o que errou. "email is required" e melhor que "validation error"
  • โ€ข Status codes corretos: 201 para criacao, 404 para nao encontrado, 422 para validacao. O Claude conhece todos os status codes HTTP e usa corretamente quando instruido
  • โ€ข Auth/authz: Especificar que o endpoint precisa de autenticacao evita o erro classico de endpoints publicos que deveriam ser protegidos

๐Ÿ’ก Dica Pratica

Para APIs RESTful completas, construa um endpoint CRUD completo de uma vez com o prompt: "Build full CRUD for [resource]: GET list (with pagination), GET by id, POST, PUT, DELETE. Follow REST conventions and existing patterns." O Claude gera todos os endpoints consistentes entre si.

6

๐Ÿ”— Full-Stack Feature Workflow

A maioria das features do mundo real e full-stack: banco de dados + backend + frontend. O workflow completo combina todos os prompts deste modulo numa sequencia end-to-end que produz features completas com qualidade de producao.

๐ŸŽฏ Conceito Principal

O workflow full-stack segue esta sequencia:

  • โ€ข Passo 1 - Feature Blueprint: Planejar a feature completa: schema, API, componentes, testes
  • โ€ข Passo 2 - Database/Schema: Criar ou modificar o schema do banco. Migrations se necessario
  • โ€ข Passo 3 - API Endpoints: Construir os endpoints com validacao, auth e error handling
  • โ€ข Passo 4 - UI Components: Construir os componentes que consomem a API
  • โ€ข Passo 5 - Integration: Conectar tudo e testar o fluxo end-to-end
  • โ€ข Passo 6 - Brutal Audit: Auditar a feature completa antes de considerar pronta

๐Ÿ’ก Dica Pratica

Para features grandes, use sessoes separadas para cada camada (database, API, UI). Isso mantem o contexto limpo e evita que o Claude misture preocupacoes de backend com frontend. Referencie os arquivos criados nas etapas anteriores explicitamente em cada nova sessao.

✎

Exercicio Pratico

Construir feature usando Build With Tests prompt

Escolha uma feature simples (ex: funcao de validacao de email, endpoint de criacao de usuario, componente de formulario) e construa usando TDD:

  1. 1. Descreva a feature e use o Feature Blueprint para planejar
  2. 2. Use o Build With Tests para implementar com TDD. Observe o ciclo red-green
  3. 3. Verifique que todos os testes passam ao final
  4. 4. Rode um Brutal Audit no resultado e corrija issues encontrados

โœ… Criterios de Sucesso

โ˜ Feature Blueprint gerado e aprovado
โ˜ Testes escritos antes da implementacao
โ˜ Todos os testes passando ao final
โ˜ Brutal Audit rodado e issues corrigidos

๐Ÿ“‹ Resumo do Modulo

โœ“
Feature Blueprint planeja antes de codar - Arquivos afetados, abordagem detalhada e riscos sinalizados antes de tocar no codigo.
โœ“
Build With Tests implementa TDD real - Teste primeiro, implementacao depois, execucao real. Ciclo red-green automatizado.
โœ“
Incremental Building e TDD pragmatico - Checkpoints manuais a cada passo. Ideal para UI e prototipagem rapida.
โœ“
Component Building cobre todos os estados - Props, estados, variantes e acessibilidade definidos no prompt.
โœ“
API Endpoints production-ready desde o inicio - Validacao, status codes, auth, error handling no prompt base.
โœ“
Full-stack workflow une todas as camadas - Schema โ†’ API โ†’ UI โ†’ Integration โ†’ Audit. Pipeline completo.

Proximo Modulo:

4.4 - Prompts de Debugging e Log Analysis