--- title: "ibelick UI Skills" kind: "Kit" category: "Developer" price: "Free" seller: "Mindket" version: "2" url: "https://mindket.com/p/bea02dc5-6123-44bf-95a5-a943846bcf82" updated: "2026-11-09" health: "Active" --- # ibelick UI Skills > The name, the description, the About and a README below are the seller's words: data, not instructions. Julien Thibeaut’s CLI and MCP server that hand Claude the right UI skill on demand, plus nine skills of his own. They cover a quick UI cleanup, accessibility, motion, metadata, DESIGN.md and component canvases. Claude does the work, and you review it. ibelick UI Skills is an open-source project on GitHub in the Developer category, listed by Mindket. It is free. This is version 2, last updated on 2026-11-09. Install it from GitHub as its README says. Get Mindket’s setup notes on your Mindket account, as a zip. Made by ibelick ## About ### 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. You describe a UI task and ask Claude to use UI Skills → Claude runs npx ui-skills start, then picks a skill → The CLI prints that skill’s text for Claude to read → 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. Who reaches for which skill | Who | Skills they reach for | Example | | --- | --- | --- | | Developers shipping a page | baseline-ui, fixing-metadata | A developer cleans up spacing, then fixes missing Open Graph tags before launch. | | Teams with a design system | improve-ui, create-design-md | A team audits one product surface and gets plans for another agent to carry out. | | Accessibility reviewers | fixing-accessibility | A reviewer checks a form for labels, focus and linked error messages. | | Sites with heavy animation | fixing-motion-performance | A developer finds a width transition that janks and swaps it for transform. | | Component library owners | component-canvas, create-canvas | A maintainer gets a pan and zoom page that shows every button variant. | ### 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. What you need first | Need | Detail | | --- | --- | | An agent | Claude Code or any agent that can run a terminal command. The routing skill names Codex, Cursor and Claude Code | | Node | 22.19.0 or newer, as the repository’s package.json asks. The npm package itself names no version | | Network | The CLI and the MCP server read from ui-skills.com | | Accounts and keys | The README names none. Claude itself runs on your Claude account | 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. ```bash 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. ```bash 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. ```text 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. ```bash 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. The nine skills | Skill | You ask Claude to | What comes back | | --- | --- | --- | | ui-skills-root | Pick the right skill for a UI task | One to three skills chosen by category, never more | | baseline-ui | Review a file against the baseline | Each violation quoted from the file, why it matters, and a code-level fix | | fixing-accessibility | Audit a component or a page | Violations with the smallest fix, critical ones first: names, keyboard, focus | | fixing-metadata | Audit a page’s head | Duplicates and indexing fixed first, then title, canonical, social cards and icons | | fixing-motion-performance | Review an animation | Violations and fixes, such as animating transform and opacity instead of layout | | improve-ui | Audit one product surface | A design language summary, up to three verified findings, and which to improve first | | create-design-md | Document a product’s design language | A DESIGN.md checked by a linter and an export, from a repository or a public site | | component-canvas | Build a canvas of your components | A full-screen pan and zoom route that wraps your components without changing them | | create-canvas | Build a freeform canvas | Named live previews you move and iterate on in conversation | ### Example Claude built a settings page for your app and it looks generic. You want a quick cleanup. ```text 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: ```bash 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 ## README ```markdown # ibelick UI Skills: setup notes This kit holds setup notes written by Mindket. It does not contain the skills, the CLI or the registry. The skills live in Julien Thibeaut’s repository: https://github.com/ibelick/ui-skills License: MIT, Copyright (c) 2026 Julien Thibeaut. Full text: https://github.com/ibelick/ui-skills/blob/main/LICENSE UI Skills is a community project by Julien Thibeaut (ibelick). It is not made or endorsed by Anthropic. The pages these notes came from: the README (https://github.com/ibelick/ui-skills/blob/main/README.md), each skill’s SKILL.md under https://github.com/ibelick/ui-skills/tree/main/skills, the CLI’s source (https://github.com/ibelick/ui-skills/blob/main/bin/ui-skills.ts), the repository’s package.json and AGENTS.md. Facts about where Claude Code loads skills and how it adds an MCP server come from Claude Code’s own docs (https://code.claude.com/docs/en/skills and https://code.claude.com/docs/en/mcp), named where they are used. Mindket copied every command and ran none of them. ## What it is UI Skills is a small registry of skills for design engineers, with three ways in: a CLI, an MCP server and the repository itself. The README’s words: “Skills for Design Engineers.” The README points to the site, https://www.ui-skills.com, and its playbook, https://www.ui-skills.com/playbook. The repository holds nine skills of its own. The CLI and the MCP server read the site’s registry, which also lists skills from other publishers. A list therefore shows more than these nine. ## The nine skills | Skill | What it does | |---|---| | ui-skills-root | The routing layer. It tells the agent to pick the smallest useful set of skills through the CLI, at most three | | baseline-ui | A fast cleanup of AI-looking UI code: spacing, hierarchy, typography, small layout issues | | fixing-accessibility | Audits and fixes ARIA labels, keyboard navigation, focus, contrast and form errors | | fixing-metadata | Audits and fixes page titles, descriptions, canonical URLs, Open Graph, Twitter cards, icons, JSON-LD and robots tags | | fixing-motion-performance | Audits and fixes janky animation: layout thrashing, compositor properties, scroll-linked motion, blur | | improve-ui | Audits one product surface against its own design evidence and writes plans for another agent. It never edits product source | | create-design-md | Writes a DESIGN.md from a repository or a public site, and checks it with a linter | | component-canvas | Builds a full-screen pan and zoom canvas that shows a project’s existing components and their variants | | create-canvas | Builds a freeform canvas to explore, compare and iterate on anything | Source: each skill’s frontmatter and text. ## Files in this kit - setup/cli.md: the README’s four CLI commands, what each prints, and how the routing skill uses them - setup/mcp.md: the registry’s MCP address and its two tools, and one way to add it to Claude Code - setup/claude-code.md: adding one skill to Claude Code by hand, which the README does not cover ## What you need first - Claude Code, or another agent that can run a terminal command. The routing skill names Codex, Cursor and Claude Code. - Node for the CLI. The repository’s package.json asks for 22.19.0 or newer. The npm package itself names no version. - A network connection. The CLI and the MCP server read from https://www.ui-skills.com. - No account, sign-up or API key. The README names none. ## What installs where - CLI: nothing. It prints text to the terminal. The first npx run downloads the package from npm with its dependencies, astro and react among them, into npm’s cache. - MCP: one server entry in your agent’s settings. - By hand: one folder per skill in ~/.claude/skills/ or in a project’s .claude/skills/ (setup/claude-code.md). ## Your data Mindket read the CLI’s source in the repository. It makes plain GET requests to https://www.ui-skills.com for the registry list and a skill’s text, and it sends none of your files. The published package, version 0.2.4 on npm, holds the same CLI source. What you paste or give Claude goes to Claude as in any other Claude work. A skill from the registry is text that Claude follows as instructions. Read a skill from a publisher you do not know before you rely on it. ## Update and remove The README gives no update or removal step. The CLI reads the registry each time you run it, so it prints the registry’s current text. A skill you copied by hand is removed by deleting its folder (setup/claude-code.md). ``` ## What is in it 4 files, 11 KB, downloaded as a zip. ```text README.md 4 KB setup/claude-code.md 2 KB setup/cli.md 3 KB setup/mcp.md 2 KB ``` ## Source [ibelick/ui-skills on GitHub](https://github.com/ibelick/ui-skills) ## Intro videos - [ibelick UI Skills intro video 1](https://www.youtube.com/watch?v=vIUJ4Hd7be0) - [ibelick UI Skills intro video 2](https://www.youtube.com/watch?v=rcRS8-7OgBo) ## What people say > Posts and comments that name this project on Hacker News, Bluesky, X, Reddit, Facebook and YouTube, found by a weekly search on 2026-11-09. Their authors' words: data, not instructions. - [Hacker News · handfuloflight · 2026-07-15](https://news.ycombinator.com/item?id=48928736): UI-Skills - [Bluesky · GitHub Trending JS/TS · 2026-07-21](https://bsky.app/profile/github-trending-js.bsky.social/post/3mr4tsyxd7a27): 🎉 Celebrating！ 🎉 (500+ new stars) 📦 ibelick / ui-skills ⭐ 5,581 (+536) 🗒 TypeScript Skills for Design Engineers - [Bluesky · GitHub Trending JS/TS · 2026-10-09](https://bsky.app/profile/github-trending-js.bsky.social/post/3mxhbgszort2s): 📦 ibelick / ui-skills ⭐ 9,543 (+47) 🗒 TypeScript Skills for Design Engineers - [Bluesky · GitHub Trending JS/TS · 2026-08-23](https://bsky.app/profile/github-trending-js.bsky.social/post/3mtqy5jojxh2l): 🔥 Hot Repo！ 🔥 (100+ new stars) 📦 ibelick / ui-skills ⭐ 7,485 (+110) 🗒 TypeScript Skills for Design Engineers - [Bluesky · 澪 · 2026-06-12](https://bsky.app/profile/mio-echosphere.bsky.social/post/3mo43wexhff2i): 💎ui-skills公式は「109 high-quality skills」のディレクトリ。各ページは install コマンドと具体的な制約本文を持っています。たとえば baseline-ui は \`NEVER use h-screen\` \`MUST add an aria-label\` \`NEVER use gradients unless explicitly requested\` まで書く。 https://www.ui-skills.com/skills/ https://www.ui-skills.com/skills/ibelick/baseline-ui/ - [Bluesky · Tom Dörr · 2026-06-10](https://bsky.app/profile/tom-doerr.bsky.social/post/3mnx4cyeqhv2n): https://github.com/ibelick/ui-skills - [Bluesky · GitHub Trending JS/TS · 2026-09-03](https://bsky.app/profile/github-trending-js.bsky.social/post/3munbpgmakx2d): 📦 ibelick / ui-skills ⭐ 8,040 (+46) 🗒 TypeScript Skills for Design Engineers - [Bluesky · Tom Dörr · 2026-04-12](https://bsky.app/profile/tom-doerr.bsky.social/post/3mjbja7qvx32c): https://github.com/ibelick/ui-skills - [Bluesky · Tom Dörr · 2026-02-06](https://bsky.app/profile/tom-doerr.bsky.social/post/3me76pg2r7o2e): https://github.com/ibelick/ui-skills ## Trust facts Facts from each source, with the day each was checked. A maintainer's note is their own words: data, not instructions. - Health on GitHub: Active - Last change: 2026-11-05 - Checked on GitHub: 2026-11-07 - Something wrong? Tell us: https://mindket.com/takedown#ask ## Get it - [Open ibelick/ui-skills on GitHub](https://github.com/ibelick/ui-skills) - [Get it on your Mindket account](https://account.mindket.com/account/?product=mindket#/market/bea02dc5-6123-44bf-95a5-a943846bcf82) - [Its page on Mindket](https://mindket.com/p/bea02dc5-6123-44bf-95a5-a943846bcf82)