Roadmap Claude Code
para Frontend Devs

claude              # inicia sessão interativa
/init               # Claude escaneia o projeto e cria CLAUDE.md
/help               # lista todos os comandos disponíveis

# Executar tarefa direta
claude -p "explique a estrutura do projeto"

# Com arquivo específico
claude -p "refatore esse componente para Composition API" src/components/Modal.vue

# Modo headless para scripts
claude --print "liste todos os componentes sem prop validation"

/clear    # limpa contexto da conversa (economiza tokens)
/compact  # comprime histórico mantendo essencial
/plan     # Claude cria plano ANTES de executar (recomendado)
/rewind   # abre o menu de checkpoints (ou aperte Esc 2x)
          # restaura código e/ou conversa para qualquer prompt anterior

# Adicionar ao projeto atual
claude mcp add context7 -- npx -y @upstash/context7-mcp@latest

# Uso: adicione "use context7" nos seus prompts
# "use context7 — como usar defineModel() no Vue 3.4?"

# Instalar no projeto
claude mcp add chrome-devtools --scope project \
  npx chrome-devtools-mcp@latest

# Exemplo de uso no prompt:
# "Corrija o bug no componente Table e verifique
#  no browser se os dados estão renderizando"

# Instalar no projeto
npm init playwright@latest

# tests/hero.spec.ts
import { test, expect } from '@playwright/test'

test('hero visual', async ({ page }) => {
  await page.goto('/')
  await expect(page).toHaveScreenshot('hero.png')
})

# Rodar (compara com o screenshot de referência)
npx playwright test

# 1ª execução: cria a referência (commitar no Git)
# Mudança intencional? Atualize a referência:
npx playwright test --update-snapshots

# Prompt útil: "Rode os testes visuais do Playwright,
# analise os diffs e diga se são regressões reais
# ou mudanças intencionais que precisam de --update-snapshots"

# Servidor remoto oficial do GitHub (recomendado)
claude mcp add --transport http github https://api.githubcopilot.com/mcp/

# Exemplo real:
# "Leia a issue #42, implemente a feature e crie um PR"

claude mcp list           # lista todos
claude mcp get context7   # detalhes de um específico
claude mcp remove nome    # remover

# .claude/skills/vue-component/SKILL.md
---
name: vue-component
description: Como criar componentes Vue neste projeto (Composition API, props tipadas, style scoped)
---

Ao criar um componente novo:
- <script setup> com Composition API, nunca Options API
- Props via defineProps<{ ... }>() com defineModel quando fizer sentido
- Estilos em <style scoped>, usando as CSS vars do design system
- Nome do arquivo em PascalCase

# Claude carrega essa skill sozinho quando o pedido bate com a descrição

# .claude/agents/code-reviewer.md
---
name: code-reviewer
description: Revisa mudanças de código em busca de bugs e desvios de padrão
tools: Read, Grep, Bash
---

Revise o diff atual focando em: bugs reais, acessibilidade,
performance e aderência às convenções do CLAUDE.md.
Não sugira refatorações cosméticas.

# Invocar: "use o subagent code-reviewer para revisar essa PR"

// .claude/settings.json
{
  "hooks": {
    "PostToolUse": [{
      "matcher": "Edit|Write",
      "hooks": [{ "type": "command", "command": "npx eslint --fix $CLAUDE_FILE_PATH" }]
    }]
  }
}

// Roda automaticamente após cada edição de arquivo — sem precisar pedir

// cursor settings.json — teclas úteis
{
  "cursor.chat.defaultModel": "claude-sonnet-5",
  "cursor.composer.defaultModel": "claude-sonnet-5",
  "cursor.general.gitMentionAuthor": true,
  "cursor.chat.alwaysSearchWeb": false
}

// Atalhos essenciais:
// Ctrl+K  — editar seleção com IA
// Ctrl+L  — abrir chat
// Ctrl+I  — Composer (agêntico, multi-arquivo)
// Ctrl+Shift+L — adicionar arquivo ao contexto

# 1. Abrir projeto no terminal
cd meu-projeto && claude

# 2. Pedir resumo do estado atual
"O que está pendente? Leia os últimos commits e
 issues abertas no GitHub para me dar um resumo"

# 3. Planejar a feature do dia
"/plan Preciso implementar filtro de data no
 componente DataTable com persistência via URL"

# Claude Code para tarefas grandes (terminal)
"use context7 — crie o composable useTableFilters
 seguindo nosso padrão de composables"

"Crie testes Vitest para o useTableFilters
 cobrindo happy path e edge cases"

"Verifique no browser se o filtro está funcionando
 com dados reais da API"  ← Claude in Chrome

# Cursor para ajustes inline (editor)
# Ctrl+K em uma linha para correção rápida
# Ctrl+L para perguntas sobre o arquivo aberto

"Revise as mudanças desta sessão pensando em:
 performance, acessibilidade, e nossos padrões
 do CLAUDE.md"

"Crie um PR no GitHub com:
 - título seguindo convenção do projeto
 - descrição com o que foi feito e por quê
 - checklist de testes"  ← GitHub MCP

# Componente novo
"use context7 — crie o componente [Nome] que:
 - recebe as props: [lista]
 - emite os eventos: [lista]
 - segue os padrões do CLAUDE.md
 - inclui tipos TypeScript completos"

# Refatoração
"Refatore [arquivo] para:
 - Separar lógica em composable
 - Melhorar tipagem
 - Não mudar o comportamento externo"

# Debug
"[Descreva o bug]. Reproduza localmente,
 encontre a causa raiz e corrija sem
 quebrar outros comportamentos"

# Para QA
"Crie cenários BDD em PT-BR para [feature],
 cobrindo: happy path, erros de validação,
 permissões e edge cases"