Repolode
Enviar
jakubkrehel

jakubkrehel/skills

Coleção de skills para agentes criarem interfaces melhores, com foco em acessibilidade, layout, tipografia, cores, escrita e refinamento visual.

Ver no GitHubSite
Estrelas
8,038
Forks
307
Issues abertas
5
Último commit
há 8 dias

O que é?

Este repositório reúne skills para agentes, pacotes de instruções reutilizáveis que agentes de programação com IA podem carregar para aprimorar o trabalho com interfaces. As skills abrangem acessibilidade, layout, tipografia, cores, textos da interface e refinamento visual, e podem ser usadas individualmente ou combinadas por meio de uma única skill de revisão.

As skills abordam aspectos específicos de uma interface. better-accessibility analisa o comportamento do teclado e do foco, ARIA, formulários e anúncios para leitores de tela com base na WCAG 2.2. better-typography cobre escala tipográfica, recursos de fontes, quebra de linha e truncamento, enquanto better-colors gera paletas, nomeia tokens semânticos e mede o contraste. better-writing e better-layout cuidam de rótulos, mensagens de erro, estados vazios e estrutura responsiva.

Além das skills de revisão, há skills de fluxo de trabalho para criar interfaces a partir de um arquivo do Figma ou de uma imagem de design, revisar uma branch ou pull request em busca de regressões na interface, renderizar um componente em diferentes estados ou cenários extremos numa página temporária e gerar várias versões de um componente para comparação. A instalação é feita com npx skills add ou por meio de um plugin do Claude Code.

Recursos principais

  • 01Combina verificações de acessibilidade, layout, escrita, tipografia, cores e interface em uma única revisão.
  • 02Verifica teclado, foco, ARIA e formulários com base na WCAG 2.2.
  • 03Gera paletas de cores, nomeia tokens semânticos e mede o contraste.
  • 04Cria interfaces a partir de um arquivo do Figma ou de uma imagem de design, usando os tokens e componentes já existentes no projeto.
  • 05Renderiza um componente em diferentes estados numa página temporária para testes de estresse.

Casos de uso

  • Revisar um pull request em busca de regressões na interface antes de fazer o merge.
  • Auditar um app existente para encontrar problemas de navegação pelo teclado e de uso com leitores de tela.
  • Configurar um sistema de cores com tokens semânticos e verificações de contraste.
  • Transformar um design do Figma em código alinhado ao sistema de design.

Início rápido

  1. 1

    Instale a coleção de skills

    npx skills add jakubkrehel/skills
  2. 2

    Ou adicione o marketplace de plugins do Claude Code

    /plugin marketplace add jakubkrehel/skills
  3. 3

    Em seguida, instale o plugin

    /plugin install interfaces@interfaces

Antes de usar

  • É composto por skills de agente em Markdown, então é necessário um agente de programação com IA compatível para utilizá-lo.

Tópicos

#ai-agents#ui#accessibility#design-system#typography#css#frontend-review

Perguntas frequentes

O que é skills?
Coleção de skills para agentes criarem interfaces melhores, com foco em acessibilidade, layout, tipografia, cores, escrita e refinamento visual. Este repositório reúne skills para agentes, pacotes de instruções reutilizáveis que agentes de programação com IA podem carregar para aprimorar o trabalho com interfaces. As skills abrangem acessibilidade, layout, tipografia, cores, textos da interface e refinamento visual, e podem ser usadas individualmente ou combinadas por meio de uma única skill de revisão.
skills é gratuito? Qual é a licença?
skills é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
skills ainda é mantido?
Manutenção ativa. O último commit de skills foi em 13 de out. de 2026.
Para que posso usar skills?
Revisar um pull request em busca de regressões na interface antes de fazer o merge. Auditar um app existente para encontrar problemas de navegação pelo teclado e de uso com leitores de tela. Configurar um sistema de cores com tokens semânticos e verificações de contraste. Transformar um design do Figma em código alinhado ao sistema de design.
Como instalar skills?
Instale a coleção de skills: npx skills add jakubkrehel/skills Ou adicione o marketplace de plugins do Claude Code: /plugin marketplace add jakubkrehel/skills Em seguida, instale o plugin: /plugin install interfaces@interfaces
Onde consigo skills?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/jakubkrehel/skills

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados