PlugWiki

better-ui Skill (jakubkrehel): What It Does and How to Install It

Makes Claude polish surfaces, icons and motion with exact values for radius, shadows, icon states and animation, then report what to fix.

Installs
42.3K
on skills.sh
Stars
10K
on GitHub
Files
7
besides SKILL.md
Updated
Oct 2026
last repo commit

better-ui gives Claude a rulebook of exact UI values. The outer radius is the inner radius plus padding, a press scales to 0.96, an entrance stagger is 100ms, and shadows replace borders when a border only creates depth. It applies once the interaction itself works, and it keeps your project's own tokens and conventions where no rule gives a value. A review ends with a findings table and a Block or Approve verdict.

Good for

  • Front-end developers who want consistent radius, shadow and motion details
  • Design engineers reviewing a UI for polish after the interaction works
  • React, CSS and Tailwind users who use Motion for animation
  • Claude Code users who already run skills

Install better-ui

Claude Code

  1. 1

    Copy this prompt.

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

npx skills add https://github.com/jakubkrehel/skills --skill better-ui

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

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

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Polishes surfaces, icons and motion with exact values for border radius, optical alignment, shadows, icon states and animation.

Sections in SKILL.md

  1. Exact values, optional polish
  2. Outer radius equals inner radius plus padding
  3. Align optically where geometry looks off
  4. Shadows for elevation, borders for structure
  5. Outline images in pure black or white
  6. Transitions, not keyframes, for interactive state
  7. Press scales to 0.96
  8. High-frequency interactions respond instantly
  9. Gate motion behind the reduced-motion preference
  10. Stagger infrequent entrances by 100ms
  11. Exits are shorter and smaller than enters
  12. Skip state animations on first render
  13. Cross-fade contextual icons with exact values
  14. Suppress transitions on theme switch
  15. Transition only what changes
  16. Name the animated property in will-change

Key facts

Author
jakubkrehel
Repository
jakubkrehel/skills
License
MIT
Installs on skills.sh
42,327 (Nov 2, 2026)
GitHub stars
10,003 (Nov 2, 2026)
skills.sh audits
Gen Agent Trust Hub pass, Socket pass, Snyk pass (Nov 2, 2026)
Last repo commit
Oct 25, 2026
Files
8 files including SKILL.md: 6 markdown guides (animations, enter and exit, icon transitions, icons, performance, surfaces) and agents/openai.yaml
Works in
Claude Code plugin, or any tool the skills CLI supports (README)
Scripts
None in this skill folder

What it includes

  • Concentric radius, optical alignment, layered shadows over borders, image outlines

    Rules and recipes for nested radii, 2px optical nudges, forced-colors-safe shadow rings and black or white image outlines.

    Surfaces

  • Transitions over keyframes, press scale 0.96, instant feedback for high-frequency actions

    Motion state changes

  • Stagger entrances by 100ms, shorter and smaller exits, skip animation on first render

    Entrances and exits

  • Cross-fade contextual icons, match stroke to text weight, one SVG recolored per state

    Icons

  • Gates movement, scale and blur behind prefers-reduced-motion; cross-fades opacity instead

    Reduced motion

  • Suppress transitions on theme switch, name the exact properties, use will-change sparingly

    Theme switch and performance

  • Hover styles only on hover-capable pointers, overscroll-behavior: contain on overlays

    Pointer and scroll

  • A 15-row table of code patterns to look for and the fix for each

    Examples: transition: all, bounce set to anything but 0, fill="#..." inside an icon SVG.

    Before you finish

  • Rates findings HIGH, MEDIUM or LOW, lists them in a table and ends with Block or Approve

    Without a browser it reads every state from the code; checks it could not run are reported as Not verified.

    Reporting

From the official docs

Questions

How do I install better-ui?

Use the install box above. The README documents the skills CLI for the whole collection and a Claude Code plugin named interfaces. Plugin users invoke the skill as /interfaces:better-ui, as AGENTS.md explains.

Does better-ui work in the Claude app or Claude.ai?

The README documents no Claude app install. The skill reviews and edits UI code in your project, so use it in Claude Code or another local agent.

Do I need the other better-* skills?

No. SKILL.md names better-typography, better-accessibility, better-layout and better-colors as owners of neighbouring topics, but only as hand-offs. The repo notes say that without the sibling, that topic is simply out of scope.

How is better-ui different from better-interface?

better-interface reviews a whole screen or flow across accessibility, layout, writing, typography, color and UI polish, and returns one ranked report. better-ui covers only the polish part: surfaces, icons and motion.

Does it need an API key, and is it safe?

SKILL.md names no API key. The skill folder holds markdown guides and one small agents/openai.yaml file, and bundles no scripts. It guides how Claude reviews and edits your UI code, so read the diffs as you normally would.

Information

updated Nov 2, 2026

Repository
jakubkrehel/skills
Folder
skills/better-ui

jakubkrehel/skillsskills.sh

Sources

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

Show all 5
  1. better-ui SKILL.md · github.com
  2. jakubkrehel/skills README · github.com
  3. better-ui on skills.sh · skills.sh
  4. jakubkrehel/skills AGENTS.md · github.com
  5. better-interface SKILL.md · github.com

Updated Nov 2, 2026.