Improve UI Skill (ibelick) for Claude Code: What It Does and How to Install It

Makes Claude audit one part of your UI against your own design system, report up to three proven problems and write plans for another agent.

Installs: 8.5K; on skills.sh
Stars: 10.5K; on GitHub
Files: 2; besides SKILL.md
Updated: Nov 2026; last repo commit

Claude picks one surface, reads the design sources that govern it, and keeps a finding only if it passes three proofs: a binding design contract, a traced runtime path and one required correction. It stops at three findings, ranks them, and asks which to turn into plans. Plans are written to a design-plans/ folder using a template.

SKILL.md says it must never modify product source, and may create or edit files only under design-plans/. It does not install dependencies, run formatters, commit or push. It uses screenshots only if you provide them or ask for visual inspection. The folder holds SKILL.md, a plan template and an agents/openai.yaml, with no scripts.

Good for

Design engineers checking an interface for design-system drift
Teams that want only evidence-backed UI findings, not a long list of opinions
Anyone preparing a design handoff as written, self-contained plans

Install improve-ui

Claude Code

Copy this prompt.

Install the improve-ui skill in Claude Code. Run this command:

npx skills add https://github.com/ibelick/ui-skills --skill improve-ui

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

Pick one route. The README documents the ui-skills command line tool (npx ui-skills get <name>); the skills CLI and folder routes put the improve-ui folder in your skills directory. The folder holds markdown and YAML only. There is no Claude app upload route because the skill reads your repo and writes files under design-plans/.

Built from the package data we hold. Not yet tested by us.

What's in the skill

When it loads

Audit an existing product surface against its own design evidence, identify verified UI problems, and write self-contained implementation plans for another agent. Strictly read-only on product source. Use when asked to review, refine, improve, or clean up an interface without replacing its identity; investigate design-system drift; or prepare a design handoff.

Sections in SKILL.md

Boundaries
1. Select the surface
2. Reconstruct the local system
Design language
3. Prove findings
4. Vet findings
5. Report
Design language
Findings
Improve first
6. Specify selected changes

Key facts

Author: ibelick (repo owner; ui-skills.com)
Repo: ibelick/ui-skills
License: MIT (LICENSE and README agree)
Installs on skills.sh: 8,479 (Nov 2, 2026)
GitHub stars: 10,511 for the whole repo (Nov 2, 2026)
Last repo commit: Nov 1, 2026
Audits on skills.sh: Gen Agent Trust Hub: pass, Socket: pass, Snyk: pass
What it includes: 3 files: SKILL.md, references/plan-template.md and agents/openai.yaml; no scripts

What it includes

Picks one deployable app and one surface family, and states the choice.
Read · 1. Select the surface
Reads DESIGN.md and repo guidance and the tokens and components on the traced path.
Records a Design language block: audited surface, design sources, decisions, owners, exceptions.
Files · 2. Reconstruct the local system
Keeps a candidate only if contract, runtime and correction proofs all exist.
Read · 3. Prove findings
Re-opens each cited source to try to disprove the finding before reporting.
Read · 4. Vet findings
Writes a table of up to 3 findings with confidence, plus an Improve first pick.
If nothing survives it writes "No supported findings were found."
Try: “Audit the checkout flow UI against our design system”
5. Report
Writes one plan per selected change into design-plans/.
Plans follow references/plan-template.md and must be self-contained.
Write · 6. Specify selected changes
Never modifies product source; no installs, formatters, commits or pushes.
SKILL.md lists 5 boundary rules.
Boundaries

From the official docs

Questions

What does the improve-ui skill do?

It makes Claude audit a product surface against the design evidence in your own repo, report up to three verified problems, and write implementation plans for the ones you choose. Another agent carries out the plans.

Will it change my code?

SKILL.md says never to modify product source and to create or edit files only under design-plans/. These are instructions to Claude, so check the diff. If you ask it to fix something directly, it offers a plan instead of implementing.

How do I install it?

Use the install box at the top of this page. The README documents the ui-skills command line tool, and the box also has the skills CLI and folder routes.

Does it work in the Claude app?

Not recommended. The skill traces routes and components in your repository and writes plan files under design-plans/, so use it where Claude has your code on disk, such as Claude Code. The Claude app upload route is not shown on this page.

Does it need an API key?

SKILL.md names no API key and the folder bundles no scripts.

Is it safe?

The folder bundles no scripts. Claude reads your source and writes plan files to design-plans/. Review the plans before another agent runs them.

Why does it report so few findings?

SKILL.md says to prefer no finding to an unsupported one and to stop at three. Accessibility, performance and broken-route findings are discarded unless you ask for them.

Does it judge visual design from screenshots?

Only if you provide rendered evidence or ask for visual inspection. SKILL.md says hierarchy, density and clarity findings need rendered or user evidence.

Information

updated Nov 2, 2026

Repository: ibelick/ui-skills
Folder: skills/improve-ui

ibelick/ui-skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 3

ui-skills README · github.com
improve-ui SKILL.md · github.com
plan-template.md · github.com