Dev Frontend × Claude AI

Roadmap Claude Code
para Frontend Devs

Guia prático para migrar do plugin VS Code para um setup profissional com Claude Code CLI + MCP Servers no seu workflow Vue.js.

Etapa 1 de 4

Etapa 1 — Instalando o Claude Code CLI

Migração do plugin VS Code para o terminal com superpoderes

Por que migrar? O plugin do VS Code é reativo — você pede, ele responde. O Claude Code CLI é agêntico: ele lê todo o seu projeto, executa comandos, navega em arquivos e toma decisões encadeadas sozinho.

Requisitos

Pré-requisitos

Instalação

# Instalar globalmente
npm install -g @anthropic-ai/claude-code

# Verificar instalação
claude --version

# Primeiro login (abre navegador)
claude

Primeiros comandos essenciais

Inicializar projeto

Dentro da sua pasta de projeto Vue/frontend:

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

Modo prompt direto (sem abrir sessão)

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

Comandos de sessão

/clear    # limpa contexto da conversa (economiza tokens)
/compact  # comprime histórico mantendo essencial
/plan     # Claude cria plano ANTES de executar (recomendado)
/diff     # mostra todas as mudanças feitas na sessão
/undo     # desfaz última mudança de arquivo

Dica pro: Sempre use /plan antes de pedir mudanças grandes. O Claude mostra o que vai fazer e você pode corrigir antes de executar — evita refazer trabalho.

Checklist de setup

Node.js 18+ instalado
Claude Code instalado globalmente
Login feito com conta Anthropic
Testou claude --version no terminal
Rodou /init no projeto principal

Etapa 2 — Configurando MCP Servers

Conecte o Claude ao seu ecossistema de ferramentas

O que é MCP? Model Context Protocol é o padrão aberto da Anthropic para conectar IAs a ferramentas externas. Cada MCP server adiciona "superpoderes" específicos ao Claude Code.

MCP Servers essenciais para frontend Vue

context7

Documentação em tempo real de Vue, Nuxt, Vite, etc. Elimina código desatualizado.

npx -y @upstash/context7-mcp

figma-mcp

Acessa designs do Figma e converte para HTML/CSS/Vue automaticamente.

npx figma-developer-mcp

github-mcp

Lê issues, cria PRs, analisa commits sem sair do terminal.

mcp.github.com/sse (HTTP)

chrome-devtools-mcp

Automatiza o browser: clica, inspeciona, lê console. Claude verifica o resultado visualmente.

npx chrome-devtools-mcp@latest

shadcn-mcp

Registry atualizado do shadcn/ui com props TypeScript precisas.

shadcn.io/api/mcp (HTTP)

sequential-thinking

Raciocínio estruturado para decisões de arquitetura complexas.

npx @modelcontextprotocol/server-sequential-thinking

Como instalar cada MCP

Context7 — Docs em tempo real

Resolve o problema de Claude sugerir código desatualizado do Vue/Nuxt/Vite.

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

Chrome DevTools MCP — Fechar o loop visual

Claude verifica se a mudança funcionou no browser sem você precisar checar.

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

GitHub MCP — Workflow completo

# Via HTTP (recomendado)
claude mcp add --transport http github https://mcp.github.com/sse

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

Ver MCPs instalados

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

Escopo dos MCPs: Use --scope project para MCPs específicos do projeto (salvo em .claude/) e sem escopo para MCPs globais (disponíveis em todos os projetos).

Checklist MCP

Context7 instalado e testado
Chrome DevTools MCP configurado
GitHub MCP conectado ao repo
Testou um prompt usando "use context7"

Etapa 3 — Criando seu CLAUDE.md

A memória permanente do Claude para o seu projeto Vue

O que é o CLAUDE.md? Um arquivo na raiz do projeto que o Claude lê automaticamente em toda sessão. É onde você define as regras, padrões de código, stack e contexto do projeto — uma vez, para sempre.

CLAUDE.md completo para projeto Vue (template)

# CLAUDE.md — [Nome do Projeto]

## Stack
- Framework: Vue 3 (Composition API + script setup)
- Build: Vite 5
- Estado: Pinia
- Roteamento: Vue Router 4
- UI: shadcn-vue + Tailwind CSS v4
- HTTP: Axios com interceptors em src/services/api.ts
- Testes: Vitest + Vue Test Utils
- Linguagem: TypeScript (strict mode)

## Estrutura de pastas
src/
  components/   → componentes reutilizáveis (PascalCase)
  composables/  → useXxx.ts — lógica reutilizável
  views/        → páginas (mapeadas ao router)
  stores/       → Pinia stores (useXxxStore)
  services/     → chamadas de API
  types/        → interfaces e types globais

