frontend-interfaces

Applies design engineering principles to polish UI components, animations, typography, and surfaces.

2|2|Updated Dec 23, 2017

Search Tags:#typography #css animations #tailwind #micro-interactions #ui polish #frontend review #design engineering

Ready to run

npx skills add https://github.com/xriu/dotfiles --skill frontend-interfaces-xriu

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-interfaces
Source: https://github.com/xriu/dotfiles/tree/main/home/.skills/frontend-interfaces
Command: npx skills add https://github.com/xriu/dotfiles --skill frontend-interfaces-xriu

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, or layout-shifting numbers. This Skill provides concrete rules and code patterns for reviewing and fixing those visual details in frontend code. ## Core Features & Use Cases - UI Polish Reviews: Audit components against 16 principles covering border radius, optical alignment, shadows, hit areas, and typography, with results presented as Before/After tables. - Animation Guidance: Implement interruptible transitions, staggered enter animations, subtle exits, and contextual icon cross-fades using Motion or dependency-free CSS. - Use Case: When a settings page feels unpolished, ask for a review and receive grouped Before/After diffs fixing concentric radii, tabular-nums on counters, and scale-on-press buttons. ## Quick Start Review my React component for UI polish issues and show the fixes as Before and After tables.

Frequently Asked Questions about frontend-interfaces

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 keyframes for one-shot staged sequences like enter animations, since keyframes restart from the beginning when interrupted.

Why do numbers cause layout shift in my UI?▼

Proportional fonts give digits different widths, so updating counters or timers shifts surrounding layout. Apply font-variant-numeric: tabular-nums (Tailwind: tabular-nums) to make all digits equal width and prevent the shift.

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

Use will-change only for GPU-compositable properties: transform, opacity, and filter. Add it only when you notice first-frame stutter, particularly in Safari, since each compositing layer costs memory. Never use will-change: all.

What scale value should buttons use on press?▼

Use scale(0.96) for press feedback, and never go below 0.95 since smaller values feel exaggerated. Implement it with CSS transitions so releasing mid-press smoothly returns, and add a static prop to disable it where motion would distract.