WonderPanda/tanstack-db-client
.claude/skills/tanstack-db-client/SKILL.md
TanStack DB client-side reactive data patterns for Mana Vault. Use when working with useLiveQuery hooks, client-side collections, RxDB/Dexie sync, or any reactive data queries in the web app. Covers hook locations, DB setup, and query builder best practices.
tools
Updated Apr 16, 2026
$ install --global
skillsauthnpx skillsauth add WonderPanda/mana-vault tanstack-db-clientInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 16, 2026, 4:49 PM7.4s1 file scanned
SKILL.md
- name:
- tanstack-db-client
- description:
- >
TanStack DB (Client-Side Data)
The web app uses TanStack DB (backed by RxDB/Dexie) for reactive, local-first data on the client. Collections, collection cards, decks, deck cards, and scryfall card data are all synced to a local database and queried via useLiveQuery.
- Hooks live in:
apps/web/src/hooks/(e.g.,use-collection-cards.ts,use-deck-cards-by-category.ts) - DB setup:
apps/web/src/lib/db/db.ts(schemas, collections, replication) - DB context:
apps/web/src/lib/db/db-context.ts(provides collections to hooks)
Important: Fully leverage TanStack DB queries. All filtering, sorting, joining, and data shaping for client-side data should be done within the useLiveQuery query builder (using .where(), .orderBy(), .select(), .innerJoin(), .fn.where(), .fn.select(), etc.). Do not chain .sort(), .filter(), useMemo, or other post-processing on the results of a TanStack DB query. If the query builder doesn't support what you need directly, use .fn methods (e.g., .fn.where(), .fn.select()) which are part of the query and remain reactive.
// GOOD - sorting inside the TanStack DB query
useLiveQuery(
(q) =>
q
.from({ collectionCard: collectionCardCollection })
.innerJoin(...)
.orderBy(({ collectionCard, card }) =>
collectionCard.isFoil ? (card.priceUsdFoil ?? 0) : (card.priceUsd ?? 0),
"desc",
)
.select(...),
[deps],
);
// BAD - sorting after the query results
const { data } = useLiveQuery(...);
const sorted = useMemo(() => data?.sort(...), [data]); // Don't do this
Related Skills
WonderPanda/worktrunk-setup
development
VerifiedTrustedCommunity
Set up worktrunk (git worktree manager) with dynamic port allocation for Better-T-Stack monorepos using Doppler, Alchemy, and Vite. Use when bootstrapping a new project's worktree workflow, or when asked to "set up worktrunk", "configure worktrees", "add worktree support", or "set up dynamic ports for worktrees". Covers: post-create hooks (Doppler setup, dependency install, .env.worktree generation), env-based port overrides in Vite and Alchemy configs, and dev script modification to source worktree-specific env vars after Doppler injection.
SKILL.mdUpdated Apr 16, 2026
WonderPanda/react-native-expo
development
VerifiedTrustedCommunity
React Native and Expo patterns for Mana Vault mobile app. Use when working on the native app in apps/native/, modifying Expo Router routes, HeroUI Native components, or Uniwind styling. Covers project structure and key conventions.
SKILL.mdUpdated Apr 16, 2026
WonderPanda/react-components
development
VerifiedTrustedCommunity
React component patterns, styling conventions, and UI guidelines for Mana Vault web app. Use when creating or modifying React components, working with TailwindCSS, shadcn/ui, class-variance-authority, or route components in TanStack Router.
SKILL.mdUpdated Apr 16, 2026
WonderPanda/local-first-replication
tools
VerifiedTrustedCommunity
Bootstraps local-first replication architecture using RxDB + oRPC + TanStack DB in TanStack Router applications. Covers server-side EventPublisher pattern, checkpoint-based pull endpoints, push replication with conflict resolution, multiplexed SSE streaming (single connection for all entities), client-side RxDB setup with IndexedDB, replication configuration, and React integration with TanStack DB collections and useLiveQuery. Use when: (1) Setting up offline-first architecture from scratch, (2) Adding real-time replication to a TanStack Router + oRPC app, (3) Bootstrapping a local-first data layer, (4) Implementing multiplexed sync to avoid browser connection limits, (5) Adding push replication with conflict resolution, (6) Creating reactive queries with RxDB + TanStack DB. Triggers: "set up local-first", "bootstrap offline-first", "add replication architecture", "set up RxDB with oRPC", "create local-first architecture", "implement pull replication", "implement push replication", "add multiplexed sync", "set up tanstack db with rxdb", "add real-time replication", "offline-first setup".
SKILL.mdUpdated Apr 16, 2026