idb-state-persistence
IDB State Persistence Architecture
Philosophy
Local Database First: IndexedDB (IDB) is the primary source of truth for all application state. Every user interaction that changes state MUST persist to IDB immediately to survive navigation, page refreshes, and session restarts.
This architecture treats IDB as a local database, not a cache. State lives in IDB first, components read from it, and all mutations write through to IDB synchronously (no debouncing or batching by default).
Why IDB over localStorage:
- Structured data storage (objects, arrays, not just strings)
- Indexed queries for efficient retrieval
- Larger storage limits (hundreds of MB vs 5-10 MB)
- Async API that doesn't block main thread
Relationship with Other Skills:
javascript: Provides error handling (Rule 1), timeout patterns (Rule 2), cleanup (Rule 4)web-components: Components subscribe to IDB state changes via event listeners- Integration: State Managers act as the bridge between IDB and UI components
More from matthewharwood/fantasy-phonics
animejs-v4
Anime.js 4.0 animations for Web Components — drag-drop, click feedback, swaps, cancelable motion. Use when adding animations, drag interactions, visual feedback, or motion to custom elements. Combines with web-components-architecture for lifecycle cleanup.
37ux-spacing-layout
Utopia fluid spacing tokens and layout patterns. Use when applying margins, padding, gaps, or creating layouts. Covers space scale, container widths, and responsive spacing. (project)
15html-semantic-engineering
30 pragmatic rules for production HTML covering semantic markup, accessibility (WCAG 2.1 AA), performance optimization, forms, and security. Use when writing HTML, building page structures, creating forms, implementing accessibility, or optimizing for SEO and Core Web Vitals.
15web-components-architecture
Build web components using Custom Elements v1 API with Declarative Shadow DOM, attribute-driven state, handleEvent pattern, and zero DOM selection. Use when creating custom elements, extending built-in HTML elements, or implementing component-based architecture. NO querySelector, NO innerHTML, NO external libraries - pure web platform APIs only.
12webgpu-canvas
WebGPU fundamentals for high-performance canvas rendering. Covers device initialization, buffer management, WGSL shaders, render pipelines, compute shaders, and web component integration. Use when building GPU-accelerated graphics, particle systems, or compute-intensive visualizations.
11ux-iconography
Icon usage patterns using Material Symbols v3. Use when adding icons to buttons, navigation, or status indicators. Covers sizing, accessibility, animations, and color integration with project tokens.
10