## Convenções de código
- Sempre usar <script setup lang="ts">
- Props com defineProps<{ ... }>() e withDefaults
- Emits tipados: defineEmits<{ update: [value: string] }>()
- Nomear composables: useFeatureName.ts
- Stores nomeadas: useAuthStore, useCartStore
- Evitar Options API — apenas Composition API
- Sem any explícito — prefer unknown

## Padrões de API
- Base URL em .env (VITE_API_URL)
- Interceptor de auth em src/services/api.ts
- Erros tratados via useApiError composable
- Loading states com useAsyncState do VueUse

## Git
- Commits: feat/fix/chore/docs/refactor: mensagem em PT-BR
- Branch: feature/nome-da-feature
- PRs sempre com: descrição, screenshots, checklist de teste

## O que NUNCA fazer
- Nunca usar document.querySelector — usar template refs
- Nunca mutar props diretamente
- Nunca commitar .env
- Nunca usar var — apenas const/let
- Nunca criar componentes acima de 200 linhas sem dividir

## Contexto do projeto
SaaS de [descreva o produto]. Usuários são [perfil].
Time: 3 devs frontend, 2 backend.
Ambiente: dev (localhost:5173), staging, prod.

## Ao fazer mudanças
1. Sempre rodar os testes afetados
2. Verificar no browser com Chrome DevTools MCP
3. Atualizar tipos se necessário
4. Manter consistência com padrões acima

Seção de Testes e QA (bônus)

## Testes e QA
- Framework: Vitest + Vue Test Utils
- E2E: Playwright
- Padrão de teste: Arrange / Act / Assert
- Nomenclatura: ComponentName.spec.ts
- Mocks em: src/__mocks__/
- Cobertura mínima: 80% em composables e stores

# BDD scenarios
- Scenarios em: tests/scenarios/ (Given-When-Then em PT-BR)
- Bug reports em: JIRA com template padrão do time
- Ao criar testes, sempre cobrir:
    happy path, error states, edge cases, permissões

Pro tip: Rode /init no Claude Code — ele analisa seu projeto e gera um CLAUDE.md inicial automaticamente. Você só precisa refinar e adicionar as regras do seu time.

Checklist CLAUDE.md

CLAUDE.md criado na raiz do projeto
Stack documentada com versões
Convenções de código definidas
"O que nunca fazer" listado
Testou se Claude segue as regras em nova sessão

Etapa 4 — Cursor + Workflow diário

Setup do editor e como combinar tudo no dia a dia

A combinação ideal: Claude Code no terminal para tarefas agênticas grandes + Cursor/VS Code para edição inline e code review. Os dois se complementam.

Cursor — Setup rápido

Instalação

Baixe em cursor.com — é VS Code forkado, suas extensões migram automaticamente.

Configurações recomendadas

// cursor settings.json — teclas úteis
{
  "cursor.chat.defaultModel": "claude-sonnet-4-5",
  "cursor.composer.defaultModel": "claude-sonnet-4-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

Workflow diário completo

Início do dia

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

Durante o desenvolvimento

# 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"  ← Chrome DevTools MCP

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

Code Review e PR

"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

Templates de prompt para Vue/Frontend

Templates que funcionam

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

Regra de ouro: Quanto mais contexto você dá, melhor o resultado. Mencione sempre: o objetivo, as restrições, o padrão esperado. O CLAUDE.md cuida do contexto permanente — nos prompts, foque no contexto situacional.

Checklist final

Cursor instalado e settings migrados
Workflow Claude Code + Cursor definido
Testou o fluxo completo: plan → implement → test → PR
Templates de prompt salvos no CLAUDE.md
Time alinhado sobre os novos padrões

Setup completo!

Agora você tem um workflow profissional com IA. Quer dominar Vue.js junto com as melhores práticas do mercado?

Conhecer o Curso Vue.js Expert →

Roadmap Claude Code para Frontend Devs

Etapa 1 — Instalando o Claude Code CLI

Requisitos

Instalação

Primeiros comandos essenciais

Checklist de setup

Etapa 2 — Configurando MCP Servers

MCP Servers essenciais para frontend Vue

Como instalar cada MCP

Checklist MCP

Etapa 3 — Criando seu CLAUDE.md

CLAUDE.md completo para projeto Vue (template)

Seção de Testes e QA (bônus)

Checklist CLAUDE.md

Etapa 4 — Cursor + Workflow diário

Cursor — Setup rápido

Workflow diário completo

Templates de prompt para Vue/Frontend

Checklist final

Setup completo!

Roadmap Claude Code
para Frontend Devs