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.
21 componentes escolhidos à mão, de 4 ângulos diferentes.
Agentes e skills que conhecem as convenções de cada framework. Escolha o que corresponde ao stack do projeto, não todos.
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.
Use ao criar aplicações frontend completas em frameworks como React, Vue e Angular, que exijam competências em múltiplas frameworks e integração full-
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.
Competência abrangente de desenvolvimento de frontend para construir aplicações web modernas e eficientes usando ReactJS, NextJS, TypeScript, Tailwind
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.
Engenheiro de frontend especialista em React 19.2, especializado em hooks modernos, Server Components, Actions, TypeScript e otimização de performance
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.
Use este agente ao criar aplicações Vue 3 que exijam domínio da Composition API, otimização de reatividade ou desenvolvimento Nuxt 3 com preocupações
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.
Use ao desenhar a arquitetura de aplicações Angular 15+ empresariais com gestão de estado complexa, otimizar padrões RxJS, desenhar sistemas micro-fro
Trata Svelte de forma idiomática, com foco em programação reativa, desenho de componentes e otimização do lado do cliente.
Domina o desenvolvimento em Svelte.js com foco na criação de aplicações Svelte com bom desempenho, de fácil manutenção e idiomáticas. Especializa-se e
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.
Padrões abrangentes para a arquitetura Next.js 14+ App Router, Server Components e desenvolvimento React full-stack moderno.
Peças para manter a interface consistente: tokens, estilos e a API dos componentes que a equipa vai reutilizar durante anos.
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.
Crie interfaces de frontend distintas e prontas para produção com elevada qualidade de design. Use esta skill quando o utilizador pedir para construir
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.
Inteligência de design de UI/UX. 50 estilos, 21 paletas, 50 combinações de fontes, 20 gráficos, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React
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.
Toolkit de sistema de design de UI para Designer de UI Sénior, incluindo geração de design tokens, documentação de componentes, cálculos de design res
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.
Princípios do Tailwind CSS v4. Configuração CSS-first, container queries, padrões modernos, arquitetura de design tokens.
Boa escolha quando o problema é mesmo CSS: layouts difíceis, comportamento responsivo, animações e folhas de estilo que precisam de limpeza.
Estilista CSS mestre com experiência em layouts, design responsivo, animações e acessibilidade. Trata de layouts complexos e otimiza para desempenho e
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.
Dominar padrões de componentes de React, Vue e Svelte, incluindo CSS-in-JS, estratégias de composição e arquitetura de componentes reutilizáveis. Usar
Duas coisas diferentes, muitas vezes confundidas: conformidade WCAG e qualidade percebida da interface. Aqui tem ferramentas para as duas.
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.
Utilize proativamente ao rever design de UI/UX, avaliar interfaces visuais, auditar componentes web para problemas de usabilidade, verificar a conform
Especialista em conformidade WCAG, testes de acessibilidade e compatibilidade com leitores de ecrã, para a auditoria que costuma ficar para o fim.
Especialista em conformidade com acessibilidade web. Use PROATIVAMENTE para auditorias de conformidade WCAG, testes de acessibilidade, compatibilidade
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.
Skill de auditoria de acessibilidade para analisar, corrigir e verificar a conformidade com o WCAG 2.2 Nível A e AA em bases de código React, Next.js,
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.
Rever código de UI para conformidade com as Web Interface Guidelines. Usar quando for solicitado para "rever a minha UI", "verificar a acessibilidade"
Para quando a interface já existe e o problema passou a ser lentidão, complexidade herdada ou movimento mal calibrado.
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.
Guia completo de otimização de desempenho de React e Next.js com mais de 40 regras para eliminar waterfalls, otimizar bundles e melhorar a renderizaçã
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.
Especialista em otimização de desempenho do React. Use PROATIVAMENTE para identificar e corrigir gargalos de desempenho (bottlenecks), otimização de b
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.
Analise hierarquias de componentes React, fluxos de estado e dependências. Visualize a arquitetura da sua aplicação React.
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.
Especialista na criação de experiências imersivas baseadas em scroll – narrativa parallax, animações de scroll, narrativas interativas e experiências
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.
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.
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.
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.
Prompts e recursos curados de fontes internacionais, normalizados e categorizados: mais de 11 mil. Um robô do Doutor AI verifica as fontes todos os dias e traz o que há de novo.
Precisa de uma solução à medida?
Não sabe por onde começar a usar IA no seu negócio? Receba uma avaliação gratuita e um plano à medida - sem compromisso.
O Doutor AI dá-lhe 1859 prompts de IA prontos a copiar, por indústria e em português simples - mais uma biblioteca técnica completa para quem quer ir mais longe.
