linear-local-first-architecture

Implements local-first web app architecture with optimistic updates and offline caching.

3|Updated Apr 20, 2026
One-click install
npx skills add https://github.com/langgenius/due-date-hq-jwl --skill linear-local-first-architecture-langgenius
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: linear-local-first-architecture
Source: https://github.com/langgenius/due-date-hq-jwl/tree/main/.claude/skills/linear-local-first-architecture
Command: npx skills add https://github.com/langgenius/due-date-hq-jwl --skill linear-local-first-architecture-langgenius

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Web apps often feel slow because every interaction waits on network requests, producing spinners and lag even when latency is acceptable. This Skill provides architectural patterns to make web applications feel instant by reading from local state instead of the server. ## Core Features & Use Cases - Local-first data layer: Store the workspace in IndexedDB, hydrate into an in-memory observable store (e.g., MobX), and render UI from local state while syncing mutations in the background. - Optimistic updates: Apply mutations locally first with libraries like Tanstack Query or SWR, rolling back only if the server rejects. - Performance tactics: Per-package vendor chunking, modulepreload of critical chunks, service worker precaching, inlined critical CSS, variable font preloading, and GPU-only animations on transform and opacity. - Use Case: When users report your productivity app feels slow despite acceptable latency, apply these patterns to eliminate spinners, render cached data before authentication completes, and add keyboard-first interactions with a local command palette. ## Quick Start Review my web app's data flow and rendering pipeline, then apply local-first architecture patterns to eliminate loading spinners and make interactions feel instant.

Frequently Asked Questions about linear-local-first-architecture

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make my web app feel faster without reducing server latency?

Apply mutations to local state first and sync to the server in the background, so the UI re-renders synchronously without waiting on network requests. Libraries like SWR or Tanstack Query support optimistic updates out of the box.

What is a local-first architecture for web apps?

Local-first architecture stores the workspace in IndexedDB and hydrates it into an in-memory observable store, so the UI reads from local state rather than the server. The server becomes a sync target, and the app works offline.

How do optimistic updates work with SWR or Tanstack Query?

Call mutate with the updated local data and skip revalidation, so the UI reflects the change immediately. The actual request runs in the background, and you roll back only if the server rejects the mutation.

Which CSS properties are safe to animate for 60fps performance?

Only animate composited properties: transform and opacity. Animating layout-triggering properties like width, height, margin, or top forces layout recalculation, while color and background-color trigger repaints.

Should I block initial render on authentication checks?

No. If local data exists in IndexedDB, render it immediately and verify the session in the background. Redirect to login only when a subsequent request fails with a 401, so returning users see content instantly.

Why split vendor code into per-package chunks instead of one bundle?

A single vendor bundle invalidates the entire dependency cache on any version bump. Per-package chunking makes cache invalidation granular per library, so unchanged dependencies stay cached across deployments.