Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

better-ui — UI Polish Reviewer

A rule-based UI polish reviewer that checks concentric radii, optical alignment, elevation, and motion against exact values and reports findings by severity.

Design & UIIntermediate★ 422⑂ 44AI score 8/10Last updated: Sep 10, 2026

What it does

Catches the small details that make an interface feel subtly off, with prescribed values rather than vague advice.

  • Concentric radius: outer radius = inner radius + padding
  • Optical over geometric alignment for icons, buttons, play triangles
  • Shadows for elevation, borders for structure — replace decorative borders with layered box-shadow
  • Motion rules: interruptible CSS transitions, ~100ms stagger for infrequent entrances, softer exits, scale(0.96) on press
  • Icon transitions: opacity 0→1, scale 0.25→1, blur 4px→0; with motion/framer-motion use spring duration 0.3, bounce 0
  • Suppress transitions on theme switch, force reflow, restore next frame
  • Icon stroke matched to text weight: 1.5px next to 400, 2px next to 600
  • Ends with a HIGH/MEDIUM/LOW table (location / before / after / why) and a Block or Approve verdict

Typography, accessibility and layout are explicitly delegated to sibling skills.

Who it's for

  • Frontend devs (React, Tailwind, plain CSS) who want design-grade finish
  • Solo builders and startups without a dedicated designer
  • Leads automating UI-detail review in pull requests

Example uses

  1. "Review this Card component with better-ui" → flags mismatched nested radii, transition: all, hairline icons beside bold text
  2. "Theme toggle smears the whole page" → injects the global transition-suppression + reflow recipe
  3. "The sidebar entrance feels chaotic" → splits content into semantic chunks staggered by 100ms

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/aiskillstore/marketplace/HEAD/pending/jakubkrehel/better-ui/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the pending/jakubkrehel/better-ui folder from the GitHub repo aiskillstore/marketplace into my ~/.claude/skills/better-ui/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/aiskillstore/marketplace.git /tmp/aiskillstore && mkdir -p ~/.claude/skills && cp -r /tmp/aiskillstore/pending/jakubkrehel/better-ui ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal.
  2. Clone the repository to a temp folder: 
    git clone https://github.com/aiskillstore/marketplace.git /tmp/aiskillstore
  3. Copy the whole skill folder (not just SKILL.md — it references surfaces.md, animations.md, icons.md, etc.): 
    mkdir -p ~/.claude/skills
cp -r /tmp/aiskillstore/pending/jakubkrehel/better-ui ~/.claude/skills/
  4. Verify with ls ~/.claude/skills/better-ui.
  5. Restart Claude Code and ask: "Use better-ui to review this component's polish."
  6. Optional: install better-typography, better-accessibility and better-layout the same way for full coverage.
View source on GitHub ↗