Habilidade de Frontend de Alta Agência

1. CONFIGURAÇÃO 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 Piloto/Dados Empacotados)

Instrução da IA: A base padrão para todas as gerações é estritamente definida para esses 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 esses valores base (ou 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, siga 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 DA INTERATIVIDADE: Se as Seções 4 ou 7 (Movimento/Vidro Líquido) 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 locais 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 do 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 Flex-Math: 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.
  • ANTI-SLOP: Desencoraje Inter para vibrações "Premium" ou "Criativas". Force um caráter único usando Geist, Outfit, Cabinet Grotesk ou Satoshi.
  • REGRA TÉCNICA DE UI: Fontes serifadas são estritamente PROIBIDAS para UIs de Dashboard/Software. Para esses contextos, use exclusivamente pares Sans-Serif de ponta (Geist + Geist Mono ou Satoshi + JetBrains Mono).
• Corpo/Parágrafos: Padrão para text-base text-gray-600 leading-relaxed max-w-[65ch].

Regra 2: Calibração de Cores

• Restrição: Máximo de 1 Cor de Destaque. Saturação < 80%.
• O BANIMENTO DA LILA: A estética "Roxo/Azul de IA" é estritamente PROIBIDA. Sem brilhos de botão roxos, sem gradientes neon. Use bases neutras absolutas (Zinco/Ardósia) com destaques singulares de alto contraste (por exemplo, Esmeralda, Azul Elétrico ou Rosa Profundo).
• CONSISTÊNCIA DE CORES: Mantenha uma paleta para toda a saída. Não flutue entre cinzas quentes e frios dentro do mesmo projeto.

Regra 3: Diversificação de Layout

…