app-ux-polishlisted

# App UX Polish ## Purpose App works but feels raw. This skill adds the 50+ micro-details that separate a prototype from a product users love. Every item has ready-to-use code. ## Step 1: The 7 States Every Screen Must Handle Most developers build only the "happy path". Professional apps handle ALL states: ``` 1. EMPTY — no data yet (first launch, empty list) 2. LOADING — data is being fetched 3. PARTIAL — some data loaded, more available 4. IDEAL — normal state with data (what devs usually build) 5. ERROR — something went wrong 6. OFFLINE — no internet connection 7. PERMISSION — needs user consent (notifications, camera, location) ``` ### Empty States (NEVER show blank screen) ```javascript /** * Empty state: illustration + explanation + action button * Shows when list/collection has zero items */ function renderEmptyState(container, config) { const { icon, title, subtitle, actionText, onAction } = config; container.innerHTML = ` <div style="display:flex;flex-direction:column;align-items:center; justify-content:center;padding:48px 24px;text-align:center; min-height:300px;opacity:0;animation:fadeIn .4s ease forwards"> <div style="font-size:64px;margin-bottom:16px; filter:grayscale(0.3);animation:float 3s ease-in-out infinite">${icon}</div> <h3 style="margin:0 0 8px;font-size:18px;font-weight:600; color:var(--text-primary,#1a1a1a)">${title}</h3> <p style