Create IndexedDB-backed Jotai atoms with Zod validation and cross-tab sync.
npx skills add https://github.com/matthewharwood/dean-stack --skill jotai-matthewharwood
Please help me install this Agent Skill. Skill: jotai Source: https://github.com/matthewharwood/dean-stack/tree/main/.claude/skills/jotai Command: npx skills add https://github.com/matthewharwood/dean-stack --skill jotai-matthewharwood
This skill provides a robust pattern for authoring Jotai atoms that persist to IndexedDB and hydrate synchronously, enabling reliable cross-tab state.
Define a persisted atom using atomWithIDB and import it in your components to read and update state across tabs.
High-intent search queries and answers about installing and using this skill.
To persist React state to IndexedDB with Jotai, use an atomWithIDB factory that debounces writes and enforces Zod schema validation. It relies on a root idbHydrationPromise suspense to guarantee synchronous initial reads after hydration.
Cross-tab synchronization for persistent React atoms works via a BroadcastChannel that broadcasts changes across multiple windows. This ensures updates propagate instantly across all open tabs sharing the same IDB-backed state.
Yes, you can enforce Zod schema validation on writes when using the atomWithIDB factory for Jotai atoms. This ensures only validated data is persisted to IndexedDB, preventing invalid state shapes from being saved.
The best way to hydrate Jotai atoms synchronously from IndexedDB is using a root idbHydrationPromise wrapped in Suspense. This guarantees components only read persisted state after hydration completes, avoiding flash of empty data.
Yes, derived and parameterized Jotai atoms work with IndexedDB persistence without needing to wrap them in atomFamily. This supports complex state shapes directly across React components and multiple tabs.
You should avoid debounced writes for persistent React state when immediate persistence is critical, such as saving player progress between rapid actions. The debounced write mechanism batches updates, which may lose final state if a tab closes mid-debounce.
theslashdojoReshape validated data with Zod schemas using transforms and preprocessing.
mgd34msuManage React state with atomic, derived, and async capabilities.
gil00pitaManage React state with atoms, derived atoms, and async atoms.
awsPersist and discover graph database schemas with IndexedDB caching and Jotai state.
