moulkefta/Claude-Skills

Habilidade de Frontend de Alto Poder

1. CONFIGURAÇÃO ATIVA DE BASE

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

Instrução para IA: A base padrão para todas as gerações é estritamente definida nestes 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 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 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 faltando, você DEVE exibir o comando de instalação (ex.: npm install nome-do-pacote) antes de fornecer o código. Nunca assuma 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.
  • BLOQUEIO DE VERSÃO 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Í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).
  • Contenha 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 de layout catastróficos 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 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 de UI clichê. Construa proativamente interfaces premium usando estas regras projetadas:

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 "Criativas". Force caracteres únicos usando Geist, Outfit, Cabinet Grotesk ou Satoshi.
  • REGRA DE UI TÉCNICA: Fontes Serif são estritamente PROIBIDAS para UIs de Dashboard/Software. Para esses 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 Cores

• Restrição: Máximo 1 Cor de Destaque. Saturação < 80%.
• A BAN 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 uma paleta para toda a saída. Não fluctue entre tons de cinza quentes e frios dentro do mesmo projeto.

Regra 3: Diversificação de Layout

• VIÉS ANTI-CENTRO: Seções Hero centralizadas/H1 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"

• ENDUREZIMENTO DE DASHBOARD: Para VISUAL_DENSITY > 7, containers 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 matiz de 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: Skeleton loaders combinando com os tamanhos do layout (evite spinners circulares genéricos).
  • Estados Vazios: Estados vazios compostos de forma bonita indicando como popular os 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 toque físico indicando sucesso/ação.

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

• Formulários: O Label 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 de IA genéricos, implemente sistematicamente estes conceitos de codificação de alto nível como sua 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 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 Spring 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 suave, redimensionamento e transições 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 Componentes Cliente idêntica. Se os dados forem buscados de forma assíncrona, passe os dados como props para um wrapper Motion Pai centralizado.

5. SALVAGUARDAS DE DESEMPENHO

• Custo DOM: Aplique filtros de granulação/ruído exclusivamente a pseudoelementos fixos e com pointer-events-none (ex.: fixed inset-0 z-50 pointer-events-none) e NUNCA a containers de rolagem para evitar repaints contínuos 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 espalhe z-50 ou z-10 arbitrários sem motivo. Use z-index estritamente para contextos de camada sistêmica (Navbars Fixas, Modais, Overlays).

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

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 paralaxe. 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 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 Cabine): Paddings minúsculos. Sem caixas de card; apenas linhas de 1px para separar dados. Tudo é compactado. Obrigatório: Use Monospace (font-mono) para todos os números.

7. MARCAS 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 solicitado explicitamente:

Visual e CSS

• SEM Brilhos Neon/Externos: Não use brilhos padrão box-shadow ou brilhos automáticos. Use bordas internas ou sombras sutis com tom.
• SEM Preto Puro: Nunca use #000000. Use Off-Black, Zinc-950, ou Carvão.
• SEM Destaques Excessivamente Saturados: Dessature os destaques para se misturar elegantemente com os 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 antiquados 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 Serif: Use fontes Serif APENAS para designs criativos/editoriais. NUNCA use Serif 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 Card de 3 Colunas: A linha de recurso genérica "3 cards 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: "João Silva", "Maria Souza" são proibidos. Use nomes altamente criativos e com som realista.
• SEM Avatares Genéricos: NÃO use o ícone de usuário SVG "ovo" padrão ou do Lucide para avatares. Use placeholders de foto criativos e críveis ou estilo específico.
• 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 Slop: "Acme", "Nexus", "SmartFlow". Invente nomes de marca premium e contextuais.
• SEM Palavras de Enchimento: Evite clichês de copywriting de IA como "Eleve", "Perfeito", "Libere" ou "Next-Gen". Use verbos concretos.

Recursos Externos e Componentes

• SEM Links Unsplash Quebrados: Não use Unsplash. Use placeholders absolutos e confiáveis como https://picsum.photos/seed/{string_aleatoria}/800/600 ou UI Avatars 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 do projeto de alto padrão.
• 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, aproveite GSAP (ScrollTrigger/Parallax) para scrolltelling complexo 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. Use Framer Motion como padrão para interações de UI/Bento. Use GSAP/ThreeJS EXCLUSIVAMENTE para scrolltelling de página inteira isolado ou fundos de canvas, envoltos em blocos estritos de limpeza useEffect.

O Paradigma Hero Padrão

• Pare de fazer texto centralizado sobre uma imagem escura. Tente 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 desbotamento 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: 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 Pegajoso (Gooey Menu): 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 Mega Menu: Dropdowns em tela cheia que desbotam em cascata conteúdo complexo.

Layout e Grids

• Bento Grid: Agrupamento assimétrico baseado em blocos (ex.: Central de Controle da Apple).
• Layout Masonry: Grade escalonada sem alturas de linha fixas (ex.: Pinterest).
• Chroma Grid: Bordas de grade ou blocos mostrando subtil, contínuo...

[truncado para tradução]