ui-polish-audit

原文涵盖的主题

• Impeccable UI Polish & Optical Alignment Audit
• Quick Start
• When to Use
• Best Practices
• Dependencies
• Examples
• Step-by-Step
• Validation

Hunting down visual jitter, misaligned baselines, cramped padding, and missing empty/loading states in existing UIs. An interface works functionally but looks amateurish due to uneven card heights, jagged text wrapping, or inconsistent padding Numbers in tables, timers, or dashboards jitter horizontally when values update Sibling elements in a navbar, toolbar, or card footer fail to share a single horizontal baseline Eliminating layout shifts (CLS), awkward scrollbars, and abrupt state transitions before a launch Ensure macro-whitespace (gaps between sections: 48-64px) is visibly larger than micro-whitespace (padding inside cards: 16-24px). Align sibling cards in CSS Grid by making each card a flex column and pushing footer actions down with margin-top: auto. Apply text-wrap: balance on headings so multi-line titles never leave a single orphan word on the last line. Never use transition: all; explicitly animate only transform, opacity, background-color, or border-color. Right-align numeric columns in tables with font-variant-numeric: tabular-nums while left-aligning text labels. Replace jarring spinner-only screens with dimensionally matched skeleton placeholders to preserve scroll

这里只展示节选，请以完整原文和当前要求为准。