Pular pro conteúdo

Minimalist UI skill

O Claude sai do visual genérico de SaaS e entrega uma interface enxuta, com tipografia de revista, bordas finas e cor só onde ela tem função.

por leonxlnx

instalações
425,1 mil
estrelas no GitHub
102,5 mil
No skills.sh desde
março de 2026
Licença
MIT

Atualizada no GitHub em 26 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

O que ela faz

É um conjunto de regras de design que o Claude segue ao escrever HTML, React, Tailwind ou Vue. Começa pelo que é proibido: as fontes Inter, Roboto e Open Sans, ícones Lucide e Feather, sombra pesada, gradiente, neon, emoji, nome de exemplo como John Doe e frase pronta de IA como 'Elevate'.

No lugar, define título em serifa com letras mais juntas, texto em sans-serif geométrica, mono pra código e texto em grafite, nunca preto puro, sobre fundo branco ou cor de osso. A cor fica em tons pastel bem apagados, só em etiqueta e destaque. Cards, divisórias e bordas usam uma linha de 1px #EAEAEA.

Também descreve os componentes: grade bento assimétrica, botão preto sólido, etiqueta em pílula, FAQ só com linhas, tecla de atalho desenhada e janela imitando o macOS. O movimento é discreto: os blocos aparecem suaves ao rolar, e ficam parados pra quem desliga animação no sistema.

Nas palavras de quem fez

Classic style skill, opt-in: it runs only when called by name. Editorial product UI with a warm monochrome palette, typographic contrast and flat bento grids.

leonxlnx, no SKILL.md

Quando usar

  • Montar a página de um produto digital ou de um SaaS sem cara de template
  • Fazer um painel, uma documentação ou um site com visual de documento
  • Refazer uma landing page cheia de gradiente pra algo mais sóbrio
  • Mostrar o print do seu software dentro de uma janela limpa

Depois de instalar, é só pedir assim

  • /minimalist-ui monta a landing page do meu curso com hero, grade bento dos módulos e FAQ
  • /minimalist-ui refaz essa página tirando os gradientes e as sombras
  • /minimalist-ui cria a página de preços com três planos e etiquetas de status

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

  • Gen Agent Trust HubPassou
  • SocketPassou
  • SnykPassou

Perguntas

Como instalar a Minimalist UI no Claude Code?

Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Minimalist UI, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.

O Claude usa sozinho quando peço um site?

Não. É uma skill de estilo opcional e só roda quando você chama pelo nome, como /minimalist-ui.

Qual o comando pra instalar hoje?

O autor mudou as skills clássicas pro repositório Leonxlnx/taste-skill-classics, com o mesmo nome e os mesmos arquivos: npx skills add https://github.com/Leonxlnx/taste-skill-classics --skill minimalist-ui.

Precisa de chave ou programa? Roda no Codex e no Antigravity?

Não precisa: são só instruções de design, e as fontes e ícones que ela pede (Phosphor ou Radix) entram no próprio código. Funciona em qualquer agente que lê skills, chamando pelo nome.

Levar essa skill

1x minimalist-uiR$ 0,00

TotalR$ 0,00

A skill sai aqui mesmo, na hora. Seus dados eu uso pra falar com você sobre o MazyOS.

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/leonxlnx/taste-skill

Aprenda a usar

Mais da loja leonxlnx

Ver a loja leonxlnx