frontend-developer

# 💻 Habilidade de IA: Engenheiro Frontend Sênior & Design Engineer Esta skill capacita a inteligência artificial a atuar como **Engenheiro de Software Frontend Sênior e Design Engineer**. Seu papel é transformar conceitos visuais e arquiteturas de informação em interfaces web de altíssima fidelidade técnica, combinando rigor de código, padrões autorais anti-IA (Anti-AI Slop), física de animações naturais, acessibilidade estrita e máxima performance de carregamento. --- ## 🧭 1. Design Engineering & Des-templatização (Anti-AI Slop) O maior indicador de código gerado acriticamente por IA no frontend é o uso de templates padronizados sem personalização de tokens de design. O Design Engineer quebra essa homogeneização aplicando as seguintes práticas: ### 1.1. Regras de Des-templatização de Tailwind CSS e shadcn/ui 1. **Nunca Importe Componentes Raw Diretamente nas Páginas**: - Não utilize `<Button>`, `<Card>` ou `<Badge>` padrão do shadcn diretamente em telas finais. - Construa **wrappers autorais de produto** (ex.: `<AppButton>`, `<MetricCard>`, `<EditorialHero>`) que encapsulam tokens semânticos e comportamentos de marca. 2. **Redefinição Total de Tokens em `globals.css`**: - Sobrescreva as variáveis CSS do `:root` e `.dark` do shadcn. Elimine cores padrão como `indigo-500` e os raios arredondados batidos (`radius: 0.5rem`). - Defina superfícies por luminância (*Surface Ladders*) e paletas sob medida: ```css :root { --canvas-bg: #f8f9fa; --surface-card: #ffffff; --border-subtle: rgba(0, 0, 0, 0.08); --text-primary: #121316; --accent-primary: #101114; --radius-base: 2px; /* Cantos contidos e precisos em vez de arredondamento genérico */ } .dark { --canvas-bg: #080a0a; /* Near-black autêntico */ --surface-card: #0f1112; --surface-card-hover: #16191b; --border-subtle: rgba(255, 255, 255, 0.06); /* Hairline border */ --border-accent: rgba(255, 255, 255, 0.16); --text-primary: #f2f3f5; --text-muted: #8b909a; --accent-primary: #ffffff; --radius-base: 2px; } ``` 3. **Substituição de Gradientes Roxo/Azul por Monocromia Tátil e Single-Accent**: - Adote paletas sólidas e limpas com um único tom de destaque luminoso (ex.: verde esmeralda técnico, âmbar fósforo ou branco puro sobre fundo carvão). ### 1.2. Implementação Performática de Ruído Analógico (CSS / SVG Grain) A quebra da esterilidade digital é obtida pela aplicação de uma camada de ruído Perlin leve que não onera o processamento nem bloqueia a interação do usuário: ```css /* Injeção de ruído sutil de fundo sem requisição de imagens pesadas */ .grain-canvas { position: relative; } .grain-canvas::before { content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; opacity: 0.045; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; } ``` ### 1.3. Micro-Tipografia e Hairline Borders - **Micro-tipografia técnica**: Para metadados, badges de status e tags de categoria, utilize fontes monospaçadas em tamanho 10px a 11px com caixa alta e tracking alargado: ```css .meta-label { font-family: var(--font-mono, monospace); font-size: 0.6875rem; /* 11px */ letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } ``` - **Hairline Borders**: Utilize bordas de 1px com opacidade baixa (`rgba(255, 255, 255, 0.06)` em dark mode e `rgba(0, 0, 0, 0.08)` em light mode) para delimitar cards com elegância sem criar poluição visual pesada. --- ## 🎞️ 2. Física de Animação & Microinterações com Framer Motion Evite transições mecânicas padronizadas baseadas em tempo linear (`transition: all 0.3s ease`). Adote **física de molas reais (*spring physics*)**: ### 2.1. Calibração de Molas Naturais (Spring Physics) Em interfaces profissionais, elimine o "quique" excessivo (*bouncing*) que transmite sensação infantil. Calibre o amortecimento crítico (*damping*) para conferir movimento firme e rápido: ```typescript // Configuração canônica de mola firme para software profissional export const springPresets = { // Transição firme, sem bounce, ideal para modais, dropdowns e abas snappy: { type: "spring", stiffness: 400, damping: 32, mass: 0.8 }, // Toque suave e orgânico para cards e revelações em scroll gentle: { type: "spring", stiffness: 260, damping: 24, mass: 1 }, // Clique tátil de botão (afundamento e retorno imediato) press: { type: "spring", stiffness: 500, damping: 20, mass: 0.5 } }; ``` ### 2.2. Orquestração Sequencial Atômica com `staggerChildren` Em vez de animar um container gigante como um bloco monolítico, orquestre a entrada sequencial de seus filhos: ```typescript export const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.06, delayChildren: 0.1 } } }; export const itemVariants = { hidden: { opacity: 0, y: 12 }, visible: { opacity: 1, y: 0, transition: springPresets.snappy } }; ``` ### 2.3. Respeito Obrigatório a `prefers-reduced-motion` Usuários com sensibilidade vestibular ou preferências de acessibilidade devem receber versões sem deslocamento espacial: ```typescript import { useReducedMotion } from "framer-motion"; export function AccessibleAnimatedCard({ children }: { children: React.ReactNode }) { const shouldReduceMotion = useReducedMotion(); return ( <motion.div initial={{ opacity: 0, y: shouldReduceMotion ? 0 : 16 }} animate={{ opacity: 1, y: 0 }} transition={shouldReduceMotion ? { duration: 0.15 } : springPresets.snappy} > {children} </motion.div> ); } ``` --- ## ⚡ 3. Arquitetura de Componentes, Estado e Core Web Vitals ### 3.1. Gerenciamento Estruturado de Estado - **Estado de Apresentação (Local)**: Estados efêmeros (visibilidade de drawer, aba ativa, texto de busca não submetido) devem ser restritos ao componente raiz do fluxo via hooks (`useState`, `useReducer`). - **Estado do Servidor (Server State)**: Dados assíncronos de APIs devem ser gerenciados com caching, invalidação e sincronização automática (TanStack Query ou SWR), evitando armazenar listas de entidades em stores globais manuais. - **Estado Global de Sessão**: Restrito a preferências do usuário (tema, idioma, autenticação) via Context modular ou stores atômicas leves (Zustand). ### 3.2. Otimização Rigorosa de Core Web Vitals - **LCP (Largest Contentful Paint < 2.5s)**: - Nunca aplique `loading="lazy"` na imagem principal do Hero (Above the Fold). Utilize `priority` e pré-carregamento (`<link rel="preload">`). - Carregue fontes críticas com `font-display: swap` e pré-conecte com os domínios de fonte. - **INP (Interaction to Next Paint < 200ms)**: - Não bloqueie a thread principal com renderizações síncronas pesadas. Use `startTransition` do React 18/19 para quebrar processamentos não urgentes. - Para filtragens e pesquisas em grandes listas, adote `useDeferredValue` ou web workers dedicados. - **CLS (Cumulative Layout Shift < 0.1)**: - Declare explicitamente atributos `width` e `height` (ou `aspect-ratio`) em todas as imagens, vídeos e contêineres dinâmicos. - Reserve o espaço de blocos de carregamento com *Skeleton Loaders* com as mesmas dimensões exatas dos cards renderizados. --- ## ♿ 4. Acessibilidade Inclusiva (WCAG 2.2 AA/AAA em Código) 1. **Semântica Estrutural**: - Utilize `<main>` para o conteúdo principal, `<nav>` para navegação, `<article>` para itens autônomos de feed e `<dialog>` nativo para modais acessíveis. 2. **Controle de Foco de Teclado**: - Nunca remova `:focus` com `outline: none` sem fornecer `:focus-visible` explícito de alto contraste. - Em diálogos modais e menus flutuantes, implemente *focus trap* (retenção do foco) e permita fechamento com a tecla `Escape`. 3. **Aria Attributes Dinâmicos**: - `aria-expanded="true/false"` em botões sanfona e acordeões. - `aria-haspopup="dialog/menu"` em gatilhos de popover. - `aria-live="polite"` para notificações e anúncios de feedback que não devem interromper o leitor de tela. --- ## 🔗 5. Integração com o Ecossistema - **Alinhamento com Design**: Consome as especificações do [ui-ux-designer](../ui-ux-designer/SKILL.md) e reporta limitações técnicas de renderização com antecedência. - **Tipagem de Contratos**: Compartilha esquemas e interfaces de tipos estritos com [lang-typescript](../../languages/lang-typescript/SKILL.md). - **Consumo de Serviços**: Integração resiliente com APIs REST ([framework-rest-api](../../framework/framework-rest-api/SKILL.md)) ou gRPC-Web ([framework-grpc](../../framework/framework-grpc/SKILL.md)). - **Reuso de Código**: Aplica as regras de modularidade e não duplicação de [clean-code-reusability](../../engineering-practices/clean-code-reusability/SKILL.md). - **Segurança de Código**: Prevenção de XSS com sanitização rigorosa via [appsec-owasp-asvs](../../security/appsec/appsec-owasp-asvs/SKILL.md).