Claude+Obsidian
Claude+Obsidian

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.

Windows · PowerShell
irm https://claude.ai/install.ps1 | iex
claude --version
claude doctor
cd [PASTA-DO-PROJETO]
claude    # login pelo navegador
Mac · Terminal
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
cole no claude · configurar
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).

Windows · PowerShell
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
Mac · Terminal
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.

Windows · PowerShell
winget install Obsidian.Obsidian
New-Item -ItemType Directory -Force C:\Cerebro
# Obsidian → Open folder as vault → C:\Cerebro
# Settings → Community plugins → ligar
Mac · Terminal
brew install --cask obsidian
mkdir -p ~/Cerebro
# Obsidian → Open folder as vault → ~/Cerebro
# Settings → Community plugins → ligar
Prefere baixar pelo site?Baixar o Obsidian ↗

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.

Windows · PowerShell
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
Mac · Terminal
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.

Windows · PowerShell
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
Mac · Terminal
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
cole no claude · organizar os segredos
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".

  1. Criar o arquivoNo Explorer, clique em + ao lado de apps/api, digite .env e Enter.
  2. Digitar as variáveisUma por linha, CHAVE=valor. Sem aspas, sem espaço em volta do =.
  3. Conferir o .gitignoreO .env fica cinza no Explorer: o git nem enxerga.
  4. Gerar o .env.exampleMesmas chaves, sem valores. Esse sim vai pro git.
  5. Front só com VITE_apps/web/.env só tem o que pode ser público.
meuapp — Visual Studio Code
Explorer
MEUAPP

    Nenhum arquivo aberto.
    Clique em + ao lado de apps/api para criar o .env, ou use ▶ Fazer por mim.

    Terminal
    ⎇ main

    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
    cole no claude · configurar o cérebro
    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
    cole no claude · kickoff do projeto
    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
    cole no claude · montar o monorepo
    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
    cole no claude · gerar o .brain inicial
    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
    • /skills lista o que está ativo
    cole no claude · deixar as skills funcionando
    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"
    cole no claude · criar os 5 agentes
    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
    • /hooks mostra o que está ativo
    cole no claude · criar os hooks
    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
    cole no claude · configurar as integrações
    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
    cole no claude · ligar o banco
    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
    cole no claude · módulo de arquivos
    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}}
    cole no claude · preparar o deploy
    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
    cole no claude · publicar
    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
    cole no claude · deixar testável
    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 -p
    • gh pr create --fill · gh pr checks · gh pr merge --squash
    • /commit dentro do claude
    • CI: lint, typecheck, testes e build em cada PR
    cole no claude · configurar o fluxo de git
    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
    cole no claude · nova feature
    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
    cole no claude · tela nova
    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
    cole no claude · bug / regra
    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
    cole no claude · otimizar
    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.

    Abrir biblioteca ↗
    BotõesBotões, Variações, Controle segmentadoFormuláriosCampos de texto, Checkbox, radio e switch, Upload de arquivosDropdownsSelect customizado, Multi-seleção, Autocomplete, Menu de açõesDatasSeletor de data, Período (de – até), Seletor de horaDadosTabela responsiva, Lista, Cards de indicador, Badges e status, Barra de filtrosNavegaçãoAbas, Breadcrumb e passosLayoutCasca do sistemaFeedbackModal de confirmação, Toast, Alertas, Vazio e carregando, Progresso e tooltip, Acordeão
    cole · instalar no .brain
    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).
    
    1. Pensabrainstorming
    2. Planejawriting-plans
    3. Executaexecuting-plans
    4. Provaqa + verification
    5. 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

    By Kahne's Systems LTDA