← ClaudeAtlas

linear-local-first-architecturelisted

Use when building a web app that must feel instant, when users complain about spinners or perceived slowness despite acceptable latency, or when designing a local-first sync architecture with optimistic updates.
AkaraChen/2code · ★ 23 · Code & Development · score 64
Install: claude install-skill AkaraChen/2code
## When to use this skill - You're building a productivity tool where perceived speed is critical to user experience - Users report the app "feels slow" despite reasonable network latency - You need to eliminate loading spinners and skeleton states from user workflows - You're architecting a local-first application with offline capabilities - You want to implement optimistic updates that feel instant - You're designing a keyboard-first interface for power users ## Core principles 1. **The network is the bottleneck—eliminate it wherever possible.** Every network request costs hundreds of milliseconds; the best optimization is to avoid the request entirely by reading from local state. 2. **Treat the browser as the database for each user.** Store the full workspace in IndexedDB and hydrate into an in-memory observable graph; the UI reads from local state, not the server. 3. **Mutations apply locally first, sync asynchronously.** Update the local observable immediately so the UI re-renders synchronously, then queue the transaction for background sync to the server. 4. **Render first, authenticate second.** If local data exists, render it immediately and verify the session in the background; only redirect to login if the server rejects. 5. **Ship less code in more pieces.** Aggressive code splitting, modern-only targets, and per-package vendor chunks reduce initial payload and improve cache granularity. 6. **Animate only composited properties.** Restrict animations to `tra