# Skill: Apply the micro-detail checklist that makes an interface feel polished and expensive

> Use this skill when an interface "looks cheap" or "amateur" without an obvious single cause -- apply a concrete set of rules covering corner radii, button states, animation, tap targets, and typography details.

Source: sodigi-learn -- vibecoding/interfeys-chuvstvuetsya - https://sodigi.io/learn/vibecoding/interfeys-chuvstvuetsya

## When to use
- A built interface works but feels flat, unresponsive, or amateurish.
- Someone says "looks cheap but I can't say why" -- this checklist diagnoses and fixes it.
- An AI just generated a UI and it needs a polish pass before shipping.
- You are reviewing a component for the interactive feel, not just visual correctness.

## Core rules
- Concentric corners: outer radius = inner radius + gap between them. Mismatched radii fight each other visually.
- Every button needs three states: hover (color/shadow change), press (scale ~0.96), focus ring (keyboard navigation).
- Never use "transition: all" -- list only the specific properties that actually change (color, shadow, transform). "transition: all" causes browser lag, especially on mobile.
- Disappearing animations should be shorter than appearing ones (~150ms) so users are not made to wait.
- Any clickable element must be at least 44x44 pixels for reliable finger tapping.
- Numbers in counters, timers, and prices must use tabular-nums so changing values do not jolt surrounding text.
- Images need a thin, semi-transparent, neutral (not brand-color) outline so edges do not dissolve into the background.
- Wrap headings with "text-wrap: balance" and short descriptions with "text-wrap: pretty" to prevent orphan words.

## Procedure
1. Identify nested rounded elements -- fix corner radii to follow the concentric rule.
2. Add or verify button interaction states: hover, press (scale), visible focus ring.
3. Audit all CSS transitions -- replace any "transition: all" with explicit property lists.
4. Check every clickable icon and element for minimum 44x44px hit area.
5. Enable tabular-nums on all numeric displays that update dynamically.
6. Add a thin neutral outline to every image.
7. Apply text-wrap balance/pretty to headings and short descriptions.
8. Request a before/after diff from the AI so changes are visible.

## Ready-to-use prompt
```
Make this interface more polished. Work through the details:

1. Buttons and clickable cards: smooth hover (color and shadow change),
   slight press shrink to ~96%, visible focus ring on keyboard Tab.
2. Corner radii: for nested elements, outer = inner + gap so corners do not fight.
3. Animations: list only the specific CSS properties that change. Never use
   "transition: all". Appearing should be soft; disappearing should be shorter.
4. Make all numbers in counters and prices use tabular-nums so they do not jump.
5. Add a thin neutral (not brand-color) outline to images so edges do not blend.
6. Every clickable element must be at least 44x44 pixels for a finger.

Show me a before/after list of what changed.
```

## Pitfalls
- Asking "make it prettier" with no specifics -- the AI cannot act on that; always give the concrete checklist.
- Using "transition: all" to save time -- saves a minute now, causes jank on phones later.
- Making clickable icons too small -- easily tapped with a mouse, impossible to hit with a finger.
- Omitting hover and focus states -- the interface feels broken or "dead" even when everything works.
- Using a brand color for image outlines -- this looks like a bug, not a design choice; keep it neutral.
- Adding animations to everything -- more motion does not mean more alive; it means more distracted users.