leonxlnx/taste-skill

Habilidade Frontend de Alto Padrão

1. CONFIGURAÇÃO DE LINHA DE BASE ATIVA

• DESIGN_VARIANCE: 8 (1=Simetria Perfeita, 10=Caos Artístico)
• MOTION_INTENSITY: 6 (1=Estático/Sem movimento, 10=Física Cinemática/Mágica)
• VISUAL_DENSITY: 4 (1=Galeria de Arte/Airificado, 10=Painel de Piloto/Dados Densos)

Instrução para 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 estes valores dinamicamente com base no que ele solicitar explicitamente em seus prompts de chat. Use estes valores de linha de base (ou substituídos pelo usuário) como suas variáveis globais para orientar 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ÓRIA]: Antes de importar QUALQUER biblioteca de terceiros (ex.: framer-motion, lucide-react, zustand), você DEVE verificar package.json. Se o pacote estiver faltando, você DEVE fornecer 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 providers em um componente "use client".
  • ISOLAMENTO DE INTERATIVIDADE: Se as Seções 4 ou 7 (Movimento/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. 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.
  • VERSÃO LOCK 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 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 textual ou texto alternativo. Substitua símbolos por ícones de alta qualidade (Radix, Phosphor) ou primitivos SVG limpos. 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 sobre 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 caminhos de importação (verifique a versão instalada). Padronize strokeWidth globalmente (ex.: 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 UI clichê 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 vibes "Premium" ou "Criativo". 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 estes contextos, use exclusivamente pares Sans-Serif de alto padrão (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%.
• A PROIBIÇÃO DO LILÁS: A estética "Roxo/Azul de IA" é estritamente PROIBIDA. Sem brilhos de botão roxos, 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-se em uma paleta para toda a saída. Não fluctue entre cinzas quentes e frios dentro do mesmo projeto.

Regra 3: Diversificação de Layout

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

Regra 4: Materialidade, Sombras e "Anti-Uso Excessivo de Cards"

• ENDURECIMENTO DE DASHBOARD: Para VISUAL_DENSITY > 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 serem engaioladas, a menos que a elevação (z-index) seja funcionalmente necessária.
• Execução: Use cartões APENAS quando a elevação comunica hierarquia. Quando uma sombra for usada, tingi-la com o matiz de fundo.

Regra 5: Estados de UI Interativa

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

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

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

4. PROATIVIDADE CRIATIVA (Implementação Anti-Slop)

Para combater ativamente designs genéricos de IA, implemente sistematicamente estes conceitos de codificação de alto padrão como sua linha de base:

• Refração "Liquid Glass": Quando o glassmorfismo 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 física de borda.
• Microfísica Magnética (Se MOTION_INTENSITY > 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 MOTION_INTENSITY > 5, incorpore microanimações contínuas e infinitas (Pulso, Máquina de Escrever, Flutuar, Brilho, Carrossel) em componentes padrão (avatars, pontos de status, fundos). Aplique Física de Mola Premium (type: "spring", stiffness: 100, damping: 20) a todos os elementos interativos—sem easing 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 entre 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 árvore de Componente Cliente idêntica. Se os dados forem buscados de forma assíncrona, passe os dados como props para um wrapper Pai Motion centralizado.

5. BARREIRAS DE DESEMPENHO

• Custo de DOM: Aplique filtros de granulação/ruído exclusivamente a pseudo-elementos fixos e sem interação de ponteiro (ex.: fixed inset-0 z-50 pointer-events-none) e NUNCA a contêineres de rolagem para evitar repinturas contínuas de 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 espalhe z-50 ou z-10 arbitrários sem solicitação. Use z-indexes estritamente para contextos de camada sistêmica (Navbars Fixas, Modais, Overlays).

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

DESIGN_VARIANCE (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 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 enormes (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.

MOTION_INTENSITY (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 estrito 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').

VISUAL_DENSITY (Nível 1-10)

• 1-3 (Modo Galeria de Arte): Muito espaço em branco. Grandes lacunas de seção. 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): Pequenos paddings. Sem caixas de cartão; apenas linhas de 1px para separar dados. Tudo é 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 box-shadow padrão 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 destaques para se misturar elegantemente com neutros.
• SEM Texto 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 o desempenho/acessibilidade.

Tipografia

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

Layout e Espaçamento

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

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

• SEM Nomes Genéricos: "João da Silva", "Maria Santos" ou "José Souza" são proibidos. Use nomes altamente criativos e realistas.
• SEM Avatares Genéricos: NÃO use ícones SVG "ovo" ou 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 confusos (47,2%, +1 (312) 847-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", "Liberte" ou "Next-Gen". Use verbos concretos.

Recursos e Componentes Externos

• SEM Links Quebrados do Unsplash: Não use Unsplash. Use placeholders confiáveis absolutos como https://picsum.photos/seed/{random_string}/800/600 ou avatares SVG 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 padrão 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 Padrão)

Não recorra a UI genérica. Inspire-se nesta biblioteca de conceitos avançados para garantir que a saída seja visualmente marcante e memorável. Quando apropriado, utilize GSAP (ScrollTrigger/Parallax) para narrativa por rolagem complexa ou ThreeJS/WebGL para animações 3D/Canvas, em vez de movimento CSS básico. 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 narrativa de rolagem de página inteira isolada ou fundos de canvas, envoltos em blocos estritos de useEffect cleanup.

O Paradigma Hero Padrão

• Pare de fazer texto centralizado sobre uma imagem escura. Experimente seções Hero assimétricas: Texto alinhado de forma limpa à esquerda ou direita. O fundo deve apresentar uma imagem relevante de alta qualidade com um desvanecimento estilístico sutil (escurecendo ou clareando graciosamente na cor de fundo, dependendo se é modo Claro ou Escuro).

Navegação e Menus

• Dock do Mac OS com Magnificação: Nav-bar na borda; ícones escalam fluidamente ao passar o mouse.
• Botão Magnético: Botões que puxam fisicamente em direção ao cursor.
• Menu Pegajoso: 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 em uma linha curva de ações secundárias.
• Revelação de Mega Menu: Dropdowns de tela inteira que escalonam o desvanecimento de conteúdo complexo.

Layout e Grades

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