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