skills.rest
matthewharwood
matthewharwoodCOMMUNITY
Explore all skills by this author →
GitHub

idb

Wrap IndexedDB with type-safe openDB, migrations, and hydration promise.

1|Updated Apr 26, 2026
Search Tags:#migrations#type-safety#hydration#idb#indexeddb#openDB
One-click install
npx skills add https://github.com/matthewharwood/dean-stack --skill idb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: idb
Source: https://github.com/matthewharwood/dean-stack/tree/main/.claude/skills/idb
Command: npx skills add https://github.com/matthewharwood/dean-stack --skill idb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The idb skill provides a type-safe, centralized wrapper around IndexedDB for the dean-stack app, owning core primitives (openDB, IDBPDatabase, transactions, object stores, and upgrade migrations) and a hydration promise used by the app shell to boot with a consistent in-memory state. It also coordinates cross-tab synchronization via a BroadcastChannel to keep tabs and iframes in sync.

Core Features & Use Cases

  • Type-safe access to IndexedDB primitives and typed object stores.
  • Schema-versioned migrations with a single, observable upgrade path.
  • Centralized hydration via idbHydrationPromise so components render only after the DB is ready and in-sync across tabs.

Quick Start

Import and initialize the idb wrapper in your app to open the database, apply migrations, and hydrate the in-memory state before rendering.

Frequently Asked Questions about idb

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

FAQPage Schema
How do I ensure type safety when working with IndexedDB object stores and migrations?▼

IndexedDB hydration synchronizes in-memory state before rendering by using a single hydration promise, ensuring components only render after the database is ready and synced across tabs via BroadcastChannel.

How do I handle IndexedDB schema migrations deterministically during app boot?▼

IndexedDB schema migrations are handled through a centralized, observable upgrade path that applies versioned changes during database initialization, ensuring deterministic upgrades before app state hydration occurs.

Can I synchronize IndexedDB state across multiple browser tabs and iframes?▼

Cross-tab synchronization for IndexedDB is achieved via a BroadcastChannel, keeping multiple tabs and iframes in sync by coordinating updates through a shared hydration promise consumed by the app shell.

Does this IndexedDB wrapper require a specific schema validation library?▼

The wrapper enforces an IDB-first workflow combined with zod schemas, requiring zod to validate the structured data passed into typed object stores and during the state hydration process.

What is the best way to prevent components from rendering before IndexedDB is ready?▼

Preventing premature rendering is done by leveraging a centralized idbHydrationPromise consumed by a use() function, ensuring the app shell waits for database readiness and consistent in-memory state before booting.

Related Skills

Explore More Software Engineering Skills→
matthewharwoodmatthewharwood
1

react-19-primitives

Coordinate React 19 primitives for promise-driven UI in dean-stack SPAs.

Community
Advanced
matthewharwoodmatthewharwood
1

playwright-app-tests

Automate Playwright end-to-end tests for dean-stack routes, IndexedDB hydration, and cross-tab sync.

Community
Advanced
matthewharwoodmatthewharwood
1

jotai

Create IndexedDB-backed Jotai atoms with Zod validation and cross-tab sync.

Community
Advanced
thongdn-itthongdn-it
3

zod

Codify Zod schema validation best practices for strict type safety and robust parsing.

Community
Advanced