skills.rest
ahemdatef
ahemdatefCOMMUNITY
Explore all skills by this author →
GitHub

make-interfaces-feel-better

Applies design engineering principles for polished UI typography, surfaces, animations, and performance.

Updated May 12, 2026
Search Tags:#typography#frontend#css animations#tailwind#micro-interactions#ui polish#design engineering
One-click install
npx skills add https://github.com/ahemdatef/Gradution-Project-iLMS-Software --skill make-interfaces-feel-better-ahemdatef
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: make-interfaces-feel-better
Source: https://github.com/ahemdatef/Gradution-Project-iLMS-Software/tree/main/frontend/.agents/skills/make-interfaces-feel-better
Command: npx skills add https://github.com/ahemdatef/Gradution-Project-iLMS-Software --skill make-interfaces-feel-better-ahemdatef

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Interfaces often feel off due to small compounding details like mismatched border radii, jarring animations, layout-shifting numbers, and heavy text rendering. This Skill provides concrete rules and code patterns to systematically fix these visual and interaction issues when building or reviewing frontend code. ## Core Features & Use Cases - Typography Polish: Apply text-wrap balance/pretty, macOS font smoothing, and tabular-nums for dynamic numbers to prevent layout shift. - Surface Refinement: Enforce concentric border radius, optical alignment for icons, layered box-shadows instead of borders, image outlines, and 40x40px minimum hit areas. - Animation Guidelines: Implement interruptible CSS transitions, staggered enter animations, subtle exits, contextual icon cross-fades, and scale-on-press feedback, with both Motion/Framer Motion and dependency-free CSS patterns. - Performance Rules: Avoid transition: all, specify exact transition properties, and use will-change sparingly on GPU-compositable properties only. - Use Case: When a user says a settings page feels off, review the components against the checklist to fix nested card radii, add staggered enter animations, and replace hard borders with layered shadows. ## Quick Start Review my React component and apply the interface polish principles to fix the animations, shadows, and border radius.

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 make nested border radius look right in CSS?▼

Use concentric border radius: outer radius equals inner radius plus padding. For example, a card with 8px padding and 12px inner radius needs a 20px outer radius. If padding exceeds 24px, treat layers as separate surfaces instead.

How to animate icon changes without Framer Motion?▼

Keep both icons in the DOM with one absolutely positioned over the other, then cross-fade using CSS transitions on opacity, scale (0.25 to 1), and blur (4px to 0) with cubic-bezier(0.2, 0, 0, 1). Since neither icon unmounts, both enter and exit animate smoothly.

Should I use CSS transitions or keyframe animations for interactive elements?▼

Use CSS transitions for interactive state changes like hover, toggle, and open/close because they are interruptible and retarget mid-animation. Reserve keyframe animations for one-shot staged sequences like enter animations or loading states.

Why do numbers cause layout shift when they update?▼

Proportional fonts give digits different widths, so changing values shift surrounding layout. Apply font-variant-numeric: tabular-nums (Tailwind: tabular-nums) to counters, timers, prices, and table columns to make all digits equal width.

When should I use will-change in CSS animations?▼

Use will-change only for GPU-compositable properties: transform, opacity, filter, and clip-path. Add it only when you notice first-frame stutter, particularly in Safari. Never use will-change: all, and avoid it for properties like background or padding.

What is the minimum hit area for interactive elements?▼

Interactive elements need at least 40x40px hit area (44x44px per WCAG). Extend smaller elements with a centered pseudo-element, but shrink it if it would overlap another interactive element's hit area, since hit areas must never collide.

Related Skills

Explore More Design & Creative Skills→
marcosgcr3marcosgcr3

ui-styling

Create accessible React interfaces with shadcn/ui and Tailwind CSS.

Community
Advanced
samymitysamymity
1

browser-qa

Automate end-to-end browser QA for web applications with smoke, interaction, visual regression, and accessibility checks.

Community
Intermediate
lexicalninjalexicalninja
2

accessibility-design-checker

Identify accessibility issues in UI designs, wireframes, and prototypes.

Community
Intermediate
ZimriJahdaiZimriJahdai
1

interface-kit

Implements accessible, performant UI components with typography, color, motion, and spatial design guidance.

Community
Advanced