Stats
Actions
Tags
Guides building and reviewing optimistic UI updates, skeleton screens, loading states, code splitting, lazy loading, performance budgets, INP targets, and bundle optimization for perceived speed.
How this skill is triggered — by the user, by Claude, or both
Slash command
/saas-design-principles:speed-is-the-featureThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Speed is not an optimization — it is the product. Linear built a billion-dollar company on this insight. Every architectural decision should serve Nielsen's three perception thresholds.
Speed is not an optimization — it is the product. Linear built a billion-dollar company on this insight. Every architectural decision should serve Nielsen's three perception thresholds.
| Threshold | Perception | Target For |
|---|---|---|
| 100ms | Instantaneous — feels caused by the user | Toggles, selections, navigating between loaded views |
| 1 second | Flow uninterrupted — user feels in control | Page transitions, data loads |
| 10 seconds | Attention limit — user wants to multitask | Show percent-done indicator or lose them |
The UI must respond before the server confirms. This does not require a local-first architecture — it requires separating the feedback loop from network latency.
Update the UI immediately on user action. Reconcile with the server in the background.
When to use optimistic updates:
Rules:
Skeleton screens beat spinners, but only when done correctly.
Research findings (Bill Chung):
When to use which loading indicator:
| Load Duration | Indicator |
|---|---|
| < 1.5 seconds | Nothing, or a subtle spinner |
| 1.5–10 seconds | Skeleton screen with shimmer |
| > 10 seconds | Percent-done progress bar |
Enforce concrete budgets, not aspirational goals.
Bundle budget: Total JavaScript under 200KB gzipped. Code-split by route. Lazy-load modals, charts, and non-critical UI.
Responsiveness budget: INP (Interaction to Next Paint) must stay at or below 200ms. This measures responsiveness across all interactions, not just page load. Keep main-thread tasks under 50ms. Break long operations with requestAnimationFrame or scheduler.yield().
Working implementations in examples/:
examples/optimistic-update.md — Toggle-favorite pattern with rollback in React, Vue, and Svelteexamples/skeleton-screen.md — Shimmer CSS and skeleton components matching content layoutexamples/code-splitting.md — Route-level splitting and lazy-loading in React, Vue, and SvelteKitWhen reviewing existing code for speed:
npx claudepluginhub oborchers/fractional-cto --plugin saas-design-principlesGuides selection and implementation of loading patterns—skeleton screens, shimmer effects, progressive loading, optimistic rendering—to improve perceived performance on content-heavy views.
Optimizes web performance using Lighthouse audits, prioritizing Core Web Vitals with code examples for server response, resource preloading, and critical rendering path improvements.
Optimizes website and web app performance by measuring Core Web Vitals with Lighthouse, analyzing bundle sizes and bottlenecks, and implementing caching, code splitting, and asset optimizations.