1. Habit
  2. Skills
  3. Better UI skill
jakubkrehel · 38K installs

Better UI skill
Runs by itself, every time you change app screens.

Every screen change is checked for rough details.

Install the Better UI skill and make it a habit: follow https://gethabit.dev/skills/jakubkrehel/better-ui.md

  1. 1Copy
  2. 2Paste into Claude Code, Codex or Cursor
  3. 3It runs by itself

38K installs8K starsMIT licenceSource on GitHub ↗

Better UI

by jakubkrehel · 38K installs

The skill

Fixes small details that make screens look rough.

Only when you ask.

Cleaner look

Every screen change is checked for rough details. Your app looks cleaner.

↻ Runs by itselfevery time you change app screens

How the habit works.
You don't have to.

Three questionsWhen does it start? How does it check its work? What does it remember?

01

It starts by itself

PR touches UI code. Runs in GitHub Actions or Claude Code routine.

  • ↻ PR touches UI code
  • pull_request paths: **/*.css, **/*.tsx

02

It checks its work

no HIGH findings left. If a check fails, it tells you.

  • ✓no transition-all or will-change: all in the diff
  • ✓no motion without a prefers-reduced-motion guard
  • ✓count of HIGH findings is zero for Approve

03

It remembers

polish findings log. The next run reads it first: open findings and accepted project conventions.

loops/ui-polish-review-loop/findings.md

One run, step by step.
Then it stops.

Stop ruleStops after one pull request per run.

  1. 01

    Respect the project

    Keep its tokens and motion language, and treat a consistent choice as a preference.

  2. 02

    Scan surfaces

    Check nested radius, shadows versus borders and image outlines.

  3. 03

    Scan motion

    Check press scale, transitions, exits, stagger and reduced-motion gating.

  4. 04

    Scan icons

    Check stroke weight, currentColor and hover only on hover-capable pointers.

  5. 05

    Hand off

    Leave typography, accessibility, layout and colors to the sibling better skills.

  6. 06

    Report

    Write one row per root cause with severity and end with Block or Approve.

What it may do.
Nothing more.

Safe by defaultIt writes only in its own folder and asks you before anything goes out.

Is it for you?
Use it when it fits.

Quick checkRead both lists. If the left one sounds like you, the Better UI skill helps.

Use it when

  • ✓ You review UI pull requests
  • ✓ Motion or hover feels off
  • ✓ Icons and surfaces look uneven

Skip it when

  • – The interaction itself is broken
  • – You need typography or color checks

Questions

Better UI skill, answered.

Does it override my design system?

No. It keeps your tokens and only flags the same detail done two ways.

What if it cannot open a browser?

It reads every state from the code and marks unchecked items as Not verified.

How do I install the Better UI skill?

Copy the prompt at the top into your agent. It installs the skill from jakubkrehel/skills and sets up the habit. Or run npx skills add jakubkrehel/skills --skill better-ui.

Is the Better UI skill free?

Yes. It is published under MIT. Habit is free too.

Better UI. Now as a habit.

Install the Better UI skill and make it a habit: follow https://gethabit.dev/skills/jakubkrehel/better-ui.md

  • Free
  • No account
  • Undo in one line

All jakubkrehel skills →More design skills →

Works in

  • Claude Code
  • Codex
  • Cursor
  • ChatGPT
  • Claude app

Made by jakubkrehel, published under MIT. Habit links to the original and never changes it. Is this your skill?

Copying didn't work here. Select the line and copy it by hand.