baseline-uipor Julien Thibeaut

Baseline UI Skill.

Uma skill de Claude Code e Codex para revisão de design: corrige rapidamente código de UI removendo problemas de espaçamento, hierarquia, tipografia e pequenos ajustes de layout.

Design Review & Accessibility
Código de UI

Baixar OpenDesign Ver guia de uso

ibelick/ui-skills · skills/baseline-ui/SKILL.mdSKILL.md

--- name: baseline-ui description: Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass. --- ## How to use ## Stack ## Components ## Interaction ## Animation ## Typography

Metadados e títulos de seção lidos do arquivo original em 14/09/2026 · 3.417 caracteres no total

01 O que faz

O que o skill baseline-ui faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Baseline UI é um skill de revisão que impõe uma linha de base opinativa de UI para impedir interfaces geradas por IA de baixa qualidade em uma base de código. É direcionado a projetos com Tailwind CSS que usam primitivos React, e é instalado como um conjunto permanente de restrições sobre qualquer trabalho de UI na conversa, ou como uma passagem de revisão em nível de arquivo.

O que o torna específico é o vocabulário: ele nomeia exatamente quais utilitários e props usar ou evitar, de h-dvh em vez de h-screen e text-balance para títulos, até animação restrita apenas ao compositor com limite de 200ms e nenhum valor arbitrário de z-index. Use-o quando a interface precisar de uma limpeza rápida ou um passe de polimento.

O que ele produz

Uma explicação de uma frase sobre por que cada violação importa.
Uma correção concreta, no nível do código, para cada achado.

Veja o exemplo de prompt ↗

Como funciona

01
Invoque-o como um Conjunto de Restrições para toda a conversa
Executar o comando puro aplica todas as restrições deste arquivo a qualquer trabalho de UI feito naquela conversa, não apenas a um arquivo.
02
Ou Aponte-o para um Único Arquivo
Ao passar um arquivo como destino, o skill muda para o modo de revisão, verificando esse arquivo em relação a todas as restrições listadas abaixo.
03
Retorne um Relatório de Violação em Três Partes
Cada achado cita o trecho problemático, dá uma frase curta sobre por que isso importa e propõe uma correção no nível do código.
04
Percorra os Grupos de Restrições em Ordem
O arquivo organiza suas regras em Stack, Components, Interaction, Animation, Typography, Layout, Performance e Design, cada um combinando itens MUST, SHOULD e NEVER.

02 Encontre o ideal para você

Quando usar o Skill baseline-ui

Use o skill baseline-ui no Claude Code ou Codex quando o trabalho for uma revisão de design desse tipo. Adequação e limites abaixo são retirados do próprio arquivo do skill.

Boa Combinação

Uma limpeza rápida ou passe de refinamento em uma interface que se distanciou de uma base consistente.
Revisão de um arquivo específico em busca de problemas de espaçamento, hierarquia, tipografia e pequenos problemas de layout.

Conheça os Limites

Trabalho de design que depende de gradientes, curvas de easing personalizadas ou espaçamento entre letras personalizado, tudo isso bloqueado até que haja um pedido explícito.
Construir manualmente o comportamento de teclado ou foco, o que não é permitido a menos que solicitado explicitamente.

O Que Fornecer

Um arquivo para revisarOpcional. Nomear um arquivo transforma o skill em um passe de revisão que reporta violações apenas para esse arquivo.

03 Dentro da skill

Regras que o Skill baseline-ui Dá ao Claude Code e Codex

8 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Mantenha-se nos Padrões do Tailwind CSS
Valores personalizados só são aceitáveis quando já existem no projeto ou foram explicitamente solicitados; caso contrário, o agente deve usar os padrões do Tailwind.
Sem Animação a Menos que Solicitada
A animação está desativada por padrão. Quando explicitamente solicitada, apenas propriedades de compositor podem ser animadas, nunca width, height, top, left, margin ou padding.
Limite o Feedback de Interação a 200ms
As entradas devem usar ease-out, animações em loop devem pausar quando fora da tela, e prefers-reduced-motion deve ser respeitado.
Nunca Misture Sistemas de Primitivos
Qualquer coisa com comportamento de teclado ou foco precisa de um primitivo acessível do Base UI, React Aria ou Radix; primitivos já existentes no projeto têm prioridade, e reconstruir manualmente o comportamento de teclado ou foco é proibido a menos que explicitamente solicitado.
Use h-dvh, Nunca h-screen
A seção de interação também exige que elementos fixos respeitem safe-area-inset e que os erros sejam exibidos próximos ao local onde a ação acontece.
Use uma Escala Fixa de z-index
Valores arbitrários de z- não são permitidos, e elementos quadrados devem usar size- em vez de utilitários pareados w- e h-.
Mantenha os Utilitários de Tipografia Literais
text-balance para títulos, text-pretty para o corpo do texto, tabular-nums para dados, e letter-spacing não deve ser alterado, exceto quando explicitamente solicitado.
Sem Gradientes ou Glow por Padrão
Gradientes exigem solicitação explícita, gradientes roxos e multicoloridos são totalmente descartados, e efeitos de glow não podem servir como affordances primárias.

