Guia prático · setembro 2026
Claude + Obsidian→ Os pilares da produtividade.
Dezenove pilares. Cada tela explica o que é e traz um prompt que faz tudo por você; o que estiver [ENTRE COLCHETES] você substitui. Na instalação, um bloco para Windows e um para Mac.
→ ou espaço avança · I abre o índice · F tela cheia · ⌂ volta ao início
Índice
Dezenove pilares. Clique em um. Tecla I volta para cá. ⌂ no canto volta para a página inicial.
Instale o Claude Code
O que é: o Claude dentro do terminal. Ele lê o projeto, edita arquivos, roda comandos e testes e segue as regras do CLAUDE.md. Precisa de plano Pro, Max, Team ou Enterprise.
irm https://claude.ai/install.ps1 | iex claude --version claude doctor cd [PASTA-DO-PROJETO] claude # login pelo navegador
curl -fsSL https://claude.ai/install.sh | bash claude --version claude doctor cd [PASTA-DO-PROJETO] claude # login pelo navegador
O que é
Configuração base
O arquivo ~/.claude/settings.json vale para todos os projetos: qual modelo usar, o que o Claude pode fazer sem perguntar e o que é proibido. Uma vez por máquina.
- deny bloqueia: ler .env, rm -rf, push --force
- ask pergunta antes: git push
- model padrão e estilo de resposta curto
- No fim, um checkup do projeto sem alterar nada
Crie ou atualize ~/.claude/settings.json (sem apagar o que já existe) com: - "model": "opus" (ou "fable", se a conta tiver) e "outputStyle": "Concise" - permissions.deny: Read(./.env), Read(./.env.*), Bash(rm -rf *), Bash(git push --force*) - permissions.ask: Bash(git push*) - env: CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS=1 Mostre o arquivo final, valide o JSON e me diga como conferir com /config e /permissions. Depois leia este projeto e me diga em 10 linhas: o que ele faz, como rodar e testar, e o que falta para você trabalhar bem (CLAUDE.md, .env.example, testes, .brain). Não altere nada ainda.
Instale o VS Code
O que é: o editor. A extensão Claude Code abre o Claude ao lado do código (Ctrl/Cmd+Esc), aceita @arquivo, mostra o diff antes de aplicar e cola a referência da linha com Alt+Ctrl+K (Cmd+Option+K).
winget install Microsoft.VisualStudioCode code --install-extension anthropic.claude-code code --install-extension dbaeumer.vscode-eslint code --install-extension esbenp.prettier-vscode code --install-extension eamodio.gitlens cd [PASTA-DO-PROJETO]; code . # no VS Code: ícone do Claude na barra lateral → login
brew install --cask visual-studio-code code --install-extension anthropic.claude-code code --install-extension dbaeumer.vscode-eslint code --install-extension esbenp.prettier-vscode code --install-extension eamodio.gitlens cd [PASTA-DO-PROJETO] && code . # no VS Code: ícone do Claude na barra lateral → login
Instale o Obsidian
O que é: um editor de notas em Markdown. Um vault é só uma pasta de arquivos .md, então o Claude lê e escreve nela direto. É onde vive o cérebro (.brain) dos projetos: arquitetura, decisões, planos, diário e a biblioteca de UI.
winget install Obsidian.Obsidian New-Item -ItemType Directory -Force C:\Cerebro # Obsidian → Open folder as vault → C:\Cerebro # Settings → Community plugins → ligar
brew install --cask obsidian mkdir -p ~/Cerebro # Obsidian → Open folder as vault → ~/Cerebro # Settings → Community plugins → ligar
A organização do vault, o CLAUDE.md e as skills do Obsidian entram no prompt da tela 11 (Iniciar um projeto · O cérebro).
Instale o Git e o GitHub CLI
O que é: o Git guarda o histórico do código; o GitHub hospeda o repositório; o gh é o GitHub no terminal (login, criar repositório, abrir PR). Uma vez por máquina.
winget install Git.Git GitHub.cli git config --global user.name "[SEU NOME]" git config --global user.email "[SEU E-MAIL]" git config --global init.defaultBranch main git config --global core.autocrlf true gh auth login # GitHub.com → HTTPS → navegador
brew install git gh git config --global user.name "[SEU NOME]" git config --global user.email "[SEU E-MAIL]" git config --global init.defaultBranch main git config --global core.autocrlf input gh auth login # GitHub.com → HTTPS → navegador
Instale o Docker
O que é: roda Postgres, Redis e outros serviços em containers na sua máquina, sem instalar nada direto no sistema. Um docker-compose.yml sobe tudo com um comando; o mesmo container vai para a produção. Precisa do Docker Desktop aberto.
wsl --install # WSL 2 (se ainda não tiver); reinicie winget install Docker.DockerDesktop # abra o Docker Desktop uma vez docker --version docker compose version docker run --rm hello-world
brew install --cask docker # abra o Docker Desktop uma vez (baleia na barra) docker --version docker compose version docker run --rm hello-world
O docker-compose.yml do projeto (Postgres local) entra no prompt do pilar 12 (Postgres com segurança).
O que é
Segredos ficam no .env
Um arquivo local com senhas, tokens e chaves. Nunca vai para o git nem para o navegador: o código lê pelo ambiente. No React (Vite), tudo que começa com VITE_ é público e entra no bundle.
- .env só na sua máquina e no painel do deploy
- .env.example mesmas chaves, sem valor: esse vai pro git
- Front só VITE_* públicas; segredo mora na API
- Sessão em cookie httpOnly; nada de token no localStorage
- Próxima tela: pratique num VS Code de mentira
Organize os segredos deste projeto: 1. Crie .env.example por app (apps/api e apps/web) com toda variável que o código usa, sem valores. 2. Garanta no .gitignore: .env, .env.*, !.env.example, .claude/settings.local.json. Se algum .env já foi commitado, me avise e mostre como remover do histórico. 3. Faça a API ler pelo ambiente (dotenv só em desenvolvimento) e falhar no boot se faltar variável obrigatória. 4. Audite o front: liste toda VITE_* e diga se alguma é segredo; mova chamadas a serviços externos com chave para a API (front → nossa API → serviço externo). 5. Escreva .brain/seguranca.md com as regras: segredos só na API; front só VITE_ públicas; sessão em cookie httpOnly + Secure + SameSite=Lax; validação zod na API; rate limit no login; CORS só para o domínio do front; logs sem senha, token, CPF ou cartão; erro sem stack trace. Não leia o conteúdo do meu .env. Me mostre o que mudou.
Mini tutorial · VS Code
Crie o .env na prática
Um VS Code de mentira para treinar: crie o arquivo, digite as variáveis e veja o git ignorar tudo. Faça na mão ou clique em "Fazer por mim".
- Criar o arquivoNo Explorer, clique em
+ao lado de apps/api, digite.enve Enter. - Digitar as variáveisUma por linha,
CHAVE=valor. Sem aspas, sem espaço em volta do =. - Conferir o .gitignoreO .env fica cinza no Explorer: o git nem enxerga.
- Gerar o .env.exampleMesmas chaves, sem valores. Esse sim vai pro git.
- Front só com VITE_apps/web/.env só tem o que pode ser público.
Nenhum arquivo aberto.
Clique em + ao lado de apps/api para criar o .env, ou use ▶ Fazer por mim.
O que é
O cérebro: tudo modular, tudo no .brain
O .brain é o vault do Obsidian com o conhecimento do projeto: arquitetura, padrões, decisões, planos, diário e a biblioteca de UI. Antes de criar qualquer módulo ou componente, o Claude consulta o .brain; se existe, reutiliza; se não, cria e documenta.
- A · por projeto: ./.brain no git, junto do código
- B · central: um vault Cerebro com Projetos/[NOME]/brain e link ./.brain
- CLAUDE.md na raiz diz as regras; toda sessão já sabe
- Decisão vira ADR; dia vira diário
Configure o cérebro deste projeto. Primeiro me pergunte: (A) por projeto, ./.brain versionado no git, ou (B) central, vault em [C:\Cerebro ou ~/Cerebro]/Projetos/[NOME]/brain com link simbólico ./.brain (e ./.brain no .gitignore)? Depois: 1. Crie a estrutura: README.md (índice), arquitetura.md, padroes.md, api.md, banco.md, testes.md, local.md, ui/ (tokens.css, base.css, componentes/), decisoes/, planos/, diario/. Ignore .brain/.obsidian/workspace* no git. 2. Se for B, crie também no vault: 00-Inbox, Projetos, Areas, Recursos, Arquivo, Templates (projeto, decisao-adr, diario, reuniao) com frontmatter tags/projeto/data/status, e um CLAUDE.md na raiz do vault com as regras de escrita: Markdown do Obsidian, [[wikilinks]], callouts, um assunto por nota, notas em português e código em inglês, nunca apagar (mover para Arquivo/). 3. Crie o CLAUDE.md do projeto: o que faz e para quem; stack (monorepo pnpm · apps/web React+Vite+TS · apps/api Node+TS · Postgres · R2); comandos pnpm dev/test/lint/typecheck/build; regra do cérebro (procurar antes de criar; ADR em decisoes/; diário ao fim da tarefa); regras (100% modular, UI só com .brain/ui, segredos só na API, TDD, commits tipo(escopo): descrição); fluxo brainstorming → writing-plans → executing-plans → revisor + qa → verification-before-completion. 4. Instale as skills do Obsidian: /plugin marketplace add kepano/obsidian-skills e /plugin install obsidian@obsidian-skills. Se o projeto já existe, documente módulos, rotas, banco e componentes duplicados sem mudar código. Me mostre a árvore final.
O que é
Kickoff: o Claude entrevista você
Antes de qualquer código, uma entrevista: o que o sistema faz, para quem, que problema resolve, como você quer, o que é MVP. As respostas viram o .brain/produto.md e o plano do MVP.
- Uma pergunta por vez, sem pular
- Sempre monorepo Node + React
- Segredos só na API; front só VITE_*
- Nada de código antes do plano aprovado
Vamos iniciar o projeto [NOME]. Antes de qualquer código, me entreviste, UMA pergunta por vez, e só avance quando eu responder: 1. O que o sistema faz e para quem? Qual problema resolve hoje e como é feito sem ele? 2. Fluxos principais (3 a 5), telas, o que é MVP e o que fica para depois. 3. Precisa de login? Quais papéis? Há dados sensíveis (pessoais, pagamento, saúde)? 4. Integrações (Slack, Drive, Calendar, e-mail, pagamento), arquivos (R2), relatórios. 5. Hospedagem (Railway ou Cloudflare), domínio, prazo, o que não pode falhar. Stack fixa: monorepo pnpm · apps/web (React + Vite + TS) · apps/api (Node + TS) · Postgres · R2. Regras: 100% modular; UI só com .brain/ui; segredos só na API (front só VITE_* públicas); sessão em cookie httpOnly; validação zod na API; TDD; commits tipo(escopo): descrição. Boas práticas obrigatórias: nenhum token, chave ou client_secret em requisição do front; o front chama só a nossa API; CORS restrito; rate limit no login; logs sem dado pessoal. Ao terminar a entrevista: escreva .brain/produto.md (problema, usuários, fluxos, MVP, fora do escopo) e o plano do MVP em .brain/planos/mvp.md. Me mostre para aprovar. Nada de código antes da aprovação.
O que é
Monorepo Node + React
Um repositório só, com o front (apps/web), a API (apps/api) e pacotes compartilhados. Um comando roda tudo; tipos e componentes são compartilhados; cada app faz deploy separado. Todo projeto nasce igual.
- apps/web React + Vite + TS · só VITE_*
- apps/api Node + TS · segredos, banco, auth
- packages/ ui (k-*), types (zod), config (eslint, tsconfig)
- .brain/ e .claude/ na raiz
Monte o monorepo pnpm de [NOME] (crie a pasta e o git init se não existirem): - pnpm-workspace.yaml com apps/* e packages/* - apps/web: React + Vite + TS (só VITE_* públicas), proxy /api para a API em desenvolvimento - apps/api: Fastify + TS, rota GET /health, zod, dotenv, CORS só para o front, porta por process.env.PORT - packages/ui (componentes .brain/ui em React, prefixo k-), packages/types (contratos zod compartilhados entre web e api), packages/config (eslint, prettier, tsconfig base) - scripts na raiz: dev (web + api com concurrently), test, lint, typecheck, build - .env.example por app, .gitignore, README de 10 linhas, .claude/ e .brain/ na raiz Rode pnpm install e pnpm dev e cole a saída. Nenhuma feature ainda.
O que é
.brain inicial: arquitetura, pastas e auth
Antes da primeira feature o cérebro já descreve o sistema: como web, API e banco conversam, onde cada coisa vive, quem entra e como (auth) e o que nunca vai ao front. Nada de decidir na hora de codar.
- arquitetura.md com diagrama Mermaid e módulos por domínio
- auth.md padrão: cookie httpOnly, papéis por rota, argon2, rate limit
- seguranca.md, banco.md, testes.md, deploy.md
- Curto, objetivo, aprovado antes do código
Com base em .brain/produto.md, gere o .brain inicial de [NOME]: - arquitetura.md: diagrama Mermaid web ↔ api ↔ postgres ↔ r2, módulos por domínio (apps/api/src/modules/[dominio]) e fronteiras, sem import circular - pastas.md: onde cada coisa vive no monorepo - auth.md (padrão da casa): e-mail + senha com argon2 [ou OAuth Google]; sessão em cookie httpOnly, Secure, SameSite=Lax, 7 dias, renovada na API; papéis admin · [PAPEL-2] checados por middleware em cada rota (botão escondido não é permissão); o front só sabe "estou logado e sou X" via GET /me; senha mínima 10, rate limit 5/min no login, reset por link de 15 min; excluir a conta apaga tudo (LGPD) - seguranca.md: segredos só na API, front só VITE_, validação zod, CORS restrito, logs sem dado pessoal - banco.md com o schema inicial, testes.md (unitário, integração, E2E), local.md (rodar em 5 min), deploy.md (Railway ou Cloudflare) Arquivos curtos e objetivos. Me mostre antes de criar qualquer código.
O que é
Skill: um manual que o Claude segue
Um arquivo SKILL.md com o passo a passo de uma tarefa (testar, revisar UI, criar componente, otimizar). O Claude usa quando o pedido combina com a descrição. Global (~/.claude/skills) vale em todo projeto; do projeto (.claude/skills) vai no git.
- Marketplaces: claude-plugins-official (já vem), anthropics/skills, obra/superpowers, kepano/obsidian-skills
- Superpowers: brainstorming → writing-plans → executing-plans → verification
- As nossas quatro: qa-testes, ui-ux, design-system, otimizacao
/skillslista o que está ativo
Deixe as skills deste projeto funcionando, de uma vez:
1. Instale: /plugin install superpowers@claude-plugins-official · /plugin marketplace add anthropics/skills
e /plugin install example-skills@anthropic-agent-skills (frontend-design, webapp-testing, mcp-builder)
· /plugin install security-guidance@claude-plugins-official · /plugin install typescript-lsp@claude-plugins-official
· /plugin marketplace add kepano/obsidian-skills e /plugin install obsidian@obsidian-skills.
2. Crie as nossas quatro em .claude/skills/[nome]/SKILL.md (frontmatter name + description, corpo curto):
- qa-testes: critérios de aceite do plano (ou escreva 3 a 7 e peça OK); unitário (regras + bordas),
integração (rota + banco de teste), E2E do fluxo principal em 375 e 1280 px; rode testes, lint,
typecheck e build e cole só as falhas; relatório .brain/testes/QA-data-feature.md
(critério | ✅/❌ | evidência); bugs com passos para reproduzir; proibido "deve funcionar".
- ui-ux: antes, leia .brain/ui/tokens.css e componentes/ e só use o que está lá; checklist: uma ação
primária por tela, estados carregando/vazio/erro/sucesso, 375/768/1280 px, toque 44 px, contraste AA,
foco visível, teclado, aria, botões com verbo, erros dizem como resolver; entrega: ajustes por
impacto + componentes que faltaram (crie via design-system).
- design-system: confirme que não existe em .brain/ui/componentes (ou estenda com variante); HTML
semântico + CSS com prefixo k- usando só tokens.css + base.css (adeque as cores ao design do sistema
via tokens); responsivo, teclado, aria, estados hover/focus/disabled/loading; documente no topo
(quando usar, variantes, exemplo) e atualize INVENTARIO.md; substitua as cópias e rode qa-testes.
- otimizacao: meça antes (profiler, EXPLAIN ANALYZE, Lighthouse) → 3 gargalos por tempo → corrija um
por vez (índice, N+1, cache, paginação, lazy, bundle) → benchmark antes/depois → ADR; auditoria
(dependências circulares, módulos com 2 responsabilidades, UI duplicada, configs espalhadas) em
.brain/planos/otimizacao-data.md (problema | impacto | esforço); ganho < 10% não vale.
3. Copie as quatro para ~/.claude/skills/ (globais) e confirme com /skills.
4. Leia .brain/produto.md e arquitetura.md e diga que skill ainda falta para este projeto
(stack, integrações, deploy); se existir em marketplace, instale; se não, crie.
5. Adicione ao CLAUDE.md: "antes de responder, verifique se existe skill para o pedido e diga
'Usando: [skill]'. Para features: brainstorming → writing-plans → executing-plans → verification".
Me mostre a lista final com /skills.
O que é
Agente: um Claude especialista
Um subagente é um Claude com contexto próprio, ferramentas limitadas e modelo escolhido, definido em um arquivo de .claude/agents/. O trabalho verboso fica com ele; só o resumo volta para a conversa principal.
- revisor lê o diff antes do PR
- qa roda testes e prova com saída real
- arquiteto decide módulos e contratos
- documentador mantém o .brain em dia
- seguranca audita antes do release
- Para usar: "rode o subagent revisor no diff"
Crie de uma vez, em .claude/agents/, os cinco agentes abaixo. Cada arquivo com frontmatter (name, description, tools, model) e instruções curtas. Modelo de todos: opus (ou fable, se a conta tiver). Ao final rode ls .claude/agents e me mostre. revisor · opus · Read, Grep, Glob, Bash Leia .brain/padroes.md. Em git diff main...HEAD: bugs e bordas; segurança (entrada, segredos, autorização); algo já existe no .brain?; testes faltando. Saída por severidade com arquivo:linha e correção. Não altera código. Crítico bloqueia. qa · opus · Bash, Read, Grep, Glob Roda testes, lint, typecheck, build; cola só falhas (máx. 60 linhas). Cada critério ✅/❌ com comando + saída real. Nunca "passou" sem saída. arquiteto · opus · Read, Grep, Glob Lê o .brain inteiro. Propõe a solução mais simples que respeita a modularização: módulos, contratos, o que é compartilhado, riscos. ADR + Mermaid. Não implementa. documentador · opus · Read, Write, Edit, Grep, Glob, Bash Compara código e .brain; atualiza só o que mudou (arquitetura, api, banco, componentes); escreve o diário de hoje: o que mudou, por quê, como testar, pendências. Não inventa. seguranca · opus · Read, Grep, Glob, Bash OWASP Top 10, segredos no repo (git log incluído), npm audit, autorização por rota, validação de entrada, o que vaza pro front (VITE_), CORS, cookies, logs sensíveis. Achados com prova. Não altera. Depois adicione no CLAUDE.md: "fim de tarefa = revisor (corrija os críticos) → qa → documentador · release = seguranca" e me diga como chamar cada um (/agents).
O que é
Hook: roda sozinho em cada evento
Scripts que o Claude Code executa automaticamente: antes de um comando (PreToolUse), depois de editar um arquivo (PostToolUse) e ao terminar a resposta (Stop). Servem para formatar, bloquear o perigoso e registrar o diário. No Windows precisam do Git Bash.
- format.sh formata o arquivo editado
- guard.sh bloqueia rm -rf, push --force, DROP, ler .env
- diario.sh anota o que mudou em .brain/diario
/hooksmostra o que está ativo
Crie os hooks deste projeto em .claude/hooks/ (bash, chmod +x) e registre em .claude/settings.json: - format.sh (PostToolUse, matcher Edit|Write): lê tool_input.file_path do JSON no stdin (jq) e formata: prettier para ts/tsx/js/jsx/css/md/json, black para py. Sai em silêncio se não houver arquivo. - guard.sh (PreToolUse, matcher Bash): lê tool_input.command e bloqueia com exit 2 (mensagem "Bloqueado: …" no stderr) rm -rf /, git push --force, git reset --hard, DROP TABLE/DATABASE e qualquer leitura de .env (cat, type, Get-Content). - diario.sh (Stop): garante .brain/diario/AAAA-MM-DD.md com frontmatter (tags: [diario], data) e anexa hora + git diff --stat. Stack: [STACK]. Me diga como testar cada um; eu confiro com /hooks.
O que é
MCP: o plugue do Claude com outros sistemas
Model Context Protocol. É como o Claude conversa com GitHub, Jira, Figma, Sentry, Slack, Drive, Calendar, o nosso banco ou a nossa API. Plugins oficiais já vêm configurados; conectores do claude.ai valem dentro do Claude Code; token sempre por variável, nunca no arquivo.
- Plugins: github, atlassian, figma, sentry, slack, supabase…
- Conectores claude.ai: Slack, Drive, Calendar → /mcp
- .mcp.json: servidores próprios com ${VARIAVEL}
- mcp-builder: um MCP para a nossa API
Configure as integrações deste projeto:
1. Plugins oficiais: pergunte quais usamos e instale (/plugin install github@claude-plugins-official,
atlassian para Jira, figma, sentry, slack, supabase, linear, notion, vercel).
2. Slack, Google Drive e Google Calendar: me guie para ligar em claude.ai → Configurações → Conectores
e autenticar aqui com /mcp (aparecem como "claude.ai Slack", "claude.ai Google Drive"…).
Teste listando meus eventos de amanhã.
3. Crie .mcp.json no projeto para servidores próprios com tokens por ${VARIAVEL} (nunca o valor)
e mostre como adicionar um servidor remoto com claude mcp add --transport http.
4. Use mcp-builder e crie um MCP em mcp/ para a nossa API [NOME] com as ferramentas listar_x,
criar_x e status_x; token via env; testes; registre em .mcp.json.
5. Fluxo diário: ao fechar tarefa, poste no Slack #[CANAL] o resumo do diário (5 linhas); toda
segunda crie no Calendar o evento "Review [NOME]" (30 min) e salve o plano da semana em
Drive/[PASTA]/planos/. Antes de enviar qualquer coisa para fora, me mostre o texto.
Documente tudo em .brain/integracoes.md e desligue em /mcp o que não usamos.
O que é
Postgres com segurança
O banco relacional do projeto. Em desenvolvimento roda no Docker; em produção, no Railway. A API é a única que conhece o banco, com um usuário sem superpoderes, SSL e migrations versionadas.
- DATABASE_URL só em apps/api/.env
- Usuário app com SELECT/INSERT/UPDATE/DELETE, nunca o postgres
- ?sslmode=require fora do local
- Drizzle: schema, migrations, seed; só queries parametrizadas
- Backup diário e como restaurar
Ligue o Postgres em apps/api com segurança: 1. Local: docker-compose.yml com postgres:16 (usuário, senha e banco de desenvolvimento), volume persistente e script db:up. DATABASE_URL de dev no .env.example (sem senha real). 2. Drizzle: schema em src/db/schema.ts, migrations em drizzle/, conexão por DATABASE_URL com pool e SSL (sslmode=require) fora do local; scripts db:migrate, db:seed e db:studio. 3. Só queries parametrizadas (nunca string concatenada); banco de teste separado para os testes de integração. 4. Produção (Railway → New → Database → PostgreSQL): escreva em .brain/banco.md o SQL que roda uma vez: CREATE ROLE app LOGIN PASSWORD '…'; GRANT CONNECT ON DATABASE; GRANT USAGE, CREATE ON SCHEMA public; ALTER DEFAULT PRIVILEGES … GRANT SELECT, INSERT, UPDATE, DELETE ON TABLES TO app. A API usa o usuário app, nunca o postgres. 5. Backup diário e restauração, também em .brain/banco.md. Nunca leia meu .env. Rode as migrations no banco local e cole a saída.
O que é
Arquivos no Cloudflare R2
Armazenamento de arquivos da Cloudflare, compatível com S3 e sem taxa de saída. As chaves ficam na API; o navegador envia e lê direto por URL pré-assinada, que vale poucos minutos.
- Painel: R2 → Create bucket (privado) → Manage API Tokens → Object Read & Write só neste bucket
- Copie Access Key ID, Secret e o Account ID (aparecem uma vez)
- Chaves só em apps/api/.env
- Front usa a URL, nunca as chaves
Crie o módulo storage em apps/api usando o Cloudflare R2: - cliente @aws-sdk/client-s3 com region "auto" e endpoint https://[R2_ACCOUNT_ID].r2.cloudflarestorage.com; credenciais R2_ACCOUNT_ID, R2_ACCESS_KEY_ID, R2_SECRET_ACCESS_KEY e R2_BUCKET só no .env da API (adicione ao .env.example) - POST /uploads/presign: valida tipo e tamanho (PDF, PNG, JPG até 10 MB), gera a chave [pasta]/[uuid].[ext] e devolve URL pré-assinada de PUT com 5 min (@aws-sdk/s3-request-presigner) - GET /files/:id: URL pré-assinada de leitura de 15 min, só para quem tem permissão - registro do arquivo no Postgres (dono, nome, tamanho, tipo, chave) - no front, componente de upload de .brain/ui que usa a URL, nunca as chaves; bucket privado Documente em .brain/integracoes.md o passo a passo do painel (Create bucket → Manage R2 API Tokens → Object Read & Write só neste bucket → copiar as chaves e o Account ID).
O que é
Hospedar no Railway
Hospedagem que roda a API, o front e o Postgres como serviços, com deploy a cada push na main. As variáveis ficam no painel; no monorepo cada app vira um serviço com seu Root Directory.
npm i -g @railway/cli· railway login · init · link · up- api: Root apps/api, healthcheck /health, PORT injetada
- web: Root apps/web, VITE_API_URL da produção
- DATABASE_URL = ${{Postgres.DATABASE_URL}}
Prepare o deploy de [NOME] no Railway:
1. apps/api ouvindo em process.env.PORT, GET /health, CORS só para o domínio do web; build e start
funcionando a partir da raiz: pnpm install --frozen-lockfile && pnpm --filter api build /
pnpm --filter api start.
2. apps/web: build pnpm --filter web build e start pnpm --filter web preview --host 0.0.0.0
--port $PORT; VITE_API_URL da produção.
3. Escreva .brain/deploy.md com o passo a passo: npm i -g @railway/cli, railway login, railway init,
railway add --database postgres, railway link, um serviço por app com Root Directory apps/api e
apps/web, DATABASE_URL=${{Postgres.DATABASE_URL}}, variáveis do .env.example (sem valores),
railway domain, healthcheck /health e deploy pelo GitHub na main.
4. Checklist de release: migrations, variáveis conferidas, smoke test no domínio.
Nada de segredo no repositório.
O que é
Hospedar na Cloudflare
CDN, DNS e hospedagem. O Pages publica o React de graça no mundo inteiro; o Workers roda uma API leve; o domínio ganha SSL e proxy. API com Postgres tradicional e jobs longos fica no Railway; o web quase sempre fica no Pages.
- Pages: wrangler pages deploy apps/web/dist
- Domínio: DNS + SSL automáticos, api. como CNAME para o Railway
- Workers (opcional): Hono + wrangler secret, nunca segredo no toml
Publique [NOME] na Cloudflare: 1. Web no Pages: npm i -g wrangler, wrangler login, build pnpm --filter web build, wrangler pages deploy apps/web/dist --project-name [NOME]; ou Workers & Pages → Connect to Git (build pnpm --filter web build, output apps/web/dist, VITE_API_URL de produção). Crie o script deploy:web. 2. Domínio [DOMINIO]: DNS na Cloudflare, SSL automático, www → raiz; api.[DOMINIO] como CNAME para a API no Railway com proxy ligado. 3. Se a API for para Workers: adapte apps/api para Hono (roda em Node e em Workers), wrangler.toml (name, main, compatibility_date), segredos via wrangler secret put JWT_SECRET e DATABASE_URL (Hyperdrive para o Postgres), wrangler deploy. Documente em .brain/deploy.md e me diga quando escolher Railway ou Workers para a API.
O que é
Testar localmente
Antes de dizer "pronto", o sistema sobe, é testado e provado com evidência: ambiente reprodutível, smoke test das rotas e uma passada no navegador. Claude in Chrome precisa da extensão e de claude --chrome.
- docker-compose + scripts dev, test, lint, db:migrate, db:seed
- smoke.sh falha se uma rota não responder 200 em 5 s
- Navegador: screenshots, console, 375 px
- Bugs por severidade; não corrige ainda
Deixe [NOME] testável localmente: 1. Ambiente: docker-compose com [POSTGRES/REDIS], scripts dev, test, lint, typecheck, db:migrate, db:seed, e .brain/local.md "rodando em 5 minutos". Rode do zero e cole a saída. 2. scripts/smoke.sh: sobe a app, chama [ROTA-1], [ROTA-2], [ROTA-3], falha se alguma não responder 200 em 5 s, derruba a app. Rode e cole. 3. No navegador (claude --chrome): abra http://localhost:[PORTA], percorra [LOGIN] → [DASHBOARD] → [AÇÃO], screenshot de cada tela, erros de console e o que quebra em 375 px. Lista de bugs por severidade. Não corrija ainda.
O que é
Git no dia a dia
Uma branch por tarefa, commits pequenos com mensagem padrão (tipo(escopo): descrição), PR revisado e CI verde antes de juntar na main. O Claude faz quase tudo; você confere o link.
git switch -c feat/[nome]·git add -pgh pr create --fill·gh pr checks·gh pr merge --squash/commitdentro do claude- CI: lint, typecheck, testes e build em cada PR
Configure o fluxo de Git de [NOME]: 1. Se ainda não existe: git init com .gitignore do monorepo (node_modules, dist, .env, .env.*, !.env.example, .claude/settings.local.json), commit "chore: bootstrap" e gh repo create [ORG/NOME] --private --source=. --push. 2. Instale /plugin install commit-commands@claude-plugins-official e /plugin install github@claude-plugins-official; rode /install-github-app para revisão automática nos PRs. 3. .github/workflows/ci.yml: lint, typecheck, testes e build em cada PR; proteja a main (PR obrigatório, CI verde). 4. Regra para toda tarefa daqui em diante: branch feat/[nome], commits pequenos tipo(escopo): descrição com testes e lint antes de cada um, PR com gh pr create (resumo, como testar, checklist) e me mostrar o link. Anote isso no CLAUDE.md.
Prompt pronto
Feature: do plano à entrega
Cole uma vez por feature. O Claude pensa (brainstorming), planeja, executa em lotes, revisa, testa, documenta e abre o PR. Você aprova o plano e confere o link.
- Consulta o .brain antes de propor
- UI só com .brain/ui
- revisor a cada lote; qa e documentador no fim
- Nada de código antes do plano aprovado
Quero: [O QUE]. Contexto: [MÓDULO / TELA]. Pronto quando: [COMO EU SEI]. 1. Use brainstorming, uma pergunta por vez. Consulte o .brain antes de propor: reutilize o que existe. 2. Quando eu aprovar, writing-plans e salve em .brain/planos/[NOME].md. 3. Execute com executing-plans em lotes de 3 tarefas; UI só com .brain/ui (se faltar, design-system primeiro); a cada lote rode o subagent revisor e corrija os críticos. 4. No fim: qa-testes com os critérios do plano (unitário, integração, E2E em 375 e 1280 px, relatório com evidência), verification-before-completion, documentador (diário + .brain) e PR com gh pr create. Me entregue: link do PR, pendências e evidência dos testes. Nada de código antes do plano aprovado.
Prompt pronto
Tela nova ou revisão de UI
Para criar ou revisar qualquer tela usando só a biblioteca .brain/ui, com usabilidade, acessibilidade e responsividade conferidas, e depois unificar o que estiver duplicado no sistema.
- Usa a skill ui-ux; cria o que falta via design-system
- Cores sempre pelos tokens, nunca fixas
- Screenshot em 375 e 1280 px
- Uma ação primária por tela; 4 estados
Tela [NOME] para [QUEM] fazer [TAREFA]. Use ui-ux. Opção A: /design com este brief. Opção B: frontend-design no código. Só componentes de .brain/ui; se faltar, design-system antes (prefixo k-, só tokens, adeque as cores ao design do sistema via tokens.css). Uma ação primária por tela; estados carregando/vazio/erro/sucesso; screenshot em 375 e 1280 px. Depois audite todas as telas: liste cada botão, dropdown, tabela e modal que não vem de .brain/ui e unifique por PR (uma família por vez) com qa-testes no fim.
Prompt pronto
Bug ou regra ignorada
Quando algo quebrou ou o Claude ignorou uma regra. Reproduzir antes de corrigir; correção mínima com teste de regressão; e, se foi regra, reler o CLAUDE.md e refazer.
- Reproduz → 3 hipóteses → testa a mais provável
- Correção mínima + teste de regressão
- Você confere com /context, /skills, /hooks, /mcp, /usage
Bug: [ERRO]. Esperado: [X]. Reproduzir: [PASSOS]. Não corrija ainda: reproduza, levante 3 hipóteses, teste a mais provável, faça a correção mínima + teste de regressão, rode a suíte e me mostre o diff. Se você não seguiu [REGRA]: releia CLAUDE.md e .brain/padroes.md, diga o que faltou e refaça. Eu confiro com /context, /skills, /hooks, /mcp e /usage.
Prompt pronto
Otimizar e revisar a saúde
Quando algo está lento ou para revisar o sistema inteiro. Medir antes, um gargalo por vez, benchmark antes e depois, e um plano priorizado do que vale a pena.
- Usa a skill otimizacao
- Profiler, EXPLAIN ANALYZE, Lighthouse
- Índice, N+1, cache, paginação, lazy, bundle
- Ganho < 10% não vale a complexidade
Use otimizacao em [ROTA/TELA/JOB]. Hoje: [TEMPO]. Meta: [META]. Meça primeiro (profiler, EXPLAIN ANALYZE, Lighthouse), liste os 3 gargalos por tempo e corrija um por vez (índice, N+1, cache, paginação, lazy, bundle) com benchmark antes/depois e ADR. Depois audite o sistema inteiro: dependências circulares, módulos com duas responsabilidades, UI duplicada, configs espalhadas → .brain/planos/otimizacao-[DATA].md priorizado (problema | impacto | esforço). Ganho < 10% não vale a complexidade.
Biblioteca de componentes
O que é: a UI padrão da casa. 51 componentes e 148 variações, responsivos, sem dependências, sobre um único tokens.css. Página própria: preview ao vivo, filtro, busca e código com um clique.
Salve tokens.css + base.css em .brain/ui/ e cada componente que eu colar em .brain/ui/componentes/[nome].html, sem alterar. Crie INVENTARIO.md (quando usar, variantes). Regra no CLAUDE.md: UI só com .brain/ui; componente novo passa pela skill design-system. Converta [select, datepicker, tabela] para [React/Vue/Svelte] em src/ui/ mantendo classes e tokens. Sempre: adeque as cores ao design do sistema via tokens.css (nenhuma cor fixa no componente).
- Pensabrainstorming
- Planejawriting-plans
- Executaexecuting-plans
- Provaqa + verification
- Guarda.brain / diário
Modular, documentado, testado. O que repetir três vezes vira skill, agente ou componente.
code.claude.com/docs · github.com/obra/superpowers · github.com/kepano/obsidian-skills · github.com/anthropics/skills