alvinindra/modern-frontend-skills

Frontend Moderno — Roteador de Pacotes

O pacote contém seis direções. Cada uma é construída sobre a mesma base de artesanato (o cânone de animação Emil Kowalski + o filtro de slop), mas responde a uma pergunta de design diferente. O trabalho do roteador é escolher a direção certa rapidamente e depois sair do caminho.

A identidade do pacote não é "bom gosto genérico". É especificamente: a confiança cinematográfica do trabalho de Louis Paquet / Locomotive + o artesanato invisível de Emil Kowalski. Cada direção é curada em relação a esse eixo. Páginas construídas a partir deste pacote devem parecer dirigidas (Louis Paquet) e artesanais (Emil Kowalski) ao mesmo tempo.

---

As seis direções

Direção	Pergunta que responde
cinematic-scroll	"Como faço do produto a história da página?"
motion-bento	"Como mostro uma superfície de produto funcional em um contexto de marketing?"
publication	"Como faço a página parecer um artigo projetado?"
nightside	"Como faço esta marca parecer pós-expediente, pensada, não chamativa?"
modernist-grid	"Como deixo a tipografia e a grade fazerem todo o trabalho?"
considered-modern	"Como faço isso parecer acolhedor e profissional, não startup fria?"

Uma direção é escolhida, não negociada. O pacote não produz saída híbrida a menos que o usuário solicite explicitamente.

---

Escolhendo a direção

O roteador decide nesta ordem:

1. Nome explícito. Se o usuário digitar cinematic-scroll, motion-bento, publication, nightside, modernist-grid ou considered-modern, roteie para lá. Também aceite frases próximas — veja § Apelidos abaixo.
2. Sinais de frase. Se o usuário usar uma das frases de alto sinal listadas em § Roteamento por frase, roteie para a direção correspondente.
3. Inferência do brief. Leia o brief — produto, público, clima, densidade, energia — e escolha a melhor adequação usando § Regras de inferência.

O roteador não pede ao usuário que escolha em um menu. Ele escolhe e explica a escolha em uma frase no topo da saída ("Indo nightside — a marca quer confiança noturna em vez de polimento de startup.").

Apelidos

• cinematic, cinematic product, scrolltell, product launch, immersive → cinematic-scroll
• bento, premium bento, motion engine, SaaS feature grid, archetype bento → motion-bento
• editorial, editorial premium, magazine, publication, design journal → publication
• dark luxe, dark luxury, moody premium, late night UI, after hours → nightside
• swiss, swiss system, swiss design, modernist, grid system, typographic poster → modernist-grid
• warm modern, humane modern, studio site, professional services → considered-modern

Roteamento por frase (sem nome explícito)

• "product launch" / "hardware" / "scroll-driven" / "feels like a film" → cinematic-scroll
• "SaaS landing" / "feature section" / "AI product page" / "bento" → motion-bento
• "magazine" / "image-led" / "publication" / "design studio" → publication
• "dark" + "premium" / "restaurant" / "hospitality" / "exclusive" → nightside
• "rational" / "grid" / "Swiss" / "typographic poster" / "institutional" → modernist-grid
• "professional services" / "agency site" / "warm" / "consultancy" / "studio" → considered-modern

Regras de inferência (quando o brief é vago)

• Forte arco narrativo + produto como protagonista → cinematic-scroll
• Mostrar o que o produto faz em superfícies em miniatura → motion-bento
• Liderado por tipografia com sequência de imagens curadas → publication
• Liderado por clima com espaço negativo profundo → nightside
• Liderado por grade com cor estrutural → modernist-grid
• Voz de estúdio com fotografia real → considered-modern

Se duas direções parecerem competir, escolha a que melhor corresponder à confiança da marca: uma marca de relógios premium provavelmente quer nightside, não motion-bento. Uma ferramenta de observabilidade B2B quer motion-bento, não cinematic-scroll.

---

O modelo de duas camadas do pacote

Cada saída é o produto de duas camadas, aplicadas nesta ordem:

Camada 1 — Direção

O skill.md da pasta de estilo escolhida é o brief de design. Ele define:

• A calibração do dial (linha de base de variação / movimento / densidade) para esta direção.
• Os três movimentos característicos que tornam esta direção reconhecível.
• Os materiais: tipografia, cor, layout, tratamento de superfície.
• A coreografia de movimento apropriada para esta direção.
• Os indicadores de estilo errado (sinais de slop específicos desta direção).
• Um artefato de referência para calibração de tom.

Camada 2 — Cânone de artesanato (universal)

Dois arquivos se aplicam a cada saída, independentemente da direção. O agente os lê após escolher a direção:

