joyeking/redesigned-portfolio

tasteskill: Skill Ant-Slop de Frontend

Landing pages, portfólios e redesigns. Nem dashboards, nem tabelas de dados, nem UI de produto multi-etapas. Cada regra abaixo é contextual. Nenhuma delas é acionada automaticamente. Primeiro leia o briefing, depois extraia apenas o que se encaixa.

---

0. INFERÊNCIA DO BRIEFING (Leia o Ambiente Antes de Qualquer Coisa)

Antes de tocar em código ou ajustar configurações, 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 o ambiente.

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", "consumidor premium", "tipo Apple", "brincalhão", "B2B sério", "editorial", "tipo 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, tipografia, fotografia. Para redesigns, estes são material de partida, não entrada opcional (veja Seção 11).
6. Restrições silenciosas - públicos focados em 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 isto 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 isto como: landing B2B SaaS para compradores técnicos, com uma linguagem minimalista estilo Linear, tendendo a utilitários Tailwind + Geist + movimento contido."
• "Lendo isto 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 customizada."
• "Lendo isto como: redesign de um site de serviço do setor público, com uma linguagem de confiança primeiro, 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, hero centralizado sobre mesh escuro, três cartões de recursos iguais, glassmorphism genérico em tudo, microanimações em loop infinito em todo lugar, Inter + slate-900. Estes são os padrões de LLM. Alcance além deles deliberadamente com base na leitura de design.

---

1. OS TRÊS DIALS (Configuração Principal)

Após a leitura de design, configure três dials. Toda decisão de layout, movimento e densidade abaixo é controlada por estes.

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

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

1.A Inferência de Dial (leitura de design → valores de dial)

Sinal	VARIANCE	MOTION	DENSITY
"minimalista / limpo / calmo / editorial / estilo Linear"	5-6	3-4	2-3
"consumidor premium / tipo Apple / luxo / marca"	7-8	5-7	3-4
"brincalhão / 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 primeiro / 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 Dials Direcionam o Output

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

---

2. MAPEAMENTO BRIEFING → SISTEMA DE DESIGN

Uma vez que você tenha a leitura de design (Seção 0) e os dials (Seção 1), escolha a fundação 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 recorrer a um sistema de design real (use pacotes oficiais)

Briefing lê como…	Recorra a	Por quê
Microsoft / SaaS empresarial / dashboards	@fluentui/react-components ou @fluentui/web-components	Fluent UI oficial, tokens Microsoft, acessibilidade feita
UI no estilo Google, produto com sabor Material	@material/web + tokens Material 3	Oficial, tematizável via Material Theming
B2B / análise empresarial estilo IBM	@carbon/react + @carbon/styles	Carbon oficial, padrões maduros de densidade de dados
Superfícies de app Shopify	polaris.js web components / Polaris React	Necessário para UI de admin do Shopify
Produto estilo Atlassian / Jira	@atlaskit/* + @atlaskit/tokens	Atlassian DS 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 do Reino Unido	govuk-frontend	Legal / regulatoriamente esperado
Setor público dos EUA / confiança primeiro	uswds	O mesmo
MVP rápido de agência / negócio local	Bootstrap 5.3	Chato, rápido, funciona
Fundação 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 customizar; nunca envie o estado padrão
Marketing SaaS moderno baseado em Tailwind	Utilitários Tailwind v4 + variante dark:	Padrão para construções indie e de pequenas equipes

Regra de honestidade: se o briefing lê como um dos sistemas acima, instale e use o pacote oficial. Não recrie seu CSS manualmente. Não importe tokens de um sistema mas 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 app Material 3.

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

Para estas 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
Glassmorphism / "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 tiles 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çamento generoso. Nenhuma biblioteca.
Dark tech / hacker	Mono + neon de destaque, motivos de terminal. Nenhuma biblioteca.
Gradientes Aurora / mesh	Gradientes SVG ou radiais em camadas. Nenhuma biblioteca.
Tipografia cinética	Animações CSS nativas, animações baseadas em scroll, GSAP para capturas. Nenhuma biblioteca.
Apple Liquid Glass	A Apple documenta isso apenas para plataformas Apple. Não existe liquid-glass.css oficial. 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: 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, ouvintes 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 em 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 vincule 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 por entrada do usuário (posição do mouse, progresso do scroll, física de ponteiro, hover magnético). Use useMotionValue / useTransform / useScroll do Motion. useState re-renderiza a árvore React em cada mudança 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 pedir ou o projeto já depender dele.
• NUNCA crie ícones SVG à mão. Se um glifo estiver faltando, instale uma segunda biblioteca ou componha a partir de primitivas - não desenhe caminhos de ícone 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

Desencorajados 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 explicitamente pedir por um vibe brincalhão / estilo chat / social-nativo - e mesmo assim use-os com moderação e intenção.

3.E Responsividade e Mecânicas 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 saltos de layout em dispositivos móveis (barra de endereço do Safari no iOS).
• 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).

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

Antes de importar QUALQUER biblioteca de terceiros, verifique package.json. Se o pacote estiver faltando, gere o comando de instalação primeiro. 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 sensível ao 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 à marca primeiro.
  • Substituição: Inter é aceitável quando o usuário explicitamente pede por um visual neutro / padrão / estilo Linear, ou quando o briefing é um site focado em acessibilidade / setor público.

• Combinações para saber: Geist + Geist Mono, Satoshi + JetBrains Mono, Cabinet Grotesk + Inter Tight, GT America + IBM Plex Mono.

• DISCIPLINA DE SERIFA (MUITO DESENCORAJADO COMO PADRÃO):

  • Serifa é muito desencorajada como 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 indicador de IA mais testado em rodadas de produção.
  • Serifa é aceitável apenas quando UM destes for explicitamente verdadeiro:
    • O briefing da marca literalmente nomeia 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 fontes de display sem serifa (Geist Display, ABC Diatype, Söhne Breit, Cabinet Grotesk Display, Migra Sans, GT Walsheim, Inter Display, PP Neue Montreal). Fontes de 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.
  • REGRA DE ÊNFASE (relacionada): Quando você quiser enfatizar uma palavra dentro de um título (o movimento cinético do tipo "design espacial e tal"), 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 é amador. Ênfase itálico/negrito na mesma família é o movimento correto.
  • Especificamente BANIDOS como padrões: Fraunces e Instrument_Serif (as duas serifas de display favoritas de LLMs).
  • Se uma serifa for justificada (raro, conforme acima), rotacione 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