skills.rest
m-de-graaff
m-de-graaffCOMMUNITY
Explore all skills by this author →
GitHub

make-interfaces-feel-better

Applies optical CSS polish rules to controls, cards, text, images, and hit areas.

Updated Aug 3, 2026
Search Tags:#typography#css#visual design#border-radius#ui polish#design engineering#hit areas
One-click install
npx skills add https://github.com/m-de-graaff/skills --skill make-interfaces-feel-better-m-de-graaff
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: make-interfaces-feel-better
Source: https://github.com/m-de-graaff/skills/tree/main/skills/make-interfaces-feel-better
Command: npx skills add https://github.com/m-de-graaff/skills --skill make-interfaces-feel-better-m-de-graaff

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces often read as flat, cramped, jumpy, or unfinished because mathematically correct CSS values differ from what looks right. This Skill provides concrete rules for the small design-engineering details that compound into a polished UI. ## Core Features & Use Cases - Optical corrections: Concentric border-radius formula for nested surfaces, visual centering of asymmetric icons, and neutral inset outlines so images don't dissolve into their background. - Typography and stability: text-wrap: balance and pretty for headings and captions, plus tabular-nums on updating numbers to stop layout jitter. - Depth and interaction: Layered transparent shadows for elevation, borders for separation, and 44px minimum hit areas expanded via pseudo-elements without overlapping. - Use Case: While reviewing a dashboard, you notice a counter shifts layout as digits change and nested cards look uneven. Apply font-variant-numeric: tabular-nums and the concentric radius formula, then report the fixes as before/after rows. ## Quick Start Review this component for polish issues and fix the radius, text wrapping, tabular numbers, and hit areas using the interface polish checklist.

Frequently Asked Questions about make-interfaces-feel-better

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I stop numbers from shifting layout as they update in CSS?▼

Apply font-variant-numeric: tabular-nums to counters, timers, prices, and table columns. Proportional digits have different widths, so changing numbers shift their own layout; tabular figures give every digit equal width and eliminate the jitter.

How do I make nested rounded corners look right in CSS?▼

Use the concentric radius formula: outer radius equals inner radius plus padding. A card with 12px radius and 8px padding wants children at 4px, because matching radii make the gap look uneven even when it is uniform.

Why does my play button icon look off-centre?▼

Geometric centring is not visual centring. Asymmetric glyphs like play triangles have visual mass offset from their bounding box, so they need a nudge in the SVG itself or a sub-pixel margin on the icon, not the button.

What is the minimum touch target size for buttons?▼

Aim for at least 44x44px where layout allows. WCAG 2.2's 24px minimum is a conformance floor, while platform guidance is stricter at 44pt on iOS and 48dp on Android. Expand small icons with a pseudo-element rather than padding.

When should I use text-wrap balance versus pretty?▼

Use text-wrap: balance on headings and short titles to even line lengths, and text-wrap: pretty on captions, descriptions, and list items to prevent orphans. Apply neither to long prose, code, or preformatted text.

Does this skill cover animations and transitions?▼

No. This skill is static polish only; all motion values such as easing curves, durations, and reduced-motion handling live in the separate animation-principles skill, which should be loaded whenever polish work touches motion.

Related Skills

Explore More Design & Creative Skills→
sakamoto-family-smilesakamoto-family-smile

make-interfaces-feel-better

Review UI interfaces and output before/after design refinements.

Community
Intermediate
jesusprodriguezUnirjesusprodriguezUnir

accessibility

Audit and improve web accessibility following WCAG 2.2 guidelines and ARIA patterns.

Community
Intermediate
squidlleesquidllee

emil-design-eng

Reviews and improves UI animation, easing, and interaction code using design engineering principles.

Community
Intermediate
rampstackcorampstackco
523

design-system

Coordinate design system creation and governance across tokens, primitives, and templates.

Official
Advanced