If you have let a coding agent build a screen lately, you already know the pattern: the layout works, the buttons render, and yet something feels off. The spacing is slightly wrong, the colours clash in ways you cannot quite name, and the whole thing reads like a template wearing a costume. That gap between “functional” and “good” is exactly what agent skills build better interfaces are designed to close — and one open-source collection doing it properly has just passed 9,500 stars on GitHub. Jakub Krehel’s skills repository is a set of fourteen agent skills that teach coding agents the craft of interface design: accessibility, typography, colour, layout, writing, and polish, with real rules instead of vague advice. In this deep-dive we look at what each skill does, how to install the collection, and — honestly — where it still falls short.
What the collection actually is
The repository, published under the MIT licence and updated as recently as 31 October 2026, describes itself plainly: “A collection of agent skills that cover UI, typography, colors, accessibility, layout, product writing and help you build a great interface.” Each skill is a Markdown file that an AI coding agent loads when it needs that expertise. The author, Jakub Krehel, writes about design engineering on his personal site and in his magazine Interfaces, and the skills read like distilled notes from that work rather than generic prompt collections.
That distinction matters. Most “agent skill” collections floating around right now are prompt dumps: a few paragraphs of encouragement telling the agent to “make it beautiful” or “follow best practices.” This collection does the opposite. It hands the agent checkable rules with exact values — a press state that scales to 0.96, an outer border radius equal to the inner radius plus padding, shadows for elevation and borders for structure. An agent given exact values produces consistent work. An agent given vibes produces whatever it feels like that day.
The numbers back up the interest: at the time of writing the repo holds over 9,500 stars and 367 forks, and it is also listed on skills.sh, the emerging directory for agent skills. It was created in July 2026, which makes that growth fast — a sign that interface quality, not code generation speed, is now the bottleneck teams feel most sharply when they build with agents.
What it can do: the fourteen skills
The collection splits into three groups: reviewers, craft specialists, and builders. Understanding the split helps you pick the right skill instead of loading all fourteen at once.
The reviewers
- better-interface — the orchestrator. It reviews a screen, flow, or whole interface across accessibility, layout, writing, typography, colour, and polish, then returns one ranked report. Its bar is evidence, not taste: a finding must be backed by a rule, and deliberate project choices are left alone.
- interface-review — the change-scoped cousin. Point it at a branch, pull request, or uncommitted change and it reports only what that change introduced or regressed. Pre-existing issues do not block approval, which is the only sane way to run reviews on a real codebase.
- explain-interface — give it a live URL or a screenshot and it explains how a website, visual effect, or animation was built. Useful when your team wants to learn from a reference instead of copying it blindly.
The craft specialists
- better-ui — visual polish with exact values: border radius, optical alignment, shadows, icon states, and animation. Its rules are refreshingly opinionated, such as driving interactive states with transitions rather than keyframes so a reversed interaction can retarget mid-flight.
- better-typography — type scale, spacing, font features, wrapping, truncation, and punctuation. The details agents usually mangle first.
- better-colors — palette generation, semantic token naming, format conversion, and contrast measurement. Colour systems, not colour picks.
- better-accessibility — keyboard and focus behaviour, ARIA, accessible names, forms, screen-reader announcements, motion, and zoom, reviewed against WCAG 2.2. This is the skill most teams should load first, because accessibility failures are the ones real users cannot work around.
- better-layout — grouping, alignment, reading order, and responsive structure, including room for translated text so a layout survives localisation.
- better-writing — interface copy: labels, errors, empty states, and confirmations, written to match the product’s voice and tell people what to do next.
The builders
- 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 rather than inventing new ones.
- teardown — creates a configurable technical illustration of an object, exportable as SVG, PNG, or PDF.
- state-machine — renders every state of a component on a throwaway page with mock data and a switcher, so each state can be worked on properly instead of only the happy path.
- variant — builds multiple variants of a component so you can iterate and pick, rather than accepting the agent’s first draft.
- break — renders a component under every scenario that can reach it on a temporary page and stress-tests it. Edge cases included by construction.
How it works: installation and use
Installation is a single command:
npx skills add jakubkrehel/skills
Claude Code users can instead add it as a plugin marketplace and install the interfaces plugin:
/plugin marketplace add jakubkrehel/skills/plugin install interfaces@interfaces
Once installed, the workflow is deliberately boring in the best sense. You ask the agent to review a screen, and better-interface resolves the scope first — one complete flow, not a vague “the whole app” — then runs each domain review in a fixed order: accessibility, layout, writing, typography, colour, and finally polish. That order is a design decision worth stealing for your own reviews: foundational failures must not be hidden under polish. A beautiful button that cannot be reached by keyboard is not a polished button; it is a broken one.
The orchestrator also refuses to guess. If a domain skill is unavailable, it marks that domain “Not reviewed” and continues, rather than recreating rules from memory or claiming coverage it does not have. And when it reviews a change, it separates introduced and regression findings from pre-existing ones, so a pull request is judged on what it actually did. Any team that has watched a review tool drown a small change in a hundred pre-existing warnings will recognise why that matters.
Why it is trending now
The timing is not an accident. Three forces collided in 2026. First, coding agents became genuinely capable of shipping whole features, so interface work shifted from “can the agent build it” to “is what it built any good.” Second, the design-slop backlash made low-effort AI output visible and embarrassing: users can now spot agent-generated interfaces the way they spot stock photos, and that recognition costs trust. Third, the agent-skills format itself matured — with directories like skills.sh, install commands, and plugin marketplaces — so a good collection can spread in days rather than months.
The result is a wave of interface-craft skills, and this collection sits at the front of it because it is written by someone who actually publishes design engineering work, not by someone repackaging tips. The star count reflects that: developers recognise the difference between a skill that says “use good contrast” and one that tells the agent exactly how to measure it.
From our experience: where it helps and where it stops
At MTD Technologies we build client interfaces every week — dashboards, booking flows, storefronts — and the pattern we see with agent-built UI is consistent: the first draft is 80 percent right and the last 20 percent is where the money is. That last 20 percent is spacing, hierarchy, states, and copy. A collection like this attacks exactly that 20 percent, which is why we rate it higher than most agent tooling that promises to “10x” output while quietly lowering the bar for what ships.
Used well, the highest-value setup is a review gate: let the agent build, then run better-interface or interface-review before anything reaches a human reviewer. It catches the systematic errors — inconsistent radii, missing focus states, unlabelled forms — that humans get tired of flagging.
But be honest about the limits. First, these skills encode craft rules, not product judgement. They cannot tell you whether a flow should exist, whether a feature deserves prominence, or whether your onboarding asks for too much too soon. Second, they work in your project’s idiom only if the agent actually reads your tokens and components — point the agent at a codebase with no design system and the skills will still produce consistent output, but consistency around nothing is still nothing. Third, accessibility review by an agent is a strong first pass, not a certification: real screen-reader testing with real users still catches things no checklist reaches. Treat an “Approve” verdict as “ready for human review,” never as “done.” If your team needs help wiring this kind of agent-assisted workflow into real products, our AI agent development and Next.js and React development services cover exactly that ground, and our AI tools directory tracks more tools in this space.
Getting started in five steps
- Install the collection with
npx skills add jakubkrehel/skills(or the Claude Code plugin commands above). - Pick one screen your agent built recently that felt “off” and run a better-interface review on that single flow.
- Fix only the introduced findings first. Ignore pre-existing issues in the first pass so the review stays actionable.
- Add better-accessibility to your default review path. If you load one skill permanently, make it this one.
- Once reviews feel routine, try state-machine on your most complex component and break on the one users complain about most. Those two expose the states your happy-path demos never show.
Frequently asked questions
What are agent skills, exactly?
Agent skills are Markdown instruction files that an AI coding agent loads when it needs specific expertise. Instead of stuffing every rule into one giant prompt, skills let the agent pull in focused knowledge — in this case, interface design rules — only when the task calls for it.
Is jakubkrehel/skills free to use?
Yes. The repository is published under the MIT licence, so you can use it in personal and commercial projects. Attribution is appreciated, as with any open-source work, but the licence does not require payment or permission.
Which skill should I start with?
Start with better-interface for a full review of one screen, or better-accessibility if you can only adopt one thing. Accessibility failures lock real users out, so they outrank polish every time. Add interface-review once you want reviews scoped to pull requests.
Does it work with tools other than Claude Code?
The generic install command, npx skills add jakubkrehel/skills, is designed for the wider skills ecosystem, and the repo is listed on skills.sh. Claude Code gets a dedicated plugin path, but the skills themselves are plain Markdown, so any agent setup that can load skill files can use them.
Will these skills replace a designer?
No. They encode craft rules and review discipline, not product judgement, brand strategy, or user research. They make agent output consistently good and make human designers faster by clearing systematic errors before review. The designer still decides what should exist and why.
The uncomfortable truth about agent-built interfaces is that the tooling got good faster than the taste did. Collections like this one close that gap from the tooling side, with rules an agent can actually follow and a review discipline a team can actually trust. Install it, run it against one real screen this week, and judge it on the findings it returns — not on the star count. If it catches the spacing, contrast, and state errors your reviewers keep flagging by hand, it has already paid for itself. And if you want that kind of agent-assisted build quality wired into a product your business depends on, talk to MTD Technologies — we have spent nine years shipping interfaces, and we know exactly which 20 percent is worth fighting for.