Modernizando um projeto ASP.NET Core MVC com Vue, PrimeVue e Tailwind CSS usando GitHub Copilot e agentes especializados

O GitHub Copilot deixou de ser apenas um autocompletar de código para se tornar um agente capaz de planejar, implementar e validar mudanças inteiras em uma base de código. Este artigo conta como usei o GitHub Copilot em modo agente para modernizar o front-end de um projeto ASP.NET Core MVC clássico, adicionando Vue 3, PrimeVue e Tailwind CSS v4 sem reescrever a aplicação como uma SPA, e como esse trabalho terminou virando duas skills reutilizáveis na forma de Custom Agents do GitHub Copilot: Frontend-Tooling-Specialist e Frontend-Specialist.

O projeto de partida é o BookStore, uma aplicação ASP.NET Core MVC com Razor Views, Bootstrap 5 e jQuery, estruturada em três camadas (Domain, Application e Web). A ideia inicial era simples: usar o PrimeVue com o Tailwind CSS no front-end. O problema é que PrimeVue é uma biblioteca de componentes para Vue.js, e ela não se encaixa naturalmente em uma página Razor renderizada no servidor. Antes de sair criando arquivos, o primeiro valor real do GitHub Copilot apareceu aqui: em vez de assumir uma arquitetura, ele parou para perguntar como eu queria integrar Vue numa aplicação que não usava Vue, oferecendo opções concretas (só Tailwind, Vue em páginas específicas, ou migração total para SPA). Essa pausa para validar o escopo evitou um retrabalho enorme, porque a resposta certa (Vue só em páginas específicas, com build via Vite) definiu toda a arquitetura que veio depois.

Tela Home:

Tela Books:

Tela Authors:

Com o escopo definido, o GitHub Copilot investigou os controllers, serviços e views existentes antes de tocar em qualquer arquivo, para não inventar nomes de rotas ou de entidades que não existiam. A partir daí, ele criou um projeto Vite dentro de ClientApp, isolado do restante da solução .NET:

{
  "dependencies": {
    "@primeuix/themes": "^1.0.0",
    "primeicons": "^7.0.0",
    "primevue": "^4.3.0",
    "vue": "^3.5.0"
  },
  "devDependencies": {
    "@tailwindcss/vite": "^4.0.0",
    "@vitejs/plugin-vue": "^5.2.0",
    "tailwindcss": "^4.0.0",
    "tailwindcss-primeui": "^0.6.0",
    "typescript": "^5.7.0",
    "vite": "^6.0.0",
    "vue-tsc": "^2.2.0"
  }
}

Esse conjunto de dependências resume a integração inteira. O Vue 3 fornece o runtime de componentes, o PrimeVue entrega os componentes prontos (tabelas, diálogos, menus), o Tailwind CSS v4 cuida da estilização utilitária, e o pacote tailwindcss-primeui é o plugin oficial da PrimeTek que faz a ponte entre os dois mundos, expondo os tokens de cor do tema PrimeVue como classes Tailwind, como bg-primary e text-muted-color, em vez de depender de valores hexadecimais soltos pelo código. O Tailwind v4 mudou a forma de configuração: não existe mais tailwind.config.js, tudo é feito via CSS.

Essas duas linhas, dentro do style.css do ClientApp, são suficientes para ativar o Tailwind e o plugin do PrimeVue, seguindo exatamente a recomendação da documentação oficial. O plugin @tailwindcss/vite, por sua vez, é registrado no vite.config.ts, junto com o plugin de Vue, seguindo o guia oficial de instalação do Tailwind com Vite.

Cada tela de listagem (Books, Authors, Customers) passou a montar um componente Vue com um PrimeVue DataTable, buscando dados de novos endpoints JSON que reaproveitam os serviços de aplicação já existentes, sem duplicar a paginação no cliente. O GitHub Copilot também validou o trabalho sozinho: rodou npm run build, depois dotnet build, e só reportou a tarefa como concluída depois de confirmar os dois builds passando e o endpoint retornando o JSON esperado.

Tela do navegador mostrando a listagem de livros com o PrimeVue DataTable estilizado com Tailwind, dentro da página Razor do BookStore:

O trabalho não parou aí. Em sessões seguintes, o mesmo padrão foi expandido: o Bootstrap foi removido do projeto inteiro, o layout global passou a carregar o bundle do Vue de forma única, uma sidebar em Vue substituiu a navbar antiga, e as telas de Books e Authors ganharam formulários de criação, edição, detalhes e exclusão totalmente em diálogos PrimeVue, cada um seguindo especificações extraídas do Figma através do servidor MCP do Figma. Esse crescimento de escopo é justamente o motivo pelo qual o trabalho foi encapsulado em Custom Agents do GitHub Copilot, o mecanismo do VS Code para gravar personas especializadas em arquivos .agent.md dentro de .github/agents. Um Custom Agent combina um conjunto restrito de ferramentas com instruções específicas de domínio, de forma que trocar de agente troca também o comportamento do GitHub Copilot para aquela tarefa, sem precisar repetir contexto a cada conversa.

O primeiro agente criado foi o Frontend-Tooling-Specialist, responsável pela infraestrutura: o projeto Vite dentro de ClientApp, o conjunto de dependências, a remoção do Bootstrap, a integração do bundle no layout e a camada de API JSON que alimenta os componentes.

O campo description é a peça mais importante desse arquivo. É por meio dele que o GitHub Copilot decide, sozinho, quando aquele agente deve ser acionado como subagente dentro de uma tarefa maior, então cada palavra ali funciona como um gatilho de busca. A lista tools restringe deliberadamente o que o agente pode fazer: leitura, edição, busca, execução de comandos e acesso à web, sem, por exemplo, permissões para mexer em infraestrutura de nuvem. No corpo do arquivo, esse agente documenta o estado atual do repositório (versões instaladas, estrutura do vite.config.ts, convenção de nomes fixos main.js/main.css) e um roteiro passo a passo de migração, incluindo a configuração dos servidores MCP:

Esse arquivo mcp.json conecta o GitHub Copilot a dois servidores Model Context Protocol: o primevue, que expõe a documentação e os exemplos de cada componente diretamente dentro do chat, e o figma-mcp, que permite ler nós de um arquivo Figma e extrair medidas, cores e textos reais em vez de depender de capturas de tela. O Frontend-Tooling-Specialist trata a existência e a validade desse arquivo como parte do seu escopo, recriando-o com esse formato exato sempre que estiver ausente ou corrompido.

O segundo agente, Frontend-Specialist, cuida da metade que o primeiro deliberadamente não toca: a criação e a estilização dos componentes Vue em si.

Tela do figma com o layout e os componentes:

A divisão entre os dois agentes segue um princípio simples de responsabilidade única: o Tooling-Specialist decide como o Vue é empacotado, servido e alimentado por dados, enquanto o Specialist decide como cada tela se parece e se comporta, sempre ancorado num nó real do Figma em vez de aproximações visuais. Essa separação evita que uma tarefa de estilo acabe mexendo em vite.config.ts, ou que uma tarefa de infraestrutura reescreva um componente sem necessidade. Cada agente também carrega uma seção fixa de constraints, coisas que ele nunca deve fazer, como reintroduzir Bootstrap, adicionar paginação no lado do cliente ou inventar um valor de design quando existe um nó do Figma disponível para consulta.

Os dois agentes compartilham ainda um fluxo obrigatório de sincronização com um vault de documentação em Markdown, lido e escrito através de skills próprias antes e depois de qualquer tarefa. Isso significa que, sessão após sessão, o GitHub Copilot não perde o histórico de decisões de arquitetura, mesmo quando a conversa muda de contexto ou de dia. Foi exatamente esse mecanismo que permitiu reconstruir, meses depois, uma explicação completa de tudo o que havia sido implementado, incluindo detalhes finos como a convenção de nomenclatura de classes Tailwind ou o motivo de uma tela ainda não ter sido migrada.

Imagem do seletor de agentes do GitHub Copilot no VS Code, mostrando Frontend-Tooling-Specialist e Frontend-Specialist na lista junto com os agentes de domínio do projeto:

O ganho real de usar o GitHub Copilot aqui não foi só gerar código mais rápido. Foi conseguir transformar decisões de arquitetura, convenções de estilo e armadilhas já resolvidas (como o Tailwind v4 não enxergar classes usadas só em arquivos .cshtml fora da pasta do Vite) em conhecimento reutilizável, na forma de dois agentes com escopos e ferramentas bem definidos. Qualquer pessoa do time que abrir esse repositório pela primeira vez pode simplesmente trocar para um desses agentes e continuar o trabalho exatamente de onde ele parou, sem precisar reconstruir esse contexto do zero.

Esse foi o retrato da jornada até aqui: um MVC clássico ganhando Vue, PrimeVue e Tailwind CSS através do GitHub Copilot, e o conhecimento acumulado nesse processo virando dois agentes especializados. Mas ainda falta mostrar como esses agentes garantem fidelidade pixel a pixel com o design original, sem depender de suposições visuais. Na Parte 2 dessa série, o foco vai para o Model Context Protocol e para o servidor MCP do Figma, mostrando como o Frontend-Specialist extrai medidas, cores e espaçamentos reais de um frame do Figma antes de escrever qualquer componente Vue.

O código completo deste projeto está disponível no meu repositório no GitHub.

Links e Docks: