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 (-p = --print, sai ao terminar)
claude -p "explique a estrutura do projeto"

# Com arquivo específico: use @ para referenciar
claude -p "refatore @src/components/Modal.vue para Composition API"

# Ou mande conteúdo pela entrada padrão (ótimo para scripts e CI)
git diff main --name-only | claude -p "revise esses arquivos em busca de bugs"

/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

/run              # sobe seu app e mostra a mudança funcionando
/verify           # builda, roda e confirma que a mudança funciona
/code-review      # revisa o diff atual em busca de bugs
/security-review  # procura vulnerabilidades no diff
/chrome           # conecta o Claude ao seu navegador
/plugin           # instala skills, agents e MCPs prontos
/schedule         # agenda uma tarefa recorrente na nuvem

# 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?"

# Iniciar a sessão com o navegador conectado
claude --chrome

# Ou, dentro da sessão: status, permissões e "Enabled by default"
/chrome

# Exemplo de prompt:
# "Abra localhost:5173, envie o formulário vazio e
#  confira se as mensagens de erro aparecem"

# Instalar no projeto (note o -- antes do comando)
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"

# Nuxt — docs, módulos e deploy oficiais
claude mcp add --transport http nuxt https://nuxt.com/mcp

# Figma — servidor remoto oficial (login via OAuth no /mcp)
claude mcp add --transport http figma https://mcp.figma.com/mcp

# Exemplo:
# "Implemente este frame do Figma como componente Vue
#  usando nossas CSS vars: <link do frame>"

# 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
# ou você chama direto: /vue-component BotaoPrimario

# .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"
# Gerenciar agents: /agents

// .claude/settings.json
{
  "hooks": {
    "PostToolUse": [{
      "matcher": "Edit|Write",
      "hooks": [{
        "type": "command",
        "command": "${CLAUDE_PROJECT_DIR}/.claude/hooks/lint.sh"
      }]
    }]
  }
}

// .claude/hooks/lint.sh  (lembre do chmod +x)
#!/bin/bash
# O hook recebe um JSON na entrada padrão com o arquivo editado
file=$(jq -r '.tool_input.file_path')
case "$file" in
  *.vue|*.ts|*.js) npx eslint --fix "$file" ;;
esac

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

/plugin                 # abre o marketplace (aba Discover)

# Adicionar o marketplace do seu time (repo GitHub)
/plugin marketplace add minha-empresa/claude-plugins

# Instalar um plugin de um marketplace
/plugin install nome-do-plugin@nome-do-marketplace

# Escopo "project" ativa o plugin para todo o time
# via .claude/settings.json (vai para o Git)

# Mandar uma tarefa longa para a nuvem
# (dê push antes: a nuvem clona o repositório remoto)
claude --cloud "migre os componentes de Options API para Composition API"

# Trazer uma sessão da nuvem para o terminal local
claude --teleport

# Continuar a sessão atual no app desktop (diffs visuais)
/desktop

# 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

/verify   # confirma no app rodando que a mudança funciona

# No editor (VS Code / Cursor / JetBrains)
# selecione um trecho e pergunte na aba do Claude Code
# — o diff aparece inline para aceitar ou recusar

/code-review   # revisão de bugs do diff atual

"Revise também 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"