AI coding agents can scaffold a full app in minutes, but the result often looks the same: generic spacing, safe colors, and animations that feel slightly off. ui-skills attacks that exact problem. It is an open source registry of design engineering skills that teaches an AI agent how to build interfaces with taste, covering spacing, typography, motion, accessibility, and performance. Instead of pasting a long style prompt into every chat, you connect the agent to the registry once, and it pulls the right lesson at the right moment.
Key Takeaways
>
ui-skills is a curated registry of design engineering skills for AI coding agents, created by Julien Thibeaut (ibelick) and published as open source under the MIT license.
You can browse it from the terminal with
npx ui-skills, or connect an agent to it over MCP athttps://www.ui-skills.com/mcp.The registry covers practical topics: UI baselines, motion performance, accessibility, metadata, and canvas workflows.
The repo has passed 10,000 stars on GitHub, which makes it one of the most watched design engineering resources for the agent era.
Watch the 30-second repo signal: Give Your AI Agent Real Design Engineering Skills
Why AI Interfaces All Look the Same
An AI agent writes code from patterns it has seen most often. Without guidance, it reaches for the most common defaults: a purple gradient hero, rounded cards, and a fade-in on everything. The result works, but it has no point of view. Human design engineers avoid this by following constraints: a spacing scale, a type hierarchy, rules for when motion is allowed, and accessibility habits that are checked, not hoped for.
That is the gap ui-skills fills. A "skill" here is not a component library and not a template. It is a written lesson, stored as markdown, that an agent reads before it acts. The lesson states constraints (do this, never do that) and a review format (quote the violation, explain why it matters, propose a concrete fix). The agent then applies those constraints to the code it writes, instead of guessing.
What ui-skills Actually Is
ui-skills describes itself with one line: "Skills for Design Engineers." The project lives on GitHub under ibelick, is written mostly in TypeScript, and is licensed under MIT, so anyone can use it in commercial work. It was created in January 2026 and has grown to more than 10,000 stars and 475 forks, according to its GitHub page. There are three ways to use it, and they complement each other.
Way in | What it is | Best for |
|---|---|---|
CLI | A terminal tool: browse categories, list skills, fetch one skill | Exploring the catalog and reading a lesson yourself |
MCP server | A Model Context Protocol endpoint with | Wiring the registry straight into an AI coding agent |
Playbook | Distilled UI lessons from the best skills, on the website | Reading the core ideas without any setup |
The CLI is the fastest way to see what is inside. From a terminal, npx ui-skills start opens an interactive browser, npx ui-skills categories lists the topics, npx ui-skills list --category motion narrows to motion skills, and npx ui-skills get baseline-ui fetches one skill in full. All four commands are documented in the project's README.
The MCP route is the one that matters most for agent workflows. You point a compatible agent at https://www.ui-skills.com/mcp, and the agent can call list_skills to find a relevant lesson and get_skill to read it before writing code. The skill is fetched on demand, so the agent's context stays small until the moment a design decision actually comes up.
What Is Inside the Registry
The repository itself ships a focused set of skills, and the website catalog lists additional community-authored skills alongside them. The skills that ship in the repo show the range of problems the project targets.
Skill | What it does |
|---|---|
baseline-ui | Enforces an opinionated UI baseline: spacing, hierarchy, typography, and small layout fixes |
fixing-motion-performance | Audits animation performance: layout thrashing, compositor properties, scroll-linked motion, blur effects |
fixing-accessibility | Reviews interfaces against accessibility rules before they ship |
fixing-metadata | Checks page metadata for correctness and consistency |
improve-ui | Reviews an interface and proposes concrete improvements |
create-design-md | Produces a design document for a feature before it is built |
component-canvas | Builds a canvas for exploring and comparing components |
create-canvas | Creates a freeform canvas for design exploration |
ui-skills-root | Routes a request to the smallest useful set of skills by topic, stack, and intent |
The baseline-ui skill is a good example of how opinionated these lessons are. It requires Tailwind CSS defaults unless custom values already exist, requires motion/react when JavaScript animation is needed, and requires accessible component primitives such as Base UI, React Aria, or Radix for anything with keyboard or focus behavior. On animation it is strict: animate only compositor properties (transform, opacity), never animate layout properties like width or height, keep interaction feedback under 200 milliseconds, and always respect prefers-reduced-motion. It also bans small anti-patterns that agents love, like blocking paste in inputs or using h-screen instead of h-dvh.
The catalog on ui-skills.com extends this with community skills from well-known authors, including a frontend design skill from Anthropic, a motion advisor skill from Emil Kowalski, and interface skills from shadcn and Addy Osmani. That mix is part of the appeal: the registry is curated, but it is not limited to one person's taste.
Why Skills Beat Longer Prompts
Developers already try to fix generic AI output with longer prompts. The problem is that a prompt written once, for one project, goes stale, and it is re-read on every request whether it is relevant or not. A skill registry solves both issues.
First, skills are retrieved by topic. An agent working on a landing page does not need the motion performance lesson, and an agent fixing jank does not need the metadata lesson. The MCP tools let the agent fetch only what the current task needs.
Second, skills are written as reviewable rules, not vibes. "Make it look premium" cannot be checked. "Never animate layout properties, and quote the exact line that violates the rule" can be checked, by the agent itself, before it answers. That review step is built into several skills: report the violation, explain why it matters in one sentence, and propose a code-level fix.
Third, skills compound. Once a team agrees on a baseline, every agent session starts from the same constraints, which is how a product keeps a consistent look across features built weeks apart.
Honest Limits
ui-skills will not turn a bad product idea into a good one, and it will not replace a designer's judgment on a hard call like brand direction. The skills are guidance for an agent, not a guarantee: the agent still writes the code, and a human still needs to review the result. Some skills also assume a modern React and Tailwind stack, so teams on other stacks will get less from the most opinionated rules. Treat it as a strong default, not as autopilot.
Still, for the common case, an AI agent with a design skill, the gap between "it works" and "it feels right" gets much smaller. If you use AI agents to build interfaces, that is a gap worth closing.
Frequently Asked Questions
Is ui-skills free?
Yes. It is open source under the MIT license, so you can use it in personal and commercial projects at no cost.
How is this different from a component library?
A component library gives you ready-made pieces. ui-skills gives your agent rules for how to build, review, and polish interfaces, whatever components you use. The two complement each other.
Do I need the MCP server, or is the CLI enough?
The CLI is enough if you want to read skills yourself or paste one into a chat. The MCP server is the better choice if you want the agent to fetch skills on its own, per task, without manual steps.
Which agents can use the MCP server?
Any agent or tool that supports MCP remote servers and can be pointed at a URL can connect to https://www.ui-skills.com/mcp. Setup details vary by tool, so check your agent's MCP documentation.
Where do I start?
Run npx ui-skills start to browse, then read baseline-ui first. It is the fastest way to see the difference a single skill makes on ordinary UI work.
---
Read this article in Indonesian: UI-Skills: Beri Agen AI Anda Keterampilan Design Engineering Nyata. If you are new to the concept, start with What Is Open Source?.
Sources: GitHub, UI Skills, UI Skills Playbook, baseline-ui skill.