04 Coloque em prática

Instalar baseline-ui no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicione baseline-ui ao Claude Code, Codex ou seu agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

npx skills add https://github.com/ibelick/ui-skills --skill baseline-ui

Formato genérico da CLI skills para skills/baseline-ui/SKILL.md; o repositório pode documentar seu próprio caminho.

Dar à Skill uma Primeira Tarefa de Revisão de Design

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu material.

Starter prompt

Review [src/components/SettingsDialog.tsx] against the baseline UI constraints. We generated this dialog quickly and the spacing, hierarchy and layout feel off, so report the violations with the exact lines, why they matter, and the code-level fix for each.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Confirme que nenhuma propriedade animada esteja fora de transform e opacity.
Confirme que botões apenas com ícone tenham aria-label e que ações destrutivas estejam atrás de um AlertDialog.

No OpenDesign importe o baseline-ui a partir do link do SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: Julien Thibeaut
Repository: github.com/ibelick/ui-skills Branch main
Arquivo da skill: skills/baseline-ui/SKILL.md Checksum do conteúdo registrado na verificação; commit 79081ab
License: MIT De LICENSE.
Estrelas do repositório: 8.402 Snapshot do GitHub tirado em 14/09/2026 para todo o repositório ibelick/ui-skills, que contém 5 skills neste catálogo. Não é uma classificação ou contagem de uso para baseline-ui.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

Como usarDois modos de invocação: o comando simples aplica as restrições, o argumento de arquivo gera um relatório de violações.
StackPadrões do Tailwind CSS, motion/react para animação em JS, tw-animate-css, e o utilitário cn.
ComponentesApenas primitivas acessíveis, priorizando as primitivas já existentes no projeto, aria-label em botões apenas com ícone.
InteraçãoAlertDialog para ações destrutivas, skeletons para carregamento, h-dvh, safe-area-inset, sem bloqueio de colar.
AnimaçãoSem animação a menos que solicitado; apenas propriedades do compositor, ease-out, limite de 200ms, respeitando reduced-motion.
Tipografiatext-balance em títulos, text-pretty no corpo, tabular-nums para dados, sem alterações de tracking.
LayoutEscala fixa de z-index em vez de valores arbitrários, size-* para elementos quadrados.
DesempenhoEvite animações grandes de blur ou backdrop-filter, escopo do will-change, prefira lógica de renderização em vez de useEffect.
DesignSem gradientes ou affordances de glow, escala de sombra padrão, uma cor de destaque, reutilização dos tokens existentes.

A Descrição da Própria Skill

Corrija rapidamente código de UI ao ajustar espaçamento, hierarquia, tipografia e pequenos problemas de layout. Use quando a interface precisa de uma limpeza rápida ou passe de polimento.

Descrição do cabeçalho do SKILL.md. O arquivo completo tem cerca de 3.417 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas Sobre o Skill baseline-ui

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

Que stack ele assume?

Padrões do Tailwind CSS, motion/react (antigo framer-motion) quando animação em JavaScript é necessária, tw-animate-css para animações de entrada e microanimações, e o utilitário cn construído a partir de clsx e tailwind-merge.

Ele adicionará animações ou gradientes para deixar as coisas com uma aparência melhor?

Não. A animação nunca é adicionada a menos que solicitada explicitamente, e gradientes não são usados a menos que solicitados explicitamente. Gradientes roxos e multicoloridos são excluídos por completo.

Quais bibliotecas de componentes ela permite?

Base UI, React Aria ou Radix para qualquer coisa com comportamento de teclado ou foco, priorizando os primitivos existentes do projeto. Base UI é a escolha recomendada para novos primitivos, se for compatível com a stack, e misturar sistemas de primitivos em uma única superfície de interação não é permitido.

UI Base

Execute baseline-ui em uma Tarefa Real de Design Review.

Baixe o OpenDesign, importe baseline-ui a partir do link SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills