Habilidade de Frontend de Alta Agência

Quando Usar

• Use quando o usuário pedir para criar, melhorar ou revisar UI de frontend com forte senso de design e restrições anti-genéricas.
• Use quando React, Next.js, Tailwind, motion, estados de componentes, tipografia, espaçamento, cor ou comportamento responsivo precisarem de julgamento de design de nível sênior.
• Use quando o resultado precisar sobrescrever vieses comuns de UI de LLM, como heróis centralizados, gradientes roxos, uso excessivo de cards, estados ruins e layouts frágeis.

Exemplo

Solicitação do usuário:

Revise esta interface com @design-taste-frontend, identifique os problemas de design de maior impacto e proponha uma melhoria pronta para implementação.

Limitações

• Esta habilidade fornece orientação de design e implementação de frontend; ela não substitui requisitos de produto específicos do projeto, revisão de acessibilidade ou testes de usuário.
• Verifique as versões do framework, dependências instaladas, comportamento responsivo e saída de build no repositório de destino antes de tratar a UI gerada como pronta para produção.
• Não force estas regras de design quando o produto existente, o sistema de marca ou as convenções da plataforma exigirem uma direção visual diferente.

1. CONFIGURAÇÃO DE LINHA DE BASE ATIVA

• VARIAÇÃO_DESIGN: 8 (1=Simetria Perfeita, 10=Caos Artístico)
• INTENSIDADE_MOVIMENTO: 6 (1=Estático/Sem movimento, 10=Cinemático/Física Mágica)
• DENSIDADE_VISUAL: 4 (1=Galeria de Arte/Arejado, 10=Cockpit de Avião/Dados Empacotados)

Instrução da IA: A linha de base padrão para todas as gerações é estritamente definida para estes valores (8, 6, 4). Não peça ao usuário para editar este arquivo. Caso contrário, SEMPRE ouça o usuário: adapte esses valores dinamicamente com base no que ele solicitar explicitamente em seus prompts de chat. Use esta linha de base (ou valores substituídos pelo usuário) como suas variáveis globais para direcionar a lógica específica nas Seções 3 a 7.

2. ARQUITETURA E CONVENÇÕES PADRÃO

A menos que o usuário especifique explicitamente uma pilha diferente, adira a estas restrições estruturais para manter a consistência:

• VERIFICAÇÃO DE DEPENDÊNCIA [OBRIGATÓRIO]: Antes de importar QUALQUER biblioteca de terceiros (por exemplo, framer-motion, lucide-react, zustand), você DEVE verificar package.json. Se o pacote estiver faltando, você DEVE exibir o comando de instalação (por exemplo, npm install package-name) antes de fornecer o código. Nunca presuma que uma biblioteca existe.
• Framework e Interatividade: React ou Next.js. Padrão para Server Components (RSC).
  • SEGURANÇA RSC: O estado global funciona APENAS em Client Components. No Next.js, envolva os provedores em um componente "use client".
  • ISOLAMENTO DE INTERATIVIDADE: Se as Seções 4 ou 7 (Motion/Liquid Glass) estiverem ativas, o componente de UI interativo específico DEVE ser extraído como um componente folha isolado com 'use client' no topo. Server Components devem renderizar exclusivamente layouts estáticos.
• Gerenciamento de Estado: Use useState/useReducer local para UI isolada. Use estado global estritamente para evitar prop-drilling profundo.
• Política de Estilização: Use Tailwind CSS (v3/v4) para 90% da estilização.
  • BLOQUEIO DE VERSÃO DO TAILWIND: Verifique package.json primeiro. Não use sintaxe v4 em projetos v3.
  • GUARDA DE CONFIGURAÇÃO T4: Para v4, NÃO use o plugin tailwindcss em postcss.config.js. Use @tailwindcss/postcss ou o plugin Vite.
• POLÍTICA ANTI-EMOJI [CRÍTICO]: NUNCA use emojis em código, marcação, conteúdo de texto ou texto alternativo. Substitua símbolos por ícones de alta qualidade (Radix, Phosphor) ou primitivas SVG limpas. Emojis são PROIBIDOS.
• Responsividade e Espaçamento:
  • Padronize breakpoints (sm, md, lg, xl).
  • Contenha layouts de página usando max-w-[1400px] mx-auto ou max-w-7xl.
  • Estabilidade de Viewport [CRÍTICO]: NUNCA use h-screen para seções Hero de altura total. SEMPRE use min-h-[100dvh] para evitar saltos catastróficos de layout em navegadores móveis (iOS Safari).
  • Grid em vez de Matemática Flex: NUNCA use matemática complexa de porcentagem com flexbox (w-[calc(33%-1rem)]). SEMPRE use CSS Grid (grid grid-cols-1 md:grid-cols-3 gap-6) para estruturas confiáveis.
• Ícones: Você DEVE usar exatamente @phosphor-icons/react ou @radix-ui/react-icons como os caminhos de importação (verifique a versão instalada). Padronize strokeWidth globalmente (por exemplo, use exclusivamente 1.5 ou 2.0).

3. DIRETIVAS DE ENGENHARIA DE DESIGN (Correção de Viés)

LLMs têm vieses estatísticos em direção a padrões de clichê de UI específicos. Construa proativamente interfaces premium usando estas regras de engenharia:

Regra 1: Tipografia Determinística

• Display/Títulos: Padrão para text-4xl md:text-6xl tracking-tighter leading-none.

…