# Agentes e skills para frontend e interfaces

React, Vue, Angular, design systems, acessibilidade e desempenho no browser.

Trabalho de frontend raramente falha na primeira semana. O problema aparece quando o projeto já tem dezenas de componentes, três formas diferentes de definir um botão, folhas de estilo que ninguém se atreve a apagar e um ecrã que deixou de funcionar com teclado. É nessa altura que cada alteração pequena custa horas e ninguém consegue explicar bem porquê.

Os componentes desta página dão ao Claude Code contexto específico de interface: convenções de cada framework, regras de design tokens, critérios WCAG e padrões de renderização. Na prática, em vez de gerar mais um componente isolado, o modelo passa a seguir o sistema que já existe no repositório, a justificar as escolhas de estado e a assinalar problemas de contraste ou de navegação por teclado antes do merge.

Comece pela framework do projeto e instale apenas um agente principal. Junte depois uma skill de design system, se a equipa mantém uma biblioteca de componentes, e uma revisão de acessibilidade, que compensa em qualquer site público. As peças de desempenho valem sobretudo quando já existe uma queixa concreta de lentidão, não como precaução antecipada.


## Construir a interface: frameworks e renderização

Agentes e skills que conhecem as convenções de cada framework. Escolha o que corresponde ao stack do projeto, não todos.

