Better Interface

Conheça as 15 skills da coleção Better Interface para revisar telas, implementar desenhos e testar componentes. Veja funções, requisitos e exemplos de uso.

Como instalar Repositório no GitHub

Último commit: 07/11/2026
Licença: MIT
Mantenedor: Jakub Krehel
Categoria: Design e interface
Estrelas: 11.494

Nesta skill

Skills da coleção
Instalação e preparação
Exemplos para cada skill
Instalar e atualizar
Agentes compatíveis
Skills relacionadas
Fontes consultadas

A coleção Better Interface reúne 15 skills de Jakub Krehel para trabalhar nas interfaces do seu projeto. Você pode revisar uma tela existente, implementar um desenho do Figma ou comparar versões de um componente. Cada skill tem uma função própria. A better-interface coordena seis especialidades e reúne os problemas encontrados em um relatório ordenado por gravidade.

Skills da coleção

Use a tabela para escolher a skill conforme a tarefa. As revisões precisam de acesso ao código. A conferência visual depende de uma interface que o agente consiga abrir. As skills que criam páginas temporárias mantêm essas páginas disponíveis para você examinar o resultado.

Skill	O que faz	Condição de uso
`better-interface`	Revisa uma tela ou um fluxo e reúne os problemas em um relatório.	Usa as seis skills especializadas abaixo. A revisão não edita arquivos por padrão.
`better-accessibility`	Confere navegação por teclado, foco e acesso por tecnologias assistivas.	Distingue a inspeção do código dos testes executados no navegador.
`better-layout`	Revisa a organização da tela e sua adaptação a outras larguras e idiomas.	Preserva os espaçamentos definidos pelo projeto.
`better-writing`	Escreve e revisa textos de botões, mensagens de erro e estados vazios.	Usa o vocabulário e a voz já adotados na interface.
`better-typography`	Confere fontes, hierarquia de títulos e comportamento do texto na tela.	Inclui quebras de linha e acesso ao conteúdo truncado.
`better-colors`	Cria paletas, define tokens semânticos de cor e mede contraste.	A revisão informa falhas de contraste e aguarda autorização para alterar as cores.
`better-ui`	Refina superfícies, ícones e movimento.	Mantém as convenções visuais do projeto e considera a preferência por movimento reduzido.
`interface-review`	Examina problemas de interface introduzidos por alterações no código.	Você indica uma branch, um pull request ou alterações locais. A revisão preserva o worktree.
`explain-interface`	Explica a construção de um site ou de um efeito visual.	Recebe uma URL ou imagem. Uma imagem permite propor a construção, sem confirmar o código original.
`break`	Monta uma página para observar um componente sob condições extremas de conteúdo.	Usa o componente existente e registra falhas visíveis, sem corrigi-las automaticamente.
`build-design`	Implementa uma interface a partir de um desenho.	Usa o MCP do Figma para ler o arquivo original. Medidas extraídas de imagens são estimativas.
`teardown`	Cria ilustrações técnicas de objetos ou conceitos, com uma página de visualização.	Permite exportar SVG, PNG e PDF. O desenho não especifica tolerâncias de fabricação.
`state-machine`	Mostra os estados existentes de um componente em uma página temporária com seletor.	Usa conteúdo simulado e não acrescenta estados ausentes do código.
`variant`	Constrói alternativas de um componente para você comparar na página.	Cria três versões por padrão e incorpora a escolhida após sua indicação.
`afk`	Examina um projeto, implementa melhorias e registra o trabalho para sua revisão.	Prevê branch própria e commits locais. Publicação e ações em serviços externos exigem autorização específica.

Instalação e preparação

Execute npx skills add jakubkrehel/skills no terminal do projeto e selecione as skills que deseja instalar. Para usar a revisão coordenada, inclua better-interface e as seis especialidades better-*. Você pode instalar as demais conforme as tarefas da tabela.

O agente precisa conseguir ler os arquivos envolvidos. Informe também como abrir a aplicação local para conferir a interface no navegador. Para implementar um arquivo do Figma, conecte o MCP do Figma ao agente. A teardown usa scripts Node.js e dependências próprias para gerar um visualizador de ilustrações. Seu verificador exige Node.js 22 ou superior e Chrome.

As skills interface-review, explain-interface, break, state-machine, variant e afk são marcadas na origem para acionamento explícito por você. A forma de selecionar uma skill depende do agente instalado. Nos exemplos abaixo, envie o texto ao agente com a skill selecionada. Esses textos são prompts, não comandos de terminal.

Exemplos para cada skill

Os nomes de componentes e as rotas são ilustrativos. Substitua-os pelos caminhos do seu projeto e forneça os arquivos ou imagens citados. A coluna de resultado descreve o comportamento documentado da skill, sem afirmar que estes exemplos foram executados.

