leonxlnx/taste-skill

tasteskill: Skill Frontend Anti-Slop

Landing pages, portfólios e redesigns. Não dashboards, não tabelas de dados, não UI de produto multi-etapas. Cada regra abaixo é contextual. Nada é acionado automaticamente. Primeiro leia o briefing, depois extraia apenas o que se encaixa.

---

0. INFERÊNCIA DO BRIEFING (Leia a Sala Antes de Qualquer Coisa)

Antes de tocar em código ou ajustar parâmetros, infira o que o usuário realmente quer. A maioria dos outputs de design de LLMs é ruim porque o modelo pula para uma estética padrão em vez de ler a sala.

0.A Leia estes sinais primeiro

1. Tipo de página - landing (SaaS / consumidor / agência / evento), portfólio (dev / designer / estúdio criativo), redesign (preservar vs. reformular), editorial / blog.
2. Palavras de vibe que o usuário usou - "minimalista", "calmo", "estilo Linear", "Awwwards", "brutalista", "premium consumidor", "Apple-y", "divertido", "B2B sério", "editorial", "agência", "glassy", "dark tech".
3. Sinais de referência - URLs que eles linkaram, screenshots que colaram, produtos que nomearam, marcas com as quais estão competindo.
4. Público-alvo - Painel de compras B2B vs. consumidor consciente de design vs. recrutador escaneando um portfólio. O público escolhe a estética, não o seu gosto.
5. Ativos de marca que já existem - logotipo, cor, tipo, fotografia. Para redesigns, esses são material de partida, não entrada opcional (veja a Seção 11).
6. Restrições silenciosas - públicos que priorizam acessibilidade, setor público, indústrias regulamentadas, comércio baseado em confiança, produtos infantis. Essas restrições SUBSTITUEM a preferência estética.

0.B Gere uma "Leitura de Design" de uma linha antes de gerar

Antes de qualquer código, declare em uma linha: "Lendo isso como: <tipo de página> para <público>, com uma linguagem , tendendo a <sistema de design ou família estética>."

Exemplos de leituras:

• "Lendo isso como: landing B2B SaaS para compradores técnicos, com uma linguagem minimalista estilo Linear, tendendo a utilitários Tailwind + Geist + movimento contido."
• "Lendo isso como: portfólio de designer solo para gerentes de contratação, com uma linguagem editorial / tipo cinético, tendendo a CSS nativo + animação baseada em scroll + tipografia personalizada."
• "Lendo isso como: redesign de um site de serviço do setor público, com uma linguagem de confiança em primeiro lugar, tendendo a GOV.UK Frontend ou USWDS."

0.C Se o briefing for ambíguo, faça uma pergunta, não adivinhe

Faça exatamente uma pergunta esclarecedora - nunca um despejo de múltiplas perguntas - e apenas quando a leitura de design genuinamente divergir. Exemplo: "Isso deve parecer mais com Linear-limpo ou Awwwards-experimental?"

Se você puder inferir com confiança a partir do contexto, não pergunte. Apenas declare a leitura de design e prossiga.

0.D Disciplina Anti-Padrão

Não use como padrão: gradientes roxos de IA, herói centralizado sobre malha escura, três cards de recursos iguais, glassmorfismo genérico em tudo, microanimações de loop infinito em todos os lugares, Inter + slate-900. Esses são os padrões de LLM. Alcance além deles deliberadamente com base na leitura de design.

---

1. OS TRÊS BOTÕES (Configuração Principal)

Após a leitura de design, defina três botões. Toda decisão de layout, movimento e densidade abaixo é controlada por eles.

• DESIGN_VARIANCE: 8 - 1 = Simetria Perfeita, 10 = Caos Artístico
• MOTION_INTENSITY: 6 - 1 = Estático, 10 = Cinematográfico / Física
• VISUAL_DENSITY: 4 - 1 = Galeria de Arte / Arejado, 10 = Cockpit / Dados Empilhados

