Skip to content
Get packs

Better UI Polish

Polish surfaces, icons and motion in UI code with exact radius, shadow, icon and animation values.

Source Download skill
Repository
jakubkrehel/skills
Stars
10,236
Licence
MIT
Files
8 files

What it does

When installed, the agent reviews and writes user interface code with a set of specific visual polish rules. It sets nested corner radii from padding, swaps decorative borders for layered shadows, outlines images in neutral black or white, and uses exact animation values such as a 0.96 press scale, 150ms exits and icon cross-fades. It also keeps motion gated behind reduced-motion preferences and avoids animating everything at once. The skill defers accessibility, typography, layout and color questions to sibling skills.

Great for

  • Front-end developers who want consistent, polished component styling and motion
  • Designers reviewing an interface implementation for fine-grained visual details
  • Teams that want a shared written standard for button press, icon swap and entrance animations

Skip it if

  • Projects that need a fully custom or deliberately different visual language, since the rules are opinionated and the skill itself says project conventions take priority, so applying them blindly can override intent
  • Interfaces where accessibility, reduced motion or keyboard support have not yet been handled, because the skill relies on other skills for those and would not cover them alone

Try asking

  • “Polish the card components in this React project so nested corners and borders look consistent.”
  • “Add a press animation and cross-fade icon swap to the copy button following the better-ui rules.”
  • “Review our settings page CSS for border and shadow issues and suggest fixes.”
Step-by-step guide: how to use Better UI PolishInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 8 original files, the MIT licence and an attribution note.

    better-ui.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip better-ui.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip better-ui.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Mention your animation library (CSS, Tailwind or Motion) so the agent picks the matching recipe.
  • Ask for the polish pass after the interaction works, since the skill says polish never outranks a broken interaction.
  • Pair with the better-accessibility skill so reduced-motion and focus handling are covered.

What's inside

  • agents/openai.yaml
  • animations.md
  • enter-exit.md
  • icon-transitions.md
  • icons.md
  • performance.md
  • SKILL.md
  • surfaces.md

Redistributed unmodified from jakubkrehel/skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.