Habilidade de Front-End de Alta Agencia

1. CONFIGURAÇÃO BASELINE ATIVA

VARIAÇÃO_DE_DESIGN: 8 (1=Simetria Perfeita, 10=Caos Artístico)
INTENSIDADE_DE_MOVIMENTO: 6 (1=Estático/Sem movimento, 10=Cinematográfico/Física Mágica)
DENSIDADE_VISUAL: 4 (1=Galeria de Arte/Airys, 10=Painel de Piloto/Dados Densos)

Instrução para IA: A baseline 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 baseline (ou substituídos pelo usuário) como suas variáveis globais para conduzir 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 stack diferente, siga estas restrições estruturais para manter a consistência:

VERIFICAÇÃO DE DEPENDÊNCIA [OBRIGATÓRIA]: Antes de importar QUALQUER biblioteca de terceiros (ex.: framer-motion, lucide-react, zustand), você DEVE verificar package.json. Se o pacote estiver ausente, você DEVE exibir o comando de instalação (ex.: npm install nome-do-pacote) antes de fornecer o código. Nunca presuma que uma biblioteca existe.
Framework e Interatividade: React ou Next.js. Padrão para Componentes de Servidor (RSC).
- SEGURANÇA RSC: Estado global funciona APENAS em Componentes Cliente. No Next.js, envolva os provedores em um componente "use client".
- ISOLAMENTO DE 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. Componentes de Servidor 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.
- TRAVAMENTO DE VERSÃO DO TAILWIND: Verifique package.json primeiro. Não use sintaxe v4 em projetos v3.
- PROTEÇÃO DE CONFIG T4: Para v4, NÃO use o plugin tailwindcss no postcss.config.js. Use @tailwindcss/postcss ou o plugin Vite.
POLÍTICA ANTI-EMOJI [CRÍTICA]: 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).
- Centralize layouts de página usando max-w-[1400px] mx-auto ou max-w-7xl.
- Estabilidade de Viewport [CRÍTICA]: 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 (Safari iOS).
- Grid em vez de Flex-Math: NUNCA use matemática percentual complexa de 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 caminhos de importação (verifique a versão instalada). Padronize strokeWidth globalmente (ex.: use exclusivamente 1.5 ou 2.0).

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

LLMs têm vieses estatísticos em direção a padrões específicos de clichê de UI. 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-DESCUIDO: Desencoraje Inter para vibes "Premium" ou "Criativas". Force caracter único usando Geist, Outfit, Cabinet Grotesk ou Satoshi.
- REGRA DE UI TÉCNICA: Fontes Serifadas são estritamente PROIBIDAS para UIs de Dashboard/Software. Para esses contextos, use exclusivamente pares Sans-Serif de alto nível (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 Cor

Restrição: Máx. 1 Cor de Destaque. Saturação < 80%.
O BANIMENTO DO LILÁS: A estética "Roxo/Azul de IA" é estritamente PROIBIDA. Sem brilhos roxos em botões, sem gradientes neon. Use bases neutras absolutas (Zinc/Slate) com destaques únicos de alto contraste (ex.: Esmeralda, Azul Elétrico ou Rosa Profundo).
CONSISTÊNCIA DE COR: Mantenha uma paleta para toda a saída. Não alterne entre cinzas quentes e frios dentro do mesmo projeto.

Regra 3: Diversificação de Layout

VIÉS ANTI-CENTRO: Seções Hero/H1 centralizadas são estritamente PROIBIDAS quando VARIAÇÃO_DE_DESIGN > 4. Force estruturas "Tela Dividida" (50/50), "Conteúdo Alinhado à Esquerda/Ativo Alinhado à Direita" ou "Espaço Branco Assimétrico".

Regra 4: Materialidade, Sombras e "Antiexcesso de Cartões"

ENRIJECIMENTO DE DASHBOARD: Para DENSIDADE_VISUAL > 7, contêineres de cartão genéricos são estritamente PROIBIDOS. Use agrupamento lógico via border-t, divide-y ou espaço negativo puro. As métricas de dados devem respirar sem estarem engaioladas, a menos que a elevação (z-index) seja funcionalmente necessária.
Execução: Use cartões APENAS quando a elevação comunicar hierarquia. Quando uma sombra for usada, tinge-a com o matiz de fundo.

Regra 5: Estados de UI Interativos

Geração Obrigatória: LLMs naturalmente geram estados "estáticos" de sucesso. Você DEVE implementar ciclos de interação completos:
- Carregamento: Skeleton loaders que correspondem aos tamanhos do layout (evite spinners circulares genéricos).
- Estados Vazios: Estados vazios lindamente compostos indicando como popular os dados.
- Estados de Erro: Relato de erro claro e inline (ex.: formulários).
- Feedback Tátil: Em :active, use -translate-y-[1px] ou scale-[0.98] para simular uma pressão física indicando sucesso/ação.

Regra 6: Padrões de Dados e Formulários

Formulários: O Rótulo DEVE ficar acima da entrada. O texto de ajuda é opcional, mas deve existir na marcação. Texto de erro abaixo da entrada. Use um gap-2 padrão para blocos de entrada.

4. PROATIVIDADE CRIATIVA (Implementação Antidescuidado)

Para combater ativamente designs genéricos de IA, implemente sistematicamente estes conceitos de codificação de alto nível como sua baseline:

Refração "Vidro Líquido": Quando o vidromorfismo for necessário, vá além de backdrop-blur. Adicione uma borda interna de 1px (border-white/10) e uma sombra interna sutil (shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]) para simular refração de borda física.
Microfísica Magnética (Se INTENSIDADE_DE_MOVIMENTO > 5): Implemente botões que puxam ligeiramente em direção ao cursor do mouse. CRÍTICO: NUNCA use useState do React para hover magnético ou animações contínuas. Use EXCLUSIVAMENTE useMotionValue e useTransform do Framer Motion fora do ciclo de renderização do React para evitar colapso de desempenho em dispositivos móveis.
Microinterações Perpétuas: Quando INTENSIDADE_DE_MOVIMENTO > 5, incorpore microanimações contínuas e infinitas (Pulso, Máquina de Escrever, Flutuar, Brilho, Carrossel) em componentes padrão (avatares, pontos de status, fundos). Aplique Física Spring Premium (type: "spring", stiffness: 100, damping: 20) a todos os elementos interativos — sem atenuação linear.
Transições de Layout: Sempre utilize as props layout e layoutId do Framer Motion para reordenação, redimensionamento e transições suaves de elementos compartilhados em mudanças de estado.
Orquestração Escalonada: Não monte listas ou grades instantaneamente. Use staggerChildren (Framer) ou cascata CSS (animation-delay: calc(var(--index) * 100ms)) para criar revelações sequenciais em cascata. CRÍTICO: Para staggerChildren, o Pai (variants) e os Filhos DEVEM residir na mesma árvore de Componente Cliente. Se os dados forem buscados assincronamente, passe os dados como props para um wrapper de Movimento Pai centralizado.

