# Better UI

Polishes surfaces, icons and motion with exact values for border radius, optical...

- Repository: https://github.com/jakubkrehel/skills (10031 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-25
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add jakubkrehel/skills --skill better-ui -g -a claude-code -y`
Codex: `npx skills add jakubkrehel/skills --skill better-ui -g -a codex -y`
Cursor: `npx skills add jakubkrehel/skills --skill better-ui -g -a cursor -y`
Gemini CLI: `npx skills add jakubkrehel/skills --skill better-ui -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add jakubkrehel/skills`

## Description

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

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# UI polish

This skill holds the visual polish for surfaces, icons and motion, with the exact value each detail takes. It applies once the underlying interaction is sound, and a polish finding never outranks a broken interaction.

## Exact values, optional polish

The values below are exact, not ranges to approximate. `cubic-bezier(0.2, 0, 0, 1)` is not `cubic-bezier(0.4, 0, 0.2, 1)`, and `0.96` is not `0.95`. The optical nudges and the concentric padding cutoff are the exceptions. They are starting points, judged by eye.

Keep the project's component library, tokens and density, and match its motion language wherever no rule here gives a value. A deliberate and consistent project convention, such as a style with no shadows, is a preference and not a finding. The same detail done two ways within the project is a finding.

Text wrapping, font rendering, tabular numbers and text spacing belong to `better-typography`. Hit areas, keyboard support, ARIA and the reduced-motion requirement belong to `better-accessibility`. Grouping, section spacing, breakpoints and spatial RTL belong to `better-layout`, except directional icon mirroring. Color tokens and contrast measurement belong to `better-colors`.

## Outer radius equals inner radius plus padding

Where nested surfaces share a visible, even inset, the outer radius is the inner radius plus the padding plus any border width. Past `24px` of padding, or where the padding is deliberately asymmetric, treat the layers as separate surfaces and keep each one's radius token. Recipes are in [surfaces.md](surfaces.md).

## Align optically where geometry looks off

Where geometric centering looks off, nudge by eye. Give a button `2px` less padding on its icon side, shift a play triangle toward its point and fix asymmetric glyphs in the SVG itself. Recipes are in [surfaces.md](surfaces.md#optical-alignment).

## Shadows for elevation, borders for structure

The rest: https://github.com/jakubkrehel/skills/blob/HEAD/skills/better-ui/SKILL.md