Habilidade de Frontend de Alto Nível (High-Agency Frontend Skill)

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=Cinematográfico/Física Mágica)
VISUAL_DENSITY: 4 (1=Galeria de Arte/Airificado, 10=Painel de Piloto/Dados Compactos)

Instrução para IA: A linha de 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 de linha de base (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ÓRIO]: 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 gerar 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 providers 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.
- VERSÃO DO TAILWIND: Verifique package.json primeiro. Não use sintaxe v4 em projetos v3.
- GUARDA 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 de texto 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 porcentagens complexas 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 UI clichê. Construa proativamente interfaces premium usando estas regras de engenharia:

Regra 1: Tipografia Determinística

Exibição/Títulos: Padrão para text-4xl md:text-6xl tracking-tighter leading-none.
- ANTI-SLOP: Desencoraje Inter para vibes "Premium" ou "Criativas". Force caracteres únicos usando Geist, Outfit, Cabinet Grotesk ou Satoshi.
- REGRA TÉCNICA DE UI: Fontes Serif são estritamente PROIBIDAS para UIs de Painel/Software. Para esses contextos, use exclusivamente pares de 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 Cores

Restrição: Máx. 1 Cor de Destaque. Saturação < 80%.
A BAN LILÁS: A estética "Roxo/Azul de IA" é estritamente PROIBIDA. Sem brilhos de botões 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 flutue entre cinzas quentes e frios no 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/Recurso Alinhado à Direita" ou "Espaço em Branco Assimétrico".

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

ENRIJECIMENTO DE PAINEL: Para VISUAL_DENSITY > 7, contêineres de card 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 cards APENAS quando a elevação comunicar hierarquia. Quando uma sombra for usada, tingi-a com o tom do fundo.

Regra 5: Estados de UI Interativos

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

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

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

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

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

Refração "Vidro Líquido": 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 levemente 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, Flutuação, Brilho, Carrossel) em componentes padrão (avatares, 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 de elementos compartilhados suaves entre mudanças de estado.
Orquestração Escalonada: Não monte listas ou grids instantaneamente. Use staggerChildren (Framer) ou cascata CSS (animation-delay: calc(var(--index) * 100ms)) para criar revelações em cascata sequenciais. CRÍTICO: Para staggerChildren, o Pai (variants) e os Filhos DEVEM residir na árvore de Componentes Cliente idêntica. Se os dados forem buscados assincronamente, passe os dados como props para um wrapper Pai Motion centralizado.

5. SALVAGUARDAS DE DESEMPENHO

Custo de DOM: Aplique filtros de granulado/ruído exclusivamente a pseudoelementos fixos e com pointer-events: none (ex: fixed inset-0 z-50 pointer-events-none) e NUNCA a contêineres com 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 spam arbitrário de z-50 ou z-10 sem motivo. Use z-index 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 sobreposto, 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 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.

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): Paddings pequenos. Sem caixas de card; apenas linhas de 1px para separar dados. Tudo é compacto. 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/Glows Externos: Não use box-shadow com brilhos padrão ou auto-glow. Use bordas internas ou sombras suaves e matizadas.
SEM Preto Puro: Nunca use #000000. Use Preto Suave, Zinc-950 ou Carvão.
SEM Destaques Super-Saturados: Dessature os destaques para se misturar elegantemente com os neutros.
SEM Texto com Gradiente Excessivo: Não use gradientes text-fill 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 de Serifa: Use fontes Serifa APENAS para designs criativos/editoriais. NUNCA use Serifa em Painéis 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 3 Colunas de Cards: A fileira genérica de "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 Silva")

SEM Nomes Genéricos: "John Doe", "Sarah Chan" ou "Jack Su" são proibidos. Use nomes altamente criativos com som realista.
SEM Avatares Genéricos: NÃO use o SVG padrão de "ovo" ou ícones de usuário do 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%, +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 "Elevar", "Integrado", "Revolucionário" ou "Nova Geração". Use verbos concretos.

Recursos e Componentes Externos

SEM Links Quebrados do Unsplash: Não use Unsplash. Use placeholders absolutos e confiáveis como https://picsum.photos/seed/{random_string}/800/600 ou Avatares SVG.
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 corresponder à estética premium do projeto.
Limpeza Pronta para Produção: O código deve ser extremamente limpo, visualmente impressionante, 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. Inspire-se nesta biblioteca de conceitos avançados para garantir que a saída seja visualmente impressionante e memorável. Quando apropriado, aproveite GSAP (ScrollTrigger/Parallax) para storytelling complexo com rolagem 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 storytelling de página inteira isolada ou backgrounds de canvas, envoltos em blocos estritos de limpeza useEffect.

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 fade estilístico sutil (escurecendo ou clareando graciosamente na cor de fundo, dependendo se é modo Claro ou Escuro).

Navegação e Menus

Magnificação Dock do Mac OS: 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 Goma: 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 expandindo exatamente nas coordenadas do clique.
Discagem Rápida Flutuante: Um FAB que explode em uma linha curva de ações secundárias.
Revelação de Menu Mega: Dropdowns de tela inteira que revelam conteúdo complexo com efeito escalonado.

Layout e Grids

Grid Bento: Agrupamento assimétrico baseado em tiles (ex: Centro de Controle da Apple).
Layout Masonry: Grid escalonado sem alturas de linha fixas (ex: Pinterest).
Chroma Grid: Bordas ou tiles de grade mostrando uma transição de cor sutil e contínua.

shawon-builds/Ai-skill

O que é Ai-skill?

Perguntar na sua IA favorita

Documentação