• references/animation.md — o cânone de animação Emil Kowalski. Estrutura de decisão (easing-first, quadro de usabilidade, frequência, propósito, duração), curvas de easing, a lista de verificação de artesanato (pressionar botão, origem de gatilho popover, entradas scale(0.95), temporização assimétrica, velocidade do gesto), notas de proveniência sobre quais regras são diretamente de Emil e quais são ajustadas pela habilidade.
• references/forbidden.md — o filtro de slop. Antipadrões visuais / de tipografia / de layout / de conteúdo / de componentes / de React-Framer + a lista de verificação de pré-voo que deve ser aprovada antes da saída.

É assim que o pacote define "premium" no nível de artesanato. Um botão modernist-grid ainda pressiona no :active. Um popover publication ainda dimensiona a partir de seu gatilho. Os padrões proibidos se aplicam igualmente a todas as seis direções.

---

Conhecimento de componentes — abra os arquivos

Após escolher uma direção, o agente consulta a pesquisa compartilhada da biblioteca de componentes:

• components/style-recipes.md — Mapeia cada direção para os padrões específicos de cada biblioteca que a fortalecem (quais demos GSAP, quais primitivas Framer, quais receitas Aceternity, quais componentes 21st.dev). Abra este primeiro.
• components/gsap-patterns.md — Receitas GSAP + ScrollTrigger + Lenis para as direções cinematográficas.
• components/motion-libraries.md — Padrões Framer Motion, notas React Bits, notas Aceternity UI (quando aplicadas com cuidado).
• components/component-libraries.md — Primitivas 21st.dev, regras de personalização shadcn, aplicação da origem de popover Radix.

Use-os como pesquisa, não como modelos. Qualquer coisa colada crua será lida como kit; personalize de acordo com a direção escolhida.

---

Regras de segurança do pacote — aplicadas incondicionalmente

Elas nunca dependem da direção ou do brief. São aplicadas em cada saída.

• Sem emojis. Em qualquer lugar — código, marcação, conteúdo, texto alternativo. Use ícones Phosphor ou Radix.
• Verificação de dependências. Antes de importar framer-motion, lucide-react, @phosphor-icons/react, @radix-ui/react-icons, zustand, etc., verifique package.json. Se estiver faltando, gere o comando de instalação primeiro.
• Bloqueio de versão do Tailwind. Verifique package.json para v3 vs v4.
• Estabilidade da viewport. Nunca h-screen. Sempre min-h-[100dvh] para qualquer superfície de viewport completa.
• Bloqueio de família de ícones. Phosphor OU Radix, não ambos. Peso do traço 1,5 ou 2,0.
• Sem Inter, Roboto ou sans-serif de sistema como identidade.
• Sem #000000 puro. Use preto ajustado.
• A proibição Lila. Sem brilhos roxos/azuis de gradiente de IA.
• Sem entradas scale(0). Sempre scale(0.95) + opacity: 0.
• Sem ease-in na interface. Sempre ease-out com cubic-bezier personalizado.

---

O piso de qualidade

Cada saída deve ultrapassar esta barra, independentemente da direção:

• Poderia ser recortada em captura de tela de qualquer seção e lida como intencional.
• Ainda pareceria específica com o logotipo removido. Se outra marca pudesse entrar sem tensão, o trabalho falhou.
• Contém mídia visual real (fotografia, renderizações, ilustrações) no hero ou nas duas primeiras seções quando as imagens ajudariam.
• Trata "mídia visual" como imagens reais, não gradientes / partículas / shaders.
• Inclui estados de interação (carregamento, vazio, erro, hover, foco, ativo) que correspondem ao ritmo da direção.
• Passa pela pré-verificação em references/forbidden.md antes de ser declarado concluído.

---

Quando o brief é amplo

O roteador escolhe a direção mais forte plausível e se compromete. Ele não faz hedge.

Se o brief for ambíguo entre duas direções, a escolha vai para aquela que melhor preserva a confiança da marca. Uma marca artesanal vai para cinematic-scroll ou nightside antes de motion-bento. Uma plataforma B2B vai para motion-bento ou modernist-grid antes de publication.

Se o brief for amplo de uma forma que não se encaixa bem em nenhuma direção, isso em si é o sinal: o brief precisa ser refinado antes do código. Faça uma pergunta esclarecedora e depois se comprometa.

---

Exemplos do pacote — para tom, não para cópia

Dois artefatos de referência residem em examples/:

• examples/cinematic-landing.html — Maris & Co., velejadores de Newport desde 1947. Uma página cinematic-scroll de ponta a ponta: mastros assimétricos, letra fixa, bento de inventário, citação azul-marinho profundo, CTA magnético, rodapé colofão, ritmo de três atos.
• examples/bento-saas.tsx — Morse, fluxo de trabalho de biblioteca de design de som para estúdios de jogos. Uma página motion-bento com todos os cinco arquétipos conectados.

Leia-os para calibração de tom. Não copie literalmente. Cada página deve inventar seu próprio mundo.