Make Interfaces Feel Better

Salvaged from a stale community PR and polished into something systematic. This handles the small UI details that stack up into polish: concentric radius math for nested rounded corners, optical icon centering, tabular numerals for counters, text wrapping strategies, transition scoping without the lazy "all" property, proper hit areas for small controls. It's opinionated without being dogmatic, the kind of checklist you'd want during a frontend review when something feels off but you can't immediately name why. The before/after table format for reporting changes is especially practical. Useful for dashboards, forms, navigation, anywhere the difference between functional and polished matters.

skills.sh installs: 5.7K
GitHub stars: 300.3K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add affaan-m/ecc --skill make-interfaces-feel-better --agent claude-code

Installs into .claude/skills of the current project.

Files

Make Interfaces Feel Better

Use this skill for the small design-engineering details that compound into a more polished interface.

Source: salvaged from stale community PR #1659 by linus707.

When to Use

The user says the UI feels off, flat, generic, cramped, jumpy, or unfinished.
You are building controls, cards, lists, dashboards, navigation, forms, or toolbars.
A component needs hover, active, focus, enter, exit, loading, or empty states.
A frontend review needs specific before/after recommendations.

Core Principles

Concentric Radius

For nearby nested rounded surfaces:

outer radius = inner radius + padding

If padding is large, treat layers as separate surfaces instead of forcing the math. The point is optical coherence, not formula worship.

Optical Alignment

Geometric centering is not always visual centering. Icon buttons, play triangles, arrows, stars, and asymmetric icons often need a small offset. Fix the SVG when possible; otherwise adjust with a pixel-level margin or padding change.