5. SALVAGUARDAS DE DESEMPENHO

Custo DOM: Aplique filtros de granulação/ruído exclusivamente a pseudo-elementos fixos, sem interação com o ponteiro (ex.: fixed inset-0 z-50 pointer-events-none) e NUNCA a contêineres de rolagem para evitar repinturas contínuas da GPU e degradação de desempenho em dispositivos móveis.
Aceleração de Hardware: Nunca anime top, left, width ou height. Anime exclusivamente via transform e opacity.
Restrição de Z-Index: NUNCA spamme z-50 ou z-10 arbitrários sem solicitação. Use z-indexes estritamente para contextos de camada sistêmica (Barras de Navegação Fixas, Modais, Overlays).

6. REFERÊNCIA TÉCNICA (Definições de Dial)

VARIAÇÃO_DE_DESIGN (Nível 1-10)

1-3 (Previsível): Flexbox justify-center, grades simétricas estritas de 12 colunas, paddings iguais.
4-7 (Deslocado): Use margin-top: -2rem sobreposição, proporções de aspecto de imagem variadas (ex.: 4:3 ao lado de 16:9), cabeçalhos alinhados à esquerda sobre dados centralizados.
8-10 (Assimétrico): Layouts Masonry, CSS Grid com unidades fracionárias (ex.: grid-template-columns: 2fr 1fr 1fr), zonas vazias massivas (padding-left: 20vw).
SOBRESCRITA MÓVEL: Para níveis 4-10, qualquer layout assimétrico acima de md: DEVE reverter agressivamente para um layout estrito de coluna única (w-full, px-4, py-8) em viewports < 768px para evitar rolagem horizontal e quebra de layout.

INTENSIDADE_DE_MOVIMENTO (Nível 1-10)

1-3 (Estático): Sem animações automáticas. Apenas estados CSS :hover e :active.
4-7 (CSS Fluido): Use transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1). Use cascatas animation-delay para carregamentos. Foco estritamente em transform e opacity. Use will-change: transform com moderação.
8-10 (Coreografia Avançada): Revelações complexas acionadas por rolagem ou parallax. Use hooks do Framer Motion. NUNCA use window.addEventListener('scroll').

DENSIDADE_VISUAL (Nível 1-10)

1-3 (Modo Galeria de Arte): Muito espaço em branco. Grandes lacunas entre seções. Tudo parece muito caro e limpo.
4-7 (Modo App Diário): Espaçamento normal para aplicativos web padrão.
8-10 (Modo Painel de Controle): Paddings minúsculos. Sem caixas de cartão; apenas linhas de 1px para separar dados. Tudo está compactado. Obrigatório: Use Monospace (font-mono) para todos os números.

7. MARCAS REGISTRADAS DE IA (Padrões Proibidos)

Para garantir uma saída premium e não genérica, você DEVE evitar estritamente estas assinaturas comuns de design de IA, a menos que explicitamente solicitado:

Visual e CSS

