ui-polish
Installation
SKILL.md
UI Polish
1. Read the room first
- Detect the stack: Tailwind (
tailwind.config.*/@import "tailwindcss"), CSS Modules, styled-components, shadcn/ui (components/ui/), plain CSS. - Reuse existing design tokens: colors, fonts, spacing, radius, existing components. Never invent a second button style when one exists.
- If there's no design system, set one small set of tokens (CSS variables or Tailwind theme) before writing components.
2. Pick a direction, not defaults
Before coding, decide in one line: the mood (e.g. "calm editorial", "bold startup", "warm local business") and what that means for type, color and density. Avoid the generic look: centered purple gradient hero, three identical icon cards, everything rounded-2xl shadow-lg.
3. Fundamentals checklist
Typography
- Max 2 font families. Body 16–18px, line-height 1.5–1.7; headings tighter (1.1–1.25).
- Line length 60–75 characters (
max-w-prose/max-width: 65ch). - Clear scale (e.g. 14/16/20/24/32/48) — don't pick random sizes.