💻 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:

     :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:

/* 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:

  .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:

// 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:

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:

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 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.
• Consumo de Serviços: Integração resiliente com APIs REST (framework-rest-api) ou gRPC-Web (framework-grpc).
• Reuso de Código: Aplica as regras de modularidade e não duplicação de clean-code-reusability.
• Segurança de Código: Prevenção de XSS com sanitização rigorosa via appsec-owasp-asvs.