Skill	Prompt de exemplo	Resultado esperado
`better-interface`	Revise o cadastro em `/clientes/novo`, incluindo o formulário vazio e os erros de validação. Siga o `DESIGN.md` e apresente os problemas sem editar arquivos.	Relatório único por gravidade, com os arquivos envolvidos e as áreas verificadas.
`better-accessibility`	Confira se consigo preencher o cadastro e fechar seu modal usando só o teclado. Examine os nomes acessíveis dos campos e dos botões.	Falhas de acessibilidade localizadas, com correções propostas e verificações não executadas identificadas.
`better-layout`	Revise a tabela de clientes a 320px de largura e com nomes extensos. Confira se as ações permanecem acessíveis e proponha ajustes usando os espaçamentos do projeto.	Diagnóstico de sobreposição ou conteúdo inacessível, acompanhado dos ajustes sugeridos.
`better-writing`	Reescreva as mensagens de erro do cadastro para explicar como corrigir cada campo. Preserve os termos já usados nos arquivos de tradução.	Mensagens ligadas à falha de cada campo e coerentes com o restante da interface.
`better-typography`	Confira a hierarquia dos títulos e a leitura dos valores na tabela de cobranças. Examine quebras de linha e números que mudam durante a atualização.	Correções propostas para os estilos tipográficos, com indicação dos arquivos envolvidos.
`better-colors`	Meça o contraste do botão de confirmação e de seu texto nos temas claro e escuro. Informe os pares medidos sem alterar a paleta.	Valores de contraste comparados com os mínimos aplicáveis aos elementos examinados.
`better-ui`	Refine o botão de copiar link e a troca do ícone após a confirmação. Use os tokens existentes e respeite a preferência por movimento reduzido.	Ajustes no componente e descrição dos estados conferidos no código ou no navegador.
`interface-review`	Revise as alterações ainda não commitadas usando o alvo `working`. Separe os problemas introduzidos das regressões e preserve os arquivos locais.	Relatório limitado às alterações, com a origem de cada problema e os componentes afetados.
`explain-interface`	Explique como o efeito de fundo da URL fornecida foi construído. Identifique as camadas visuais e diferencie as medidas das inferências.	Explicação do efeito com os valores observados e os limites da inspeção.
`break`	Teste o componente `NomeDoCliente` com os comprimentos de nome que ele aceita. Monte uma página temporária com os casos lado a lado e registre o que ultrapassar seus limites.	Página com os casos testados e anotações das falhas observadas.
`build-design`	Implemente o formulário dos frames desktop e celular do Figma fornecido. Reutilize os componentes do projeto e compare o resultado com cada frame.	Interface implementada e comparação com o desenho, incluindo diferenças e estados ausentes.
`teardown`	Crie uma ilustração das camadas de um botão, separando fundo, borda e texto. Identifique o desenho como conceitual e inclua exportação SVG, PNG e PDF.	Página de visualização com o desenho, seus arquivos de origem e as exportações disponíveis.
`state-machine`	Monte uma página temporária para alternar entre os estados já implementados de `TabelaDeClientes`. Use cadastros simulados e mantenha o carregamento até eu trocar de estado.	Componente existente com seletor de estados, sem consulta aos cadastros de produção.
`variant`	Crie três versões do cartão de cliente variando a densidade. Mostre uma por vez na página de clientes e preserve os tokens do projeto.	Alternativas comparáveis com seletor, aguardando sua escolha para incorporar uma delas.
`afk`	Trabalhe nas melhorias do catálogo durante minha ausência. Use uma branch própria, faça commits locais por alteração e deixe um relatório. Não faça push nem publique mudanças.	Branch local com melhorias verificadas e relatório do trabalho, incluindo ideias não implementadas.

Na revisão coordenada, confira quais áreas aparecem como examinadas e quais ficaram sem verificação. O relatório pode reunir até 15 achados, com prioridade para as falhas que impedem uma ação ou escondem conteúdo. Autorize as correções pelo relatório e solicite nova conferência dos componentes alterados.

As páginas de break e state-machine permanecem disponíveis até você autorizar sua remoção. Na variant, a escolha de uma versão leva à incorporação dessa versão e à remoção das alternativas e do seletor. A afk prevê commits locais, por isso seu acionamento precisa respeitar as permissões de Git definidas no projeto.

Instalar e atualizar

Instalar

Projeto atual

Execute na pasta do projeto para instalar a skill nesse projeto. O instalador permite escolher os agentes que receberão a instalação.

$npx skills add jakubkrehel/skills

Todos os projetos

Instale no seu usuário para usar a skill em diferentes projetos. O instalador permite escolher os agentes que receberão a instalação.

$npx skills add jakubkrehel/skills -g

Atualizar

Verificar atualizações

Consulte se há atualizações disponíveis para as skills instaladas antes de atualizar.

$npx skills check

Atualizar skills instaladas

Atualize as skills instaladas para as versões disponíveis nos repositórios de origem.

$npx skills update

Agentes compatíveis

Use esta skill no agente de sua preferência. Todos os agentes abaixo são compatíveis.

Claude CodeCompatível
O README documenta o plugin para Claude Code. A coleção exige as ferramentas da tarefa: navegador, MCP do Figma ou Node.js. afk prevê commits locais.
CodexCompatível
Instruções portáveis pela leitura, sem teste de execução neste agente. A revisão coordenada usa as seis skills better-*. Navegador, MCP do Figma e scripts Node.js dependem da tarefa. Selecione explicitamente as skills assim marcadas. afk prevê commits locais.
AntigravityCompatível
Instruções portáveis pela leitura, sem teste de execução neste agente. A revisão coordenada usa as seis skills better-*. Navegador, MCP do Figma e scripts Node.js dependem da tarefa. Selecione explicitamente as skills assim marcadas. afk prevê commits locais.
Hermes AgentCompatível
Instruções portáveis pela leitura, sem teste de execução neste agente. A revisão coordenada usa as seis skills better-*. Navegador, MCP do Figma e scripts Node.js dependem da tarefa. Selecione explicitamente as skills assim marcadas. afk prevê commits locais.
OpenCodeCompatível
Instruções portáveis pela leitura, sem teste de execução neste agente. A revisão coordenada usa as seis skills better-*. Navegador, MCP do Figma e scripts Node.js dependem da tarefa. Selecione explicitamente as skills assim marcadas. afk prevê commits locais.
CursorCompatível
Instruções portáveis pela leitura, sem teste de execução neste agente. A revisão coordenada usa as seis skills better-*. Navegador, MCP do Figma e scripts Node.js dependem da tarefa. Selecione explicitamente as skills assim marcadas. afk prevê commits locais.