- **frontend-developer** (Agentes): Serve de ponto de entrada quando a equipa mantém aplicações em React, Vue e Angular ao mesmo tempo e precisa de coerência entre elas, incluindo a integração com o backend. [ficha](https://doutorai.pt/componentes/agents__frontend-developer)
- **senior-frontend** (Skills): Cobre o percurso completo em React, Next.js, TypeScript e Tailwind, do scaffolding de componentes à análise de bundle, útil quando o projeto cresce sem regras escritas. [ficha](https://doutorai.pt/componentes/skills__senior-frontend)
- **expert-react-frontend-engineer** (Agentes): Para quem já trabalha em React 19: hooks modernos, Server Components e Actions, com atenção à tipagem e ao efeito de cada escolha no desempenho. [ficha](https://doutorai.pt/componentes/agents__expert-react-frontend-engineer)
- **vue-expert** (Agentes): Indicado quando a aplicação Vue 3 depende da Composition API e a reatividade começa a pesar, ou quando o projeto assenta em Nuxt 3 com preocupações de escala. [ficha](https://doutorai.pt/componentes/agents__vue-expert)
- **angular-architect** (Agentes): Pensado para bases Angular grandes, com estado complexo, padrões RxJS por otimizar e decisões de micro-frontend que já não cabem num único módulo. [ficha](https://doutorai.pt/componentes/agents__angular-architect)
- **svelte-expert** (Agentes): Trata Svelte de forma idiomática, com foco em programação reativa, desenho de componentes e otimização do lado do cliente. [ficha](https://doutorai.pt/componentes/agents__0xfurai-subagents__agents-svelte-expert)
- **nextjs-app-router-patterns** (Skills): Concentra os padrões do App Router do Next.js 14+ e dos Server Components, útil quando a dúvida é onde traçar a fronteira entre servidor e cliente. [ficha](https://doutorai.pt/componentes/skills__nextjs-app-router-patterns)

## Design system, CSS e componentes reutilizáveis

Peças para manter a interface consistente: tokens, estilos e a API dos componentes que a equipa vai reutilizar durante anos.

- **frontend-design** (Skills): Ajuda a produzir interfaces com identidade própria em vez do resultado genérico do costume, seja numa landing page, num dashboard ou num componente isolado. [ficha](https://doutorai.pt/componentes/skills__frontend-design)
- **ui-ux-pro-max** (Skills): Reúne estilos, paletas, pares tipográficos e padrões para vários stacks, o que evita voltar a decidir cor, espaçamento e tipografia em cada ecrã novo. [ficha](https://doutorai.pt/componentes/skills__ui-ux-pro-max)
- **ui-design-system** (Skills): Gera design tokens, documentação de componentes e cálculos de layout responsivo, com material de handoff para quem recebe o trabalho do lado do código. [ficha](https://doutorai.pt/componentes/skills__ui-design-system)
- **tailwind-patterns** (Skills): Cobre Tailwind CSS v4, configuração a partir do próprio CSS, container queries e arquitetura de tokens, relevante sobretudo para quem vem de versões anteriores. [ficha](https://doutorai.pt/componentes/skills__tailwind-patterns)
- **css-expert** (Agentes): Boa escolha quando o problema é mesmo CSS: layouts difíceis, comportamento responsivo, animações e folhas de estilo que precisam de limpeza. [ficha](https://doutorai.pt/componentes/agents__0xfurai-subagents__agents-css-expert)
- **web-component-design** (Skills): Compara padrões de componentes em React, Vue e Svelte, incluindo CSS-in-JS e estratégias de composição, útil ao desenhar a API pública de uma biblioteca interna. [ficha](https://doutorai.pt/componentes/skills__wshobson-agents__web-component-design)

## Acessibilidade e revisão da interface

Duas coisas diferentes, muitas vezes confundidas: conformidade WCAG e qualidade percebida da interface. Aqui tem ferramentas para as duas.

- **ui-ux-designer** (Agentes): Faz a crítica da interface a partir de capturas de ecrã ou de mockups, apontando problemas de usabilidade, falhas de acessibilidade e escolhas estéticas discutíveis. [ficha](https://doutorai.pt/componentes/agents__ui-ux-designer)
- **web-accessibility-checker** (Agentes): Especialista em conformidade WCAG, testes de acessibilidade e compatibilidade com leitores de ecrã, para a auditoria que costuma ficar para o fim. [ficha](https://doutorai.pt/componentes/agents__web-accessibility-checker)
- **a11y-audit** (Skills): Vai além do relatório: analisa, corrige e verifica os níveis A e AA da WCAG 2.2 em React, Next.js, Vue, Angular, Svelte ou HTML simples, com integração em CI/CD. [ficha](https://doutorai.pt/componentes/skills__alirezarezvani-claude-skills__a11y-audit)
- **web-design-guidelines** (Skills): Revê o código da interface contra um conjunto de diretrizes de web, o que funciona bem como último passo antes do merge quando não há revisor humano disponível. [ficha](https://doutorai.pt/componentes/skills__web-design-guidelines)

## Desempenho, animação e leitura de código existente

Para quando a interface já existe e o problema passou a ser lentidão, complexidade herdada ou movimento mal calibrado.

- **react-best-practices** (Skills): Reúne mais de quarenta regras de desempenho para React e Next.js, de waterfalls de dados ao tamanho do bundle, aplicáveis enquanto se escreve e não só a corrigir. [ficha](https://doutorai.pt/componentes/skills__react-best-practices)
- **react-performance-optimization** (Agentes): Entra quando a aplicação já está lenta: identifica estrangulamentos, otimiza bundles e renderizações e persegue fugas de memória em código que ninguém quer reescrever. [ficha](https://doutorai.pt/componentes/agents__react-performance-optimization)
- **deepgraph-react** (Conetores): Conetor que analisa hierarquias de componentes, fluxos de estado e dependências, útil para perceber a arquitetura de uma aplicação React herdada de outra equipa. [ficha](https://doutorai.pt/componentes/mcps__deepgraph-react)
- **scroll-experience** (Skills): Para páginas em que o scroll conta uma história: animações ligadas ao scroll, parallax e narrativa interativa, sem perder de vista o custo em desempenho. [ficha](https://doutorai.pt/componentes/skills__scroll-experience)

## Como instalar e onde colocar cada peça

Cada ficha na biblioteca técnica do Doutor AI indica a categoria (agente, skill, comando, conetor) e o caminho original do ficheiro. A regra prática é simples: o que é específico do projeto vive na pasta .claude/ do repositório, para que toda a equipa herde as mesmas convenções ao clonar o repositório; o que utiliza em todos os projetos vive na pasta .claude/ da sua conta. Os conetores MCP são a exceção, porque exigem uma entrada de configuração com o comando de arranque do servidor. Comece por copiar um único componente, confirme que o Claude Code o invoca no contexto certo e só depois acrescente o seguinte.

## Combinar as peças sem as pôr a competir

A ordem que costuma funcionar: um agente de framework para escrever o código, uma skill de design system para manter tokens e variantes coerentes, uma revisão de acessibilidade antes do merge e só depois as peças de desempenho. Instalar dois agentes de React com opiniões diferentes sobre estado ou estilo produz revisões contraditórias e desperdiça contexto, por isso vale a pena escolher um e retirar o outro. Se a interface tem uma biblioteca de componentes própria, indique explicitamente onde vive; sem essa referência, qualquer destas peças tende a criar componentes novos em vez de reutilizar os que já existem no repositório.

## O que estes componentes não resolvem

A verificação automática de acessibilidade apanha contraste, atributos em falta e ordem de cabeçalhos, mas não substitui um teste real com leitor de ecrã e navegação apenas por teclado. As skills de desempenho raciocinam sobre o código, não medem o que acontece nos dispositivos dos seus utilizadores: continua a precisar de dados de campo. E repare nas versões que cada descrição assume, seja React 19, Tailwind v4 ou Angular v20, porque num projeto mais antigo parte das recomendações não se aplica. Trate estas peças como um revisor atento e informado, não como uma garantia de qualidade.

## Perguntas frequentes

### Preciso de instalar um agente para cada framework?

Não. Instale o que corresponde ao stack em que trabalha todos os dias. Se mantém aplicações em frameworks diferentes, um agente multi-framework como o frontend-developer evita ter três especialistas em memória; se vive dentro de uma única framework, o especialista dedicado dá respostas mais precisas sobre reatividade, estado e renderização.

### Qual é a diferença entre um agente e uma skill neste contexto?

Um agente é um especialista que recebe uma tarefa e trabalha de forma autónoma, com o seu próprio contexto, o que se adequa a auditorias e revisões. Uma skill é conhecimento que o Claude Code carrega quando o assunto surge, útil para aplicar regras de estilo, tokens ou padrões enquanto escreve código.

### Estas peças impõem um design ao projeto?

As skills de design trazem padrões, paletas e escalas tipográficas como ponto de partida, não como obrigação. Se já existe um design system, aponte o modelo para os ficheiros de tokens e componentes do repositório antes de pedir ecrãs novos. Sem essa indicação, o resultado tende a seguir os padrões que a skill traz de origem.

### Uma auditoria de acessibilidade chega para cumprir a WCAG?

Chega para eliminar a camada de problemas mais comuns e para preparar terreno. A conformidade formal exige verificação manual: percorrer a página só com teclado, testar com leitor de ecrã, confirmar textos alternativos com sentido e validar formulários com utilizadores reais. As ferramentas automáticas indicam onde procurar, não fecham o processo.

### Faz sentido usar isto num projeto antigo, sem design system?

Sim, e costuma ser onde há mais a ganhar. Comece por um conetor de análise de código para mapear componentes e fluxos de estado, depois use uma skill de design system para extrair tokens do que já existe. A revisão de acessibilidade também produz resultados rápidos em bases antigas.


Fonte: https://doutorai.pt/para/frontend-e-interfaces - Doutor AI, selecao feita a mao da biblioteca tecnica.