Linha de base: 8 / 6 / 4. Use-os a menos que a leitura de design os substitua. Não peça ao usuário para editar este arquivo - as substituições ocorrem conversacionalmente.

1.A Inferência do Botão (leitura de design → valores do botão)

Sinal	VARIANCE	MOTION	DENSITY
"minimalista / limpo / calmo / editorial / estilo Linear"	5-6	3-4	2-3
"premium consumidor / Apple-y / luxo / marca"	7-8	5-7	3-4
"divertido / selvagem / Dribbble / Awwwards / experimental / agência"	9-10	8-10	3-4
"landing page / portfólio / site de marketing (padrão)"	7-9	6-8	3-5
"confiança em primeiro lugar / setor público / regulamentado / acessibilidade crítica"	3-4	2-3	4-5
"redesign - preservar"	corresponder ao existente	+1	corresponder ao existente
"redesign - reformular"	+2	+2	corresponder ao existente

1.B Predefinições de Caso de Uso

Caso de uso	VARIANCE	MOTION	DENSITY
Landing (SaaS, mainstream)	7	6	4
Landing (Agência / criativo)	9	8	3
Landing (Consumidor premium)	7	6	3
Portfólio (Designer / estúdio)	8	7	3
Portfólio (Desenvolvedor)	6	5	4
Editorial / Blog	6	4	3
Serviço do setor público	3	2	5
Redesign - preservar	corresponder	corresponder+1	corresponder
Redesign - reformular	+2	+2	corresponder

1.C Como os Botões Direcionam a Saída

Use esses valores (ou valores substituídos pelo usuário) como variáveis globais. As referências cruzadas ao longo deste documento referem-se a esses nomes de variáveis exatos - nunca invente alias como LAYOUT_VARIANCE ou ANIM_LEVEL.

---

2. MAPEAMENTO BRIEFING → SISTEMA DE DESIGN

Depois de ter a leitura de design (Seção 0) e os botões (Seção 1), escolha a base certa. Não invente CSS para coisas que têm um pacote oficial. Não finja que uma tendência estética é um sistema oficial.

2.A Quando usar um sistema de design real (use pacotes oficiais)

Briefing lido como…	Use	Porquê
Microsoft / SaaS empresarial / dashboards	@fluentui/react-components ou @fluentui/web-components	Fluent UI oficial, tokens da Microsoft, acessibilidade garantida
UI estilo Google, produto com sabor Material	@material/web + tokens Material 3	Oficial, personalizável via Material Theming
B2B estilo IBM / análise empresarial	@carbon/react + @carbon/styles	Carbon oficial, padrões maduros de densidade de dados
Superfícies de app Shopify	web components polaris.js / Polaris React	Obrigatório para UI de administração Shopify
Produto estilo Atlassian / Jira	@atlaskit/* + @atlaskit/tokens	DS Atlassian oficial
Página de devtool / comunidade estilo GitHub	@primer/css ou @primer/react-brand	Primer oficial; variante Brand para marketing
Serviço do setor público UK	govuk-frontend	Legalmente / regulatoriamente esperado
Setor público EUA / confiança em primeiro lugar	uswds	O mesmo
MVP de negócio local / agência rápido	Bootstrap 5.3	Simples, rápido, funciona
Base React moderna e acessível	@radix-ui/themes	Primitivas + tema polido
SaaS moderno onde você possui os componentes	shadcn/ui (npx shadcn@latest add ...)	Você possui o código, fácil de personalizar; nunca envie o estado padrão
Marketing SaaS moderno baseado em Tailwind / AI	Utilitários Tailwind v4 + variante dark:	Padrão para construções indie + equipes pequenas

Regra de honestidade: se o briefing for lido como um dos sistemas acima, instale e use o pacote oficial. Não recrie seu CSS manualmente. Não importe os tokens de um sistema e depois substitua 90% deles.

Um sistema por projeto. Não misture Fluent React com Carbon na mesma árvore. Não importe componentes shadcn/ui em um aplicativo Material 3.

2.B Quando o briefing é uma estética, não um sistema

Para essas direções, não há um único pacote oficial. Construa com CSS nativo + Tailwind + uma biblioteca de componentes mantida. Seja honesto nos comentários do código sobre o que é inspiração emprestada vs. material oficial.

Estética	Implementação honesta
Glassmorfismo / "vidro fosco"	backdrop-filter, bordas em camadas, sobreposições de destaque. Forneça fallback de preenchimento sólido para prefers-reduced-transparency.
Bento (grades de blocos estilo Apple)	CSS Grid com tamanhos de célula mistos. Nenhuma biblioteca única possui isso.
Brutalismo	CSS nativo, monoespaçado, bordas cruas. Nenhuma biblioteca.
Editorial / revista	Tipo serifado, grade assimétrica, espaço em branco generoso. Nenhuma biblioteca.
Dark tech / hacker	Mono + neon de destaque, motivos de terminal. Nenhuma biblioteca.
Gradientes Aurora / mesh	SVG ou gradientes radiais em camadas. Nenhuma biblioteca.
Tipografia cinética	Animações CSS nativas, animações baseadas em scroll, GSAP para hijacks. Nenhuma biblioteca.
Apple Liquid Glass	A Apple documenta isso apenas para plataformas Apple. Não há liquid-glass.css oficial. As implementações web são aproximações usando backdrop-filter + bordas em camadas + destaques. Rotule claramente como aproximação.

---

3. ARQUITETURA E CONVENÇÕES PADRÃO

A menos que a leitura de design escolha um sistema de design real (Seção 2.A), estes são os padrões:

3.A Stack

• Framework: 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 provedores em um componente "use client".
  • ISOLAMENTO DE INTERATIVIDADE: Qualquer componente que use Motion, listeners de scroll ou física de ponteiro DEVE ser uma folha isolada com 'use client' no topo. Server Components renderizam apenas layouts estáticos.
• Estilização: Tailwind v4 (padrão). Tailwind v3 apenas se o projeto existente exigir.
  • Para v4: NÃO use o plugin tailwindcss no postcss.config.js. Use @tailwindcss/postcss ou o plugin Vite.
• Animação: Motion (a biblioteca anteriormente conhecida como Framer Motion). Importe de motion/react (import { motion } from "motion/react"). O pacote framer-motion ainda funciona como um alias legado - prefira motion/react em código novo.
• Fontes: Sempre use next/font (Next.js) ou auto-hospedagem com @font-face + font-display: swap. Nunca linke Google Fonts via <link> em produção.

3.B Estado

• useState / useReducer local para UI isolada.
• Estado global APENAS para evitar prop-drilling profundo - Zustand, Jotai ou contexto React.
• NUNCA use useState para rastrear valores contínuos impulsionados pela entrada do usuário (posição do mouse, progresso do scroll, física do ponteiro, hover magnético). Use useMotionValue / useTransform / useScroll do Motion. useState re-renderiza a árvore React em cada alteração e colapsa em dispositivos móveis.

3.C Ícones

• Bibliotecas permitidas (ordem de prioridade): @phosphor-icons/react, hugeicons-react, @radix-ui/react-icons, @tabler/icons-react.
• Desencorajado: lucide-react. Aceitável apenas quando o usuário explicitamente pede por ela ou o projeto já depende dela.
• NUNCA crie ícones SVG manualmente. Se um glifo estiver faltando, instale uma segunda biblioteca ou componha a partir de primitivas - não desenhe paths de ícones do zero.
• Uma família por projeto. Não misture Phosphor com Lucide na mesma árvore de componentes.
• Padronize strokeWidth globalmente (ex.: 1.5 ou 2.0).

3.D Política de Emojis

Desencorajado por padrão em código, marcação e texto visível. Substitua símbolos por glifos de bibliotecas de ícones. Substituição: permita emojis apenas quando o usuário pedir explicitamente por uma vibe divertida / estilo chat / social nativa - e mesmo assim, use-os com moderação e intenção.

3.E Responsividade e Mecânica de Layout

• Padronize breakpoints (sm 640, md 768, lg 1024, xl 1280, 2xl 1536).
• Contenha layouts de página usando max-w-[1400px] mx-auto ou max-w-7xl.
• Estabilidade da Viewport: NUNCA use h-screen para seções Hero de altura total. SEMPRE use min-h-[100dvh] para evitar salto de layout em dispositivos móveis (barra de endereço do Safari iOS).
• Grid sobre Flex-Math: NUNCA use matemática complexa de porcentagem flexbox (w-[calc(33%-1rem)]). SEMPRE use CSS Grid (grid grid-cols-1 md:grid-cols-3 gap-6).

3.F Verificação de Dependência (obrigatório)

Antes de importar QUALQUER biblioteca de terceiros, verifique package.json. Se o pacote estiver faltando, primeiro produza o comando de instalação. Nunca presuma que uma biblioteca existe.

---

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

LLMs padronizam clichês. Substitua esses padrões proativamente. Cada regra tem um caminho de substituição ciente do contexto.

4.1 Tipografia

• Display / Títulos: Padrão text-4xl md:text-6xl tracking-tighter leading-none.

• Corpo / Parágrafos: Padrão text-base text-gray-600 leading-relaxed max-w-[65ch].

• Escolha de fonte sem serifa:

  • Desencorajado como padrão: Inter. Escolha Geist, Outfit, Cabinet Grotesk, Satoshi ou uma serifa apropriada para a marca primeiro.
  • Substituição: Inter é aceitável quando o usuário pede explicitamente por um estilo neutro / padrão / Linear, ou quando o briefing é um site de setor público / acessibilidade em primeiro lugar.

• Pares para conhecer: Geist + Geist Mono, Satoshi + JetBrains Mono, Cabinet Grotesk + Inter Tight, GT America + IBM Plex Mono.

• DISCIPLINA SERIFADA (MUITO DESENCORAJADA COMO PADRÃO):

  • Serifa é muito desencorajada como a fonte padrão para qualquer projeto. "Parece criativo / premium / editorial" NÃO é uma razão para usar serifa. O modelo mental padrão do agente de que "briefing criativo = serifa" é o sinal de IA mais testado em rodadas de produção.
  • Serifa é aceitável apenas quando UM destes for explicitamente verdadeiro:
    • O briefing da marca nomeia literalmente uma fonte serifada, OU
    • A família estética é genuinamente editorial / luxo / publicação / manuscrito / herança / vintage E você pode articular por que esta serifa específica se encaixa nesta marca específica
  • Para todo o resto (agência criativa, estúdio de design, marca moderna, consumidor premium, portfólio, estilo de vida), padrão para fonte display sem serifa (Geist Display, ABC Diatype, Söhne Breit, Cabinet Grotesk Display, Migra Sans, GT Walsheim, Inter Display, PP Neue Montreal). Fontes display sem serifa não são "chatas" — elas são o padrão pela mesma razão que o preto é o padrão na moda.
  • REGRIA DE ÊNFASE (relacionada): Quando você quiser enfatizar uma palavra dentro de um título (o movimento cinético "e design espacial" ), use itálico ou negrito da MESMA fonte. NÃO injete uma palavra serifada aleatória em um título sem serifa (ou vice-versa) apenas para adicionar interesse visual. Ênfase de família mista é amadora. Ênfase itálico/negrito na mesma família é a jogada certa.
  • Especificamente PROIBIDO como padrão: Fraunces e Instrument_Serif (as duas serifas de display favoritas de LLM).
  • Se uma serifa for justificada (raro, de acordo com o acima), varie a partir deste pool, NÃO reutilize a mesma serifa em projetos consecutivos: PP Editorial New, GT Sectra Display, Cardinal Grotesque, Reckless Neue, Tiempos Headline, Recoleta, Cormorant Garamond, Playfair Display, EB Garamond, IvyPresto, Migra, Editorial Old, Saol Display, Söhne Breit Kursiv, Domaine Display, Canela, Schnyder, Tobias, NB Architekt, I…

[truncado para tradução]