Baseline UI skill

As telas que o Claude faz saem limpas e consistentes, sem gradiente roxo, brilho e animação sobrando, e cada problema achado na revisão vem com a correção.

por ibelick

instalações: 24,2 mil
estrelas no GitHub: 10,2 mil
No skills.sh desde: janeiro de 2026
Licença: MIT

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

ibelick
baseline-ui
As telas que o Claude faz saem limpas e consistentes, sem gradiente roxo, brilho e animação sobrando, e cada problema achado na revisão vem com a correção.Auditada24,2 mil instalações, grátis

O que ela faz

É um conjunto de regras opinativas pra interface feita com IA não ficar com cara de IA. Com /baseline-ui, as regras valem pra todo trabalho de tela na conversa. Com /baseline-ui e o nome de um arquivo, o Claude revisa, cita a linha que fere a regra, explica em uma frase e mostra a correção.

As regras cobrem a base técnica, com Tailwind no padrão, motion/react pra animação e componentes acessíveis como Base UI, Radix ou React Aria, e o visual: sem gradiente a não ser que você peça, nada de gradiente roxo, brilho como destaque ou mais de uma cor de acento por tela.

Também fixa detalhes que fazem diferença: título com text-balance, número com tabular-nums, h-dvh no lugar de h-screen, aria-label em botão só de ícone, confirmação antes de ação sem volta, erro mostrado onde aconteceu e animação só quando pedida, com resposta a clique em no máximo 200 ms.

Nas palavras de quem fez

Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass.

ibelick, no SKILL.md

Quando usar

Dar uma passada final numa página feita pela IA antes de mostrar pro cliente
Revisar um componente que ficou com cara de template
Padronizar as telas de um projeto em React com Tailwind
Corrigir animação pesada ou que trava no celular

Depois de instalar, é só pedir assim

Roda /baseline-ui no arquivo components/Hero.tsx e corrige o que achar
Usa a baseline-ui e refaz essa tela de preços sem gradiente e com uma cor de destaque só
Revisa a página de checkout com a baseline-ui e me lista o que fere as regras

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 Baseline 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 Baseline 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.

Serve pra qualquer site?

Ela foi feita pra projetos com Tailwind CSS e componentes em React. Em outra base, as regras de visual ainda ajudam, mas as de código citam classes e bibliotecas desse jeito de fazer.

Precisa de chave de API ou de programa?

Não. São regras em texto que o Claude segue ao escrever ou revisar a interface.

Roda no Codex e no Antigravity?

Sim. É só texto, sem script. O atalho /baseline-ui depende de como cada agente chama skills, mas dá pra pedir pelo nome.

Levar essa skill

1x baseline-uiR$ 0,00

TotalR$ 0,00

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

Aprenda a usar

Claude Design: como usar, até no plano grátis
O Claude Design cria tela de site, protótipo e slide conversando, e agora vem até no plano grátis. Veja onde abrir, como usar e como levar pro Claude Code.