Nos termos do próprio skill
Este skill gera interfaces web ultraminimalistas, no estilo documento, inspiradas em plataformas de workspace premium. Ele impõe uma paleta monocromática quente com tons off-white e carvão, hierarquias tipográficas personalizadas usando serifas editoriais e sans-serifs geométricas, e layouts bento-grid planos com acentos pastel suaves.
O protocolo proíbe estritamente as fontes Inter, Roboto e Open Sans, bibliotecas de ícones padrão como Lucide e Heroicons, as sombras pesadas padrão do Tailwind, gradientes, emojis e clichês de copywriting de IA. Os componentes usam bordas de 1px solid #EAEAEA, raio de borda nítido de 8-12px, preenchimento interno generoso e animações de entrada por rolagem com IntersectionObserver. O movimento é discreto e sofisticado, animando apenas via transform e opacity.
O que ele produz
- Código frontend em HTML, React, Tailwind ou Vue refletindo nativamente a estética sofisticada, limpa e editorial
- Layouts com estruturas assimétricas de CSS Grid em bento-grid e amplo espaço em branco macro
Como funciona
- 01Estabeleça o macro-whitespace primeiro
Use espaçamento vertical massivo entre seções, especificamente py-24 ou py-32 em unidades Tailwind.
- 02Restrinja a largura do conteúdo
Limite o conteúdo tipográfico principal a max-w-4xl ou max-w-5xl para manter proporções editoriais.
- 03Aplique hierarquia tipográfica e variáveis monocromáticas
Defina imediatamente fontes personalizadas e variáveis de cor seguindo as especificações da paleta monocromática quente.
- 04Reforce os padrões de borda
Todo card, divisor e borda deve usar exatamente 1px solid #EAEAEA.
- 05Adicione animações de entrada por rolagem
Aplique animações a todos os principais blocos de conteúdo usando IntersectionObserver, nunca listeners de scroll da window.
- 06Garanta profundidade visual
As seções precisam de profundidade por meio de imagens, gradientes ambientes ou texturas sutis, em vez de fundos planos e vazios.