web-ui-best-practices

# Web UI best practices Principles for building web interfaces that feel fast, intentional, and respectful of the user's time. Every rule here is a smell test — violating one is fine if you have a reason, violating several means the UI needs work. ## Speed Every interaction completes in under 100ms. If it can't, fake it. - Optimistic UI updates — show the result before the server confirms - Debounce inputs, but never debounce perceived response - Prefetch likely next routes on hover or viewport entry - Use `will-change` and `transform` for animations, never `top`/`left` - Measure with `performance.now()`, not gut feel ```js // Optimistic delete — remove from UI immediately, reconcile later async function handleDelete(id) { setItems(prev => prev.filter(i => i.id !== id)); try { await api.delete(`/items/${id}`); } catch { setItems(prev => [...prev, originalItem]); toast("Couldn't delete. Restored."); } } ``` ### Skeleton loading states Never show a spinner when you know the shape of what's coming. Render a skeleton that matches the layout, then swap in real content. ```css .skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 4px; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } ``` ## Modern CSS toolkit Four capabilities matured between 2023 and 2026 that change how you build ...