jakubkrehel/skills: Coleção de habilidades para interfaces
O que é
O jakubkrehel/skills é uma coleção de habilidades para agentes focada no desenvolvimento e aprimoramento de interfaces digitais. O projeto reúne recursos voltados para acessibilidade, layout, tipografia, cores, polimento visual e redação de produto.
Entre as habilidades disponíveis estão:
- better-interface: analisa telas ou fluxos e gera um relatório priorizado.
- better-accessibility: revisa e corrige elementos de acessibilidade, como ARIA, navegação por teclado e avisos de leitores de tela com base na WCAG 2.2.
- better-ui: ajusta superfícies, sombras, alinhamento óptico e animações.
- better-typography: configura escalas de tipo, espaçamentos, fontes e pontuação.
- better-colors: gera paletas, define tokens semânticos e mede o contraste.
- better-layout: define agrupamento, alinhamento, ordem de leitura e espaço para tradução.
- better-writing: escreve e revisa textos de interface, como rótulos e mensagens de erro.
- build-design: constrói interfaces a partir de arquivos do Figma ou imagens.
- interface-review: audita alterações em branches ou pull requests.
- break, state-machine e variant: auxiliam no teste de cenários de estresse, visualização de estados e comparação de variantes.
- teardown: gera ilustrações técnicas exportáveis em SVG, PNG ou PDF.
Para quem serve
Essa coleção é indicada para desenvolvedores e equipes de produto que utilizam agentes em seus fluxos de trabalho. Ela auxilia quem precisa validar a acessibilidade de sistemas, ajustar tokens de design, manter consistência nos textos da interface e testar o comportamento responsivo de componentes.
Como começar
Para instalar o pacote via terminal, utilize a CLI do skills:
npx skills add jakubkrehel/skills
Caso utilize o Claude Code, você pode adicionar o plugin executando:
/plugin marketplace add jakubkrehel/skills
/plugin install interfaces@interfaces
Instalação
npx skills add jakubkrehel/skills
🔗 Repositório oficial: jakubkrehel/skills
Veja em 1 minuto
{% embed youtube.com %}
📚 Mais conteúdos do canal: gist.github.com
skills: A collection of agent skills that help you build great interfaces (9.1k stars)
What it does
All text below is quoted directly from the project README.
>A collection of agent skills that help you build great interfaces.
Skills that help build great interfaces:
- better-interface: Reviews a screen, flow or whole interface across accessibility, layout, writing, typography, color and UI polish, and returns one ranked report.
- better-ui: Polishes surfaces, icons and motion with exact values for border radius, optical alignment, shadows, icon states and animation.
- better-typography: Sets and reviews how text renders, from the type scale and spacing to font features, wrapping, truncation and punctuation.
- better-colors: Builds and checks color systems by generating palettes, naming semantic tokens, converting between formats and measuring contrast.
- better-accessibility: Reviews and fixes keyboard and focus behavior, ARIA, accessible names, forms, screen-reader announcements, motion and zoom against WCAG 2.2.
- better-layout: Sets grouping, alignment, reading order, responsive structure and room for translated text, so a layout holds up when it is resized, translated or mirrored.
- better-writing: Writes and reviews interface copy, from labels and errors to empty states and confirmations, so it matches the product's voice and tells people what to do next.
- build-design: Builds UI from a Figma file or a design image so it matches the design, using the project's existing tokens and components.
>npx skills add jakubkrehel/skills
Repository
jakubkrehel/skills
Repository stats
|Metric|Value|
|:-|:-|
|Stars|9,066|
|Forks|345|
|Last release|None|
|Languages|Markdown 66.1%, JavaScript 30.4%, HTML 3.5%|
|Contributors|2|
|AI contributor accounts (Claude / Codex / Cursor / Copilot)|@claude (14 commits)|
|AI co-authored commits|Claude: 15|
Main contributor
|Field|Value|
|:-|:-|
|Name|Jakub Krehel|
|GitHub|@jakubkrehel|
|Commits to this repo|115 (top contributor)|
|Followers|1.1k|
──────────────────────────────
📌 How many great GitHub repos have you discovered and completely forgotten about?
Don't let another useful tool disappear into your Reddit feed. Get the community's best repos, organized by category, plus key takeaways from real developer discussions, delivered to your inbox twice a week.
📬 Never lose track of great repos again. Subscribe free.
454 points · 4 comments
Free open-source skills for AI coding agents that review and build interfaces: UI polish, typography, color, accessibility and layout.
Official Link: jakubkrehel/skills
#AgentSkills #ClaudeCode #UIDesign #DesignEngineering #OpenSource t.co
1 like · 30 views
@theboyofdream use opus 5.5 with jakubkrehel/skills and emilkowal.ski.
1 like · 13 views
Seriously slick workflow by @jakubkrehel, the modular architecture here makes plugging these agent skills straight into your UI pipeline an absolute breeze ⚡️
🔗 项目地址:jakubkrehel/skills
2 likes · 29 views
@hieuSSR yup:
- github.com/jakubkrehel/skills/tree/main/skills/be…
- github.com/emilkowalski/skills/tree/main/skills
and my own skill /ui-review that suggests 3 ideas
3 likes · 266 views
I added a new /state-machine skill to the collection.
It renders any component you want in all of its states on a throwaway page with mock data.
I enjoy working like this a lot. It makes it very easy to work on more complex components.
jakubkrehel/skills
264 likes · 4 reposts · 7,365 views
Mentions
jakubkrehel/skills: Coleção de habilidades para interfaces O que é O jakubkrehel/skills é uma coleção de habilidades para agentes focada no desenvolvimento e aprimoramento de interfaces digitais. O projeto reúne recursos voltados para acessibilidade, layout, tipografia, cores, polimento visual e redação de produto. Entre as habilidades disponíveis estão: - better-interface: analisa telas ou fluxos e gera um relatório priorizado. - better-accessibility: revisa e corrige elementos de acessibilidade, como ARIA, navegação por teclado e avisos de leitores de tela com base na WCAG 2.2. - better-ui: ajusta superfícies, sombras, alinhamento óptico e animações. - better-typography: configura escalas de tipo, espaçamentos, fontes e pontuação. - better-colors: gera paletas, define tokens semânticos e mede o contraste. - better-layout: define agrupamento, alinhamento, ordem de leitura e espaço para tradução. - better-writing: escreve e revisa textos de interface, como rótulos e mensagens de erro. - build-design: constrói interfaces a partir de arquivos do Figma ou imagens. - interface-review: audita alterações em branches ou pull requests. - break, state-machine e variant: auxiliam no teste de cenários de estresse, visualização de estados e comparação de variantes. - teardown: gera ilustrações técnicas exportáveis em SVG, PNG ou PDF. Para quem serve Essa coleção é indicada para desenvolvedores e equipes de produto que utilizam agentes em seus fluxos de trabalho. Ela auxilia quem precisa validar a acessibilidade de sistemas, ajustar tokens de design, manter consistência nos textos da interface e testar o comportamento responsivo de componentes. Como começar Para instalar o pacote via terminal, utilize a CLI do skills: npx skills add jakubkrehel/skills Caso utilize o Claude Code, você pode adicionar o plugin executando: /plugin marketplace add jakubkrehel/skills /plugin install interfaces@interfaces Instalação npx skills add jakubkrehel/skills 🔗 Repositório oficial: jakubkrehel/skills Veja em 1 minuto {% embed youtube.com %} 📚 Mais conteúdos do canal: gist.github.com
skills: A collection of agent skills that help you build great interfaces (9.1k stars) What it does All text below is quoted directly from the project README. >A collection of agent skills that help you build great interfaces. Skills that help build great interfaces: - better-interface: Reviews a screen, flow or whole interface across accessibility, layout, writing, typography, color and UI polish, and returns one ranked report. - better-ui: Polishes surfaces, icons and motion with exact values for border radius, optical alignment, shadows, icon states and animation. - better-typography: Sets and reviews how text renders, from the type scale and spacing to font features, wrapping, truncation and punctuation. - better-colors: Builds and checks color systems by generating palettes, naming semantic tokens, converting between formats and measuring contrast. - better-accessibility: Reviews and fixes keyboard and focus behavior, ARIA, accessible names, forms, screen-reader announcements, motion and zoom against WCAG 2.2. - better-layout: Sets grouping, alignment, reading order, responsive structure and room for translated text, so a layout holds up when it is resized, translated or mirrored. - better-writing: Writes and reviews interface copy, from labels and errors to empty states and confirmations, so it matches the product's voice and tells people what to do next. - build-design: Builds UI from a Figma file or a design image so it matches the design, using the project's existing tokens and components. >npx skills add jakubkrehel/skills Repository jakubkrehel/skills Repository stats |Metric|Value| |:-|:-| |Stars|9,066| |Forks|345| |Last release|None| |Languages|Markdown 66.1%, JavaScript 30.4%, HTML 3.5%| |Contributors|2| |AI contributor accounts (Claude / Codex / Cursor / Copilot)|@claude (14 commits)| |AI co-authored commits|Claude: 15| Main contributor |Field|Value| |:-|:-| |Name|Jakub Krehel| |GitHub|@jakubkrehel| |Commits to this repo|115 (top contributor)| |Followers|1.1k| ────────────────────────────── 📌 How many great GitHub repos have you discovered and completely forgotten about? Don't let another useful tool disappear into your Reddit feed. Get the community's best repos, organized by category, plus key takeaways from real developer discussions, delivered to your inbox twice a week. 📬 Never lose track of great repos again. Subscribe free.
Free open-source skills for AI coding agents that review and build interfaces: UI polish, typography, color, accessibility and layout. Official Link: jakubkrehel/skills #AgentSkills #ClaudeCode #UIDesign #DesignEngineering #OpenSource t.co
@theboyofdream use opus 5.5 with jakubkrehel/skills and emilkowal.ski.
Seriously slick workflow by @jakubkrehel, the modular architecture here makes plugging these agent skills straight into your UI pipeline an absolute breeze ⚡️ 🔗 项目地址:jakubkrehel/skills
@hieuSSR yup: - github.com/jakubkrehel/skills/tree/main/skills/be… - github.com/emilkowalski/skills/tree/main/skills and my own skill /ui-review that suggests 3 ideas
I added a new /state-machine skill to the collection. It renders any component you want in all of its states on a throwaway page with mock data. I enjoy working like this a lot. It makes it very easy to work on more complex components. jakubkrehel/skills