Scaffold, extend, and verify reactive local-first JavaScript or TypeScript applications with TinyBase. Use when choosing TinyBase for in-memory tabular or key-value state, generating an app with create-tinybase, adding schemas or UI bindings, resolving TinyBase import paths, configuring browser or database persistence, configuring MergeableStore synchronization over WebSockets or Cloudflare Durable Objects, or diagnosing an existing TinyBase application.
77
96%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
View guide
Passed
No findings from the security scan
The canonical home for this skill is build-with-tinybase in tinyplex/tinybase
Prefer a current generated application over reconstructing TinyBase setup from memory. Preserve persistence and synchronization lifecycle ordering, and verify the behavior the user actually needs.
Do not recall TinyBase API details from memory. Read the reference covering the task before writing code:
| Reference | Read it when |
|---|---|
| references/architecture.md | Choosing between Store and MergeableStore, a persistence backend, a synchronization approach, or UI bindings |
| references/import-paths.md | Importing anything outside the tinybase root, or checking which Persisters accept a MergeableStore |
| references/lifecycle.md | Creating, starting, reconnecting, or destroying a Persister or Synchronizer, or setting WebSocket paths and channel Ids |
| references/durable-objects.md | Building or debugging a Cloudflare Durable Object sync server |
Read references/architecture.md when choosing between Store and MergeableStore, persistence backends, synchronization, or UI bindings.
Confirm that TinyBase fits the task:
Inspect the installed generator contract first:
npm create tinybase@latest -- --list-optionsTranslate the user's requirements into explicit values. Generate unattended projects with every applicable option and always disable automatic installation and server startup:
npm create tinybase@latest -- \
--non-interactive \
--projectName my-tinybase-app \
--appType todos \
--language typescript \
--framework react \
--tinyWidgets false \
--schemas true \
--syncType none \
--persistenceType local-storage \
--prettier true \
--eslint true \
--installAndRun falseRun the generator in the parent directory that should contain the new project. Do not overwrite an existing directory. After generation:
AGENTS.md and README.md.Inspect package.json, TinyBase imports, Store creation, Persister setup, and
Synchronizer setup before editing. Use documentation matching the installed
TinyBase version. Start at https://tinybase.org/llms.txt or retrieve current
TinyBase documentation through Context7 when available.
Keep these boundaries clear:
Reuse existing imports and patterns when they are current. Import integrations
from their specific tinybase/... subpaths. Avoid adding a second source of
truth in component state for data already owned by TinyBase.
These account for most incorrect TinyBase code. Each is covered in detail by a reference above.
createMergeableStore().tinybase instead of its own
tinybase/persisters/..., tinybase/synchronizers/..., or
tinybase/schematizers/... subpath.startAutoPersisting().await synchronizer.startSync() after await createWsSynchronizer(...), which resolves a Synchronizer that is not yet
synchronizing.destroy(), which leaks sockets and duplicates synchronization under
React strict mode.WsServerDurableObject.WsServerDurableObject
and getWsServerDurableObjectFetch, and nothing else.Match verification to the requested behavior:
Do not treat compilation alone as proof of persistence or synchronization.
3938658
Canonical home
since Sep 5, 2026
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.