What is the ui-skills skill?
ui-skills is a routing skill from ibelick. Before UI work, it has your agent decide whether the task is UI related, pick a category through the ui-skills CLI, and load the smallest useful set of skills: one by default, two for two clear angles, and never more than three.
ui-skills is the routing layer of Skills for Design Engineers, a repository by ibelick. Its skill, named ui-skills-root, holds almost no UI rules. It decides which other skill the agent should load before it touches an interface.
The SKILL.md says it is shown by npx ui-skills start and is also available in the registry. It names Codex and Cursor among the agents it serves. When the goal is unclear, it asks one short question.
The seven step protocol
- Decide if the task is UI related.
- If it is not, return no skill needed.
- Identify the likely category.
- Inspect that category with the CLI.
- Select the smallest useful skill set.
- Load only the selected skills.
- Implement using that context.
Selection rules
- Prefer one skill. Use two only when the task needs two clear angles.
- Use three only for broad review, redesign or multi-surface work, and never more than three.
- Route by topic first, then stack, then specificity.
- Prefer specific skills over broad ones, and framework-specific skills when the stack is obvious.
- For quick cleanup, take the most specific craft, visual or layout skill. If unsure, inspect categories and pick the safest narrow one.
Who ui-skills is for
Best for
- Agents with many UI skills available that would otherwise load too much context for a small job.
- Design engineers who want one entry point to motion, layout and craft skills, for example web motion design.
- Jobs where the category is known, such as motion, but the exact skill is not.
Not for
- A single known job. If you already know the skill, install it directly, such as premium frontend UI.
- Learning UI rules from this skill. It routes and does not teach, so the rules live in the skills it selects, like Impeccable animate.
- Non-UI tasks. The protocol returns no skill needed for them.
Use it with UiChemy
ui-skills chooses the skills that shape an interface build. When that build has to end up in WordPress, UiChemy takes over: import it with AI to WordPress, or start from Figma with Figma to WordPress. Click Get Started on uichemy.com.
How to install UI Skills: A Router Skill That Picks the Right UI
npx ui-skills startRun the start command
Run
npx ui-skills startin your project. SKILL.md says the root skill is shown by this command.Browse categories
npx ui-skills categorieslists the categories, andnpx ui-skills list --category motionlists the skills in one of them.Fetch a skill
npx ui-skills get baseline-uifetches a skill by slug. The routing skill selects one to three of them per task.Copy the folder from GitHub
Run
git clone https://github.com/ibelick/ui-skills.gitand copy skills/ui-skills-root to the place your agent loads skills from. The README lists no agent folders.
Check that it loaded
Give the agent a UI task, such as tightening a card layout. It should name a category, inspect it with the CLI and load one skill, or answer no skill needed for non-UI work.
Key features
- Routing protocolA seven step protocol takes the agent from deciding the task is UI related to implementing with only the selected skills loaded.
- No skill needed exitFor tasks that are not UI related, the skill tells the agent to return no skill needed instead of loading anything.
- Three skill capOne skill is the default, two cover two clear angles, three are for broad review or redesign, and the skill never allows more than three.
- Topic, stack, specificityRouting goes by topic, then stack, then specificity. Specific skills beat broad ones, and framework skills win when the stack is obvious.
- Start command
npx ui-skills startshows the root skill. SKILL.md says the same skill is also available in the registry. - Category browsing
npx ui-skills categorieslists categories, andnpx ui-skills list --category motionlists the skills inside one. - Fetch by slug
npx ui-skills get baseline-uifetches one skill by slug, so the agent loads only what it selected. - Registry over MCPThe README describes connecting agents to the registry over Model Context Protocol, with two tools: list_skills and get_skill.
- One clarifying questionIf the goal is unclear, the skill asks a single short question. If the goal is clear, it picks a category and moves on.
- PlaybookThe README points to a playbook of distilled UI lessons drawn from the best design engineering skills.
Frequently asked questions
What is ui-skills?
It is a repository of Skills for Design Engineers by ibelick, and its root skill is a router. The skill decides if a task is UI work, inspects a category with the ui-skills CLI, and loads the smallest set of skills for the job before the agent implements anything.
How do I install ui-skills?
Run npx ui-skills start. The README documents the CLI for browsing and fetching skills, and SKILL.md says that command shows the root skill. If you prefer files, clone the repository and copy skills/ui-skills-root into your agent's skills folder.
What does the ui-skills CLI do?
It has four commands in the README: start, categories, list with a category, and get with a slug. Together they let an agent see the root skill, browse categories, list the skills in one, and fetch a single skill by name.
How many skills does ui-skills load per task?
Usually one. SKILL.md allows two when a task needs two clear angles and three only for broad review, redesign or multi-surface work. It states that the router must never use more than three, which keeps context small.
Which AI coding agents can use ui-skills?
SKILL.md says it is for an agent in Codex, Cursor or Claude Code that has a clear UI goal. The README does not list install folders for each one, so check where your agent loads skills before copying the folder by hand.
Does ui-skills have an MCP server?
The README says agents can connect to the registry over Model Context Protocol. It names two tools, list_skills and get_skill. The endpoint is given in the repository README, so copy it from there rather than from a third party.
Is ui-skills the same as a UI design skill?
No. It does not teach layout, motion or color. It routes to the skill that does. For a skill that teaches interface craft directly, compare better interface, then use the router when you have several to choose from.
What license does ui-skills use?
MIT. The SKILL.md frontmatter says MIT, the README links to a LICENSE file, and GitHub detects the same license. That covers the repository the router skill sits in, so check the LICENSE file there before redistributing it.