ibelick UI Skills

What it is

ibelick UI Skills is Julien Thibeaut’s registry of skills for design engineers. You reach it three ways: a CLI, an MCP server, or the nine skills in his repository. The nine cover a quick cleanup of generic UI code, accessibility, page metadata, motion performance, design plans, a DESIGN.md file, two canvas builders and a routing skill. The CLI and the MCP server only print or return text. Claude does the work.

1. You describe a UI task and ask Claude to use UI Skills
2. Claude runs npx ui-skills start, then picks a skill
3. The CLI prints that skill’s text for Claude to read
4. Claude follows it on your code, and you review the result

Who it suits

Front-end developers and design engineers who let Claude write interface code and want it held to rules. The skills assume web UI, and baseline-ui assumes Tailwind CSS, so a native app or another styling system gets less from them.

Where to use it

Claude Code, Codex and Cursor are the agents the routing skill names.

• The CLI: npx ui-skills in any terminal with a recent Node
• The MCP server: an address you add to an agent that supports MCP
• Claude Code skills: a skill folder copied by hand, which the README does not cover
• Your own project: the skills read your code, tokens and components, so run them inside it

How to set it up

Get it saves a zip of Mindket’s setup notes in your downloads folder, with the CLI, the MCP server and the copy-by-hand route.

1. Check your Node version. The repository’s package.json asks for 22.19.0 or newer. Run node --version to see yours.
2. Print the routing skill. Run it once yourself to read the rules Claude follows to pick a skill.
3. Tell Claude to follow it. Before a UI task, say: run npx ui-skills start and follow it.

npx ui-skills start

The other three commands from the README browse the registry. categories lists the topics, list shows skills, with --category for one topic, and get prints one skill’s full text.

npx ui-skills categories
npx ui-skills list --category motion
npx ui-skills get baseline-ui

To give Claude the registry directly, add the MCP server. The README gives its address and two tool names, list_skills and get_skill.

https://www.ui-skills.com/mcp

The add command below is the form from Claude Code’s docs. The name ui-skills is yours to choose.

claude mcp add --transport http ui-skills https://www.ui-skills.com/mcp

To keep a skill installed in Claude Code, copy its whole folder from the repository into ~/.claude/skills/ or a project’s .claude/skills/. Claude Code’s docs describe both places, and the setup notes list the steps.

How to use it

Ask for UI work in plain words and name the skill, or let Claude route. Once a skill is installed in Claude Code, the skills’ own slash forms work too, such as /baseline-ui followed by a file.

Example

Claude built a settings page for your app and it looks generic. You want a quick cleanup.

Review src/components/Settings.tsx against baseline-ui. List each violation with a fix.

Claude loads baseline-ui’s text, from the CLI, the MCP server or an installed copy, then lists each violation with the quoted line, one sentence on why it matters and a code-level fix.

The rules it checks include h-dvh in place of h-screen, an aria-label on icon-only buttons and animation only on transform and opacity.

For newcomers and experts

If you are new. A skill is a text file of rules that Claude follows. UI Skills lets Claude fetch one when a task needs it, so nothing sits in your project. Start with baseline-ui on one file you already have. You only need the CLI at first. It prints text in a terminal and does nothing else.

For experts. The registry lists skills from other publishers too, and a name that several publishers share needs its path form, written like ibelick/baseline-ui. improve-ui changes no product source and writes only under design-plans/. It keeps a finding only when it has a design contract, a runtime path and one correction, and it stops at three. create-design-md ends by running a linter from the @google/design.md package, which Claude runs with this line:

npx @google/design.md lint DESIGN.md

It then runs one export in the format that fits the project’s styling, such as css-tailwind for Tailwind v4. The skill says not to return a DESIGN.md while either step fails.

Good to know

The CLI and the MCP server only print or return text. They install nothing and edit nothing.

• Registry: it lists skills from other publishers too. This page covers the nine in ibelick’s repository. Claude follows a skill’s text as instructions, so read one from a publisher you do not know first
• Network: in the CLI source Mindket read, it makes plain GET requests to ui-skills.com and sends none of your files. The published package, version 0.2.4, holds the same source
• First run: npx downloads the package with its dependencies, astro and react among them, so it fetches more than the CLI
• Opinions: baseline-ui bans gradients unless you ask for them, adds no animation unless asked, keeps interaction feedback at 200 ms or less and assumes Tailwind CSS defaults. Say so when your project differs
• improve-ui: it asks which finding to turn into a plan, and another agent carries the plan out
• create-design-md: it edits only DESIGN.md. Its URL mode needs a browser to inspect the site, and its lint and export use npx, which may download the package
• Canvas skills: they ask before adding a dependency, changing shared code or making a canvas public
• Updates: the README gives no update or removal step. The CLI prints the registry’s current text each run, and a skill copied by hand stays as copied
• Maker: Julien Thibeaut, MIT licensed. A community project, not made or endorsed by Anthropic