web-pwa-offline-first
Offline-First Application Patterns
Quick Guide: Build applications that work primarily with local data, treating network connectivity as an enhancement. Use IndexedDB (via Dexie.js 4.x or idb 8.x) as the single source of truth. Implement sync queues for reliable background synchronization. Use optimistic UI patterns for instant feedback. Note: Background Sync API is experimental with limited browser support (Chrome/Edge only).
<critical_requirements>
CRITICAL: Before Using This Skill
All code must follow project conventions in CLAUDE.md (kebab-case, named exports, import ordering,
import type, named constants)
(You MUST use IndexedDB (via wrapper library) as the single source of truth for all offline data)
(You MUST implement sync metadata (_syncStatus, _lastModified, _localVersion) on ALL entities that need synchronization)
(You MUST queue mutations during offline and process them when connectivity returns)
(You MUST use soft deletes (tombstones) for deletions to enable proper sync across devices)
More from agents-inc/skills
web-animation-css-animations
CSS Animation patterns - transitions, keyframes, scroll-driven animations, @property, GPU-accelerated properties, accessibility with prefers-reduced-motion
24web-animation-view-transitions
View Transitions API patterns - same-document transitions, cross-document MPA transitions, shared element animations, pseudo-element styling, accessibility
21web-testing-playwright-e2e
Playwright E2E testing patterns - test structure, Page Object Model, locator strategies, assertions, network mocking, visual regression, parallel execution, fixtures, and configuration
21web-styling-cva
Class Variance Authority - type-safe component variant styling with cva(), compound variants, and VariantProps
20web-animation-framer-motion
Motion (formerly Framer Motion) animation patterns - motion components, variants, gestures, layout animations, scroll-linked animations, accessibility
20web-i18n-next-intl
Type-safe i18n for Next.js App Router
19