skills.rest
oligamiq
oligamiqCOMMUNITY
Explore all skills by this author →
GitHub

make-interfaces-feel-better

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

Updated Apr 22, 2024
Search Tags:#typography#css animations#tailwind#micro-interactions#ui polish#frontend review#design engineering
One-click install
npx skills add https://github.com/oligamiq/fast-explorer --skill make-interfaces-feel-better-oligamiq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: make-interfaces-feel-better
Source: https://github.com/oligamiq/fast-explorer/tree/main/.agents/skills/make-interfaces-feel-better
Command: npx skills add https://github.com/oligamiq/fast-explorer --skill make-interfaces-feel-better-oligamiq

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Interfaces often feel subtly off due to small compounding details like mismatched border radii, jarring animations, or misaligned icons. This Skill provides a concrete checklist of design engineering principles to diagnose and fix those polish issues in frontend code. ## Core Features & Use Cases - 19 Core Principles: Covers concentric border radius, optical alignment, shadows vs. borders, interruptible animations, tabular numbers, font smoothing, hit areas, and icon stroke weight. - Structured Review Modes: Supports quick and full review modes with severity-rated findings tables (HIGH/MEDIUM/LOW), before/after code, verification steps, and a final verdict. - Framework-Aware Fixes: Adapts recommendations to the project's existing styling system (Tailwind, plain CSS, CSS-in-JS) and motion library (motion or framer-motion), with CSS-only fallbacks. - Use Case: When a user says a settings page "feels off", run a full review to find nested cards sharing the same radius, a transition: all on buttons, and icons with mismatched stroke weights, then output actionable fixes per file and line. ## Quick Start Review my settings page component for interface polish issues using the full review mode and list every finding with before and after code.

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 my UI feel more polished?▼

Apply small compounding fixes: use concentric border radius (outer = inner + padding), replace decorative borders with layered box-shadows, add tabular-nums to dynamic numbers, and use interruptible CSS transitions for interactive states. Review motion at 10% speed to spot subtle issues.

How to animate icon state changes in React?▼

Animate icons with opacity, scale (0.25 to 1), and blur (4px to 0) instead of toggling visibility. Use motion or framer-motion with a spring transition (duration 0.3, bounce 0) if installed, otherwise cross-fade both icons in the DOM with CSS transitions.

Should I use box-shadow or border for card elevation?▼

Use layered transparent box-shadows for cards, buttons, and containers where the border only creates depth, since shadows adapt to any background. Keep borders for structural purposes like dividers, layout separators, and focus or selected states.

Does this work with Tailwind CSS projects?▼

Yes, every principle includes Tailwind-specific examples such as active:scale-[0.96], tabular-nums, text-balance, and transition-transform. The Skill always expresses fixes in the project's existing styling system and never introduces a second one.

Why does transition: all cause animation problems?▼

transition: all forces the browser to watch every property, causing unintended animations on colors, padding, or shadows and blocking optimizations. Always specify exact properties like transition-property: scale, opacity, and use will-change only for transform, opacity, or filter.

When should I not add animations to an interface?▼

Skip custom animation on high-frequency interactions like row hovers or keystrokes; use instant feedback or a minimal opacity/color transition under 150ms. Motion must never be the only feedback channel, and reduced-motion preferences should be honored.

Related Skills

Explore More Design & Creative Skills→
compozycompozy
2.7k

better-layout

Reviews and structures web interface layouts for grouping, alignment, spacing, and adaptive breakpoints.

Official
Intermediate
samymitysamymity
1

browser-qa

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

Community
Intermediate
OthmanAdiOthmanAdi

gmira-a11y

Audit web application accessibility by measuring contrast, focus order, and semantic HTML roles.

Community
Advanced
GyananoGyanano
5

normalize

Audit UI features against design system tokens and generate a normalization plan.

Community
Advanced