SEM Brilhos Neon/Externos: Não use brilhos padrão de box-shadow ou brilhos automáticos. Use bordas internas ou sombras levemente tingidas.
SEM Preto Puro: Nunca use #000000. Use Preto Sujo, Zinc-950 ou Carvão.
SEM Destaques Super-Saturados: Dessature os destaques para se misturar elegantemente com neutros.
SEM Texto com Gradiente Excessivo: Não use gradientes de preenchimento de texto para cabeçalhos grandes.
SEM Cursores de Mouse Personalizados: Eles são desatualizados e prejudicam desempenho/acessibilidade.

Tipografia

SEM Fonte Inter: Proibida. Use Geist, Outfit, Cabinet Grotesk ou Satoshi.
SEM H1s Superdimensionados: O primeiro título não deve gritar. Controle a hierarquia com peso e cor, não apenas com escala massiva.
Restrições de Serifa: Use fontes Serifadas APENAS para designs criativos/editoriais. NUNCA use Serifa em Dashboards limpos.

Layout e Espaçamento

Alinhe e Espaçe Perfeitamente: Garanta que padding e margens sejam matematicamente perfeitos. Evite elementos flutuantes com lacunas estranhas.
SEM Layouts de 3 Colunas de Cartões: A fileira genérica de "3 cartões iguais horizontalmente" é PROIBIDA. Use uma abordagem de Zigue-Zague de 2 colunas, grade assimétrica ou rolagem horizontal.

Conteúdo e Dados (O Efeito "João Silva")

SEM Nomes Genéricos: "João Silva", "Maria Santos" ou "Carlos Souza" são proibidos. Use nomes altamente criativos e realistas.
SEM Avatares Genéricos: NÃO use o padrão SVG "ovo" ou ícones de usuário Lucide para avatares. Use placeholders de foto criativos e críveis ou estilização específica.
SEM Números Falsos: Evite saídas previsíveis como 99.99%, 50% ou números de telefone básicos (1234567). Use dados orgânicos e bagunçados (47.2%, +55 (11) 9847-1928).
SEM Nomes de Startup Genéricos: "Acme", "Nexus", "SmartFlow". Invente nomes de marca premium e contextuais.
SEM Palavras de Enchimento: Evite clichês de copywriting de IA como "Eleve", "Perfeito", "Desperte" ou "Nova Geração". Use verbos concretos.

Recursos Externos e Componentes

SEM Links Quebrados do Unsplash: Não use Unsplash. Use placeholders absolutos e confiáveis como https://picsum.photos/seed/{string_aleatoria}/800/600 ou Avatares SVG de UI.
Personalização shadcn/ui: Você pode usar shadcn/ui, mas NUNCA em seu estado padrão genérico. Você DEVE personalizar os raios, cores e sombras para combinar com a estética de alto nível do projeto.
Limpeza Pronta para Produção: O código deve ser extremamente limpo, visualmente marcante, memorável e meticulosamente refinado em cada detalhe.

8. O ARSENAL CRIATIVO (Inspiração de Alto Nível)

Não recorra a UI genérica. Extraia desta biblioteca de conceitos avançados para garantir que a saída seja visualmente marcante e memorável. Quando apropriado, utilize GSAP (ScrollTrigger/Parallax) para scrolltelling complexo ou ThreeJS/WebGL para animações 3D/Canvas, em vez de animação CSS básica. CRÍTICO: Nunca misture GSAP/ThreeJS com Framer Motion na mesma árvore de componentes. Padrão para Framer Motion para interações UI/Bento. Use GSAP/ThreeJS EXCLUSIVAMENTE para scrolltelling de página inteira isolado ou fundos de canvas, envoltos em blocos estritos de limpeza de useEffect.

O Paradigma Padrão de Hero

Pare de fazer texto centralizado sobre uma imagem escura. Tente seções Hero assimétricas: Texto limpo e alinhado à esquerda ou direita. O fundo deve apresentar uma imagem relevante de alta qualidade com um desbotamento estilístico sutil (escurecendo ou clareando graciosamente para a cor de fundo, dependendo se é Modo Claro ou Escuro).

Navegação e Menus

Magnificação Mac OS Dock: Barra de navegação na borda; ícones escalam fluidamente ao passar o mouse.
Botão Magnético: Botões que puxam fisicamente em direção ao cursor.
Menu Gooey: Subitens se destacam do botão principal como um líquido viscoso.
Ilha Dinâmica: Um componente de UI em forma de pílula que se transforma para mostrar status/alertas.
Menu Radial Contextual: Um menu circular que se expande exatamente nas coordenadas do clique.
Discagem Rápida Flutuante: Um FAB que salta para fora em uma linha curva de ações secundárias.
Revelação de Mega Menu: Menus suspensos em tela cheia que revelam conteúdo complexo com fade escalonado.

Layout e Grades

Grade Bento: Agrupamento assimétrico baseado em tiles (ex.: Central de Controle da Apple).
Layout Masonry: Grade escalonada sem alturas de linha fixas (ex.: Pinterest).
Grade Chroma: Bordas da grade ou tiles mostrando transições sutis de cor contínuas.

joniii4k/main1

O que é main1?

Perguntar na sua IA favorita

Documentação