better-ui

Installation
SKILL.md

Details that make interfaces feel better

Great interfaces rarely come from a single thing. It's usually a collection of small details that compound into a great experience. Apply these principles when building or reviewing UI code.

When reviewing, slow the interface down: replay motion at 10% speed in the browser's Animations panel and walk every state: hover, focus, active, loading, empty. What feels off at 10% speed is what's subtly wrong at full speed.

Preserve the project's component library, tokens, and density. Match its established motion language except where a principle below prescribes an exact interaction pattern.

Typography (text wrapping, font rendering, tabular numbers, spacing) is covered by the better-typography skill; use that for anything text-related. Accessibility (hit areas, focus states, keyboard support, ARIA, reduced motion) is covered by the better-accessibility skill. Layout structure (grouping, spacing between sections, breakpoints, spatial RTL) is covered by the better-layout skill.

Quick Reference

Category When to Use
Surfaces Border radius, optical alignment, shadows, image outlines
Animations Interruptible animations, enter/exit transitions, icon animations, scale on press, motion restraint
Icons Icon stroke weight, states via currentColor, outline vs fill, sizing, RTL flipping
Performance Transition specificity, will-change usage
Installs
1
GitHub Stars
16
First Seen
Aug 5, 2026
better-ui — julianromli/faiz-skills