Skip to the usage guide
improve-uiby Julien Thibeaut

Improve UI Skill.

A Claude Code and Codex skill for design review: audits a product surface against its own design evidence and writes implementation plans.

  • Design Review & Accessibility
  • Review report
ibelick/ui-skills · skills/improve-ui/SKILL.mdSKILL.md
--- name: improve-ui description: 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. --- ## Boundaries ## 1. Select the surface ## 2. Reconstruct the local system ## Design language ## 3. Prove findings ## 4. Vet findings
Front matter and section headings read from the upstream file on 2026-09-14 · 7,816 characters in full

01 What it does

What the improve-ui Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

Improve UI audits one coherent product surface against the design system that actually governs it, then writes self-contained implementation plans for another agent to execute. It is read-only on product source: files are created or edited only under design-plans, and no dependencies, formatters, commits or pushes are allowed.

Findings must survive three proofs, contract, runtime and correction, plus a later falsification pass, and the report stops at three, ordered by confidence, user impact, reach and correction cost. It suits designers and developers reviewing, refining or cleaning up an interface without replacing its identity, investigating design-system drift, or preparing a design handoff. Accessibility, behaviour, performance and architecture issues are out of scope unless requested.

Review report
See the example prompt ↗

How It Works

  1. 01
    Select One Coherent Surface

    A broad request is narrowed to one deployable application and one coherent surface family for a primary product task; the skill states that selection instead of treating the repository as a single product.

  2. 02
    Reconstruct the Local System

    It uses a source only after proving it is current and governs the selected surface; drafts, proposals, migrations and task lists describe future intent unless explicitly accepted and current.

  3. 03
    Require Three Proofs per Candidate

    Every kept candidate needs a contract, a runtime path and one deterministic correction; search results, repetition and implementation differences produce candidates, not findings.

  4. 04
    Vet and Falsify

    Candidates are attacked again before reporting, and only the ones that survive that pass are allowed into the findings table.

  5. 05
    Report, Ordered and Capped

    Findings are ordered by confidence, user impact, reach and correction cost, and the list is cut at three.

  6. 06
    Specify Selected Changes

    Before writing, cited sources are re-opened, the current commit is recorded when available, and exact reusable primitives and exemplars are identified across the affected surfaces.

02 Find your fit

When to Use the improve-ui Skill

Use the improve-ui skill in Claude Code or Codex when the job is design review of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • When asked to review, refine, improve, or clean up an interface without replacing its identity

Know the Boundaries

  • Never modify product source. Create or edit files only under design-plans/.
  • Do not install dependencies, run formatters, commit, push, or otherwise mutate the working tree.
  • Do not update design documentation. Record accepted documentation changes in the plan for its executor.
  • Use rendered evidence only when the user provides it or explicitly requests visual inspection.

03 Inside the skill

What the improve-ui Skill Brings to Design Review

4 things the SKILL.md instructs Claude Code or Codex to do, in the file's own section order.

  1. 1. Select the Surface

    Honor the user's scope. If the request is broad, select one deployable application and one coherent surface family representing a primary product task.

  2. 2. Reconstruct the Local System

    Check for DESIGN.md, repository guidance, and surface-local design documentation.

  3. Design Language

    Write None documented under Explicit exceptions unless a cited source explicitly identifies the exception.

  4. 3. Prove Findings

    Before applying the proof gate, inspect every traced surface's user-facing labels, active-state presentation, responsive branches, and sibling variants for internal contradictions.

04 Put it to work

Install improve-ui in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add improve-ui to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

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

Generic skills CLI form for skills/improve-ui/SKILL.md; the repository may document its own path.

Give the Skill a First Design Review Task

The SKILL.md does not include an example prompt; this starter is written from the catalog one-liner. Replace the task line with your real brief.

Starter prompt
Use the improve-ui skill on the material I attach. What the skill should do here: Audits a product surface against its own design evidence and writes implementation plans. Rules: do not invent copy, data or brand assets. State your plan first, then produce the result and tell me what to check.

Source: starter prompt written from the catalog one-line use (not from the SKILL.md).

Check the First Result

Before accepting the output, look for these in the transcript and the files:

  • The result is delivered as Review report, as the catalog lists for this skill.
  • The agent names the improve-ui skill in its plan or transcript before producing the result.
  • Your own content, names and numbers appear unchanged in the output.

In OpenDesign import improve-ui from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Repository
github.com/ibelick/ui-skills Branch main
Skill file
skills/improve-ui/SKILL.md Content checksum recorded at verification; commit 79081ab
License
MIT From LICENSE.
Repository stars
8,402 GitHub snapshot taken 2026-09-14 for the whole ibelick/ui-skills repository, which contains 5 skills in this catalog. Not a rating or usage count for improve-ui.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.
The Skill's Own Description
“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.”

Front-matter description from SKILL.md. The full file is about 7,816 characters. Read the full file on GitHub.

Improve UI

Run improve-ui on a Real Design Review Task.

Download OpenDesign, import improve-ui from its SKILL.md link, paste the prompt above, and read the plan before the result.

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

OpenDesign Desktop

One design system. Every output unmistakably your brand

Inside the full Vibe Design Workspace, use the same brand rules across websites, slide decks, interactive prototypes, dashboards, images, and HTML video. Connect Codex, Claude Code, Cursor, and other coding agents already on your computer, then create locally for free.

  • Web, slides, prototypes, dashboards, images, and video
  • 140+ design systems, plus the full template and skill library
  • Connect local Codex and 21+ coding agents · Free to use
Download free

Available for macOS and Windows