Globales Ranking · von 601 Skills
tanstack-db AI Agent Skill
Quellcode ansehen: oakoss/agent-skills
MediumInstallation
npx skills add oakoss/agent-skills --skill tanstack-db 55
Installationen
TanStack DB
Overview
TanStack DB is a reactive client store built on differential dataflow that extends TanStack Query with collections, live queries, and optimistic mutations. It normalizes data into typed collections, enables sub-millisecond cross-collection queries, and provides instant optimistic updates with automatic rollback on failure.
When to use: Reactive UIs needing local-first data, cross-collection joins with live updates, optimistic mutations with automatic sync, real-time sync via ElectricSQL or other backends, apps that outgrow TanStack Query's per-query caching model.
When NOT to use: Simple fetch-and-display (TanStack Query alone suffices), server-components-only apps, purely synchronous local state (useState/Zustand), GraphQL with normalized caching (Apollo/urql).
TanStack DB is currently in beta. APIs may change between releases.
Quick Reference
| Pattern | API | Key Points |
|---|---|---|
| Create collection | createCollection(queryCollectionOptions({...})) |
Define typed set of objects with getKey |
| Live query (React) | useLiveQuery((q) => q.from({...}).where(...)) |
Auto-updates when underlying data changes |
| Filter | .where(({ t }) => eq(t.field, value)) |
Supports eq, gt, lt, like, and, or, not |
| Select fields | .select(({ t }) => ({ id: t.id, name: t.name })) |
Project specific fields from collections |
| Order results | .orderBy(({ t }) => t.field, 'asc') |
Sort ascending or descending |
| Join collections | .join({ b: collB }, ({ a, b }) => eq(...), 'inner') |
Cross-collection joins with type safety |
| Group and aggregate | .groupBy(...).select(({ t }) => ({ count: count(t.id) })) |
Supports count, sum, avg, min, max |
| Insert | collection.insert({ ...data }) |
Optimistic insert, syncs via onInsert handler |
| Update | collection.update(key, (draft) => { ... }) |
Immer-style draft mutation, syncs via onUpdate |
| Delete | collection.delete(key) |
Optimistic delete, syncs via onDelete handler |
| Electric sync | electricCollectionOptions({ shapeOptions: {...} }) |
Real-time Postgres sync via ElectricSQL |
| Live query coll. | liveQueryCollectionOptions({ query }) |
Derived collection from live query definition |
| Local storage | localStorageCollectionOptions({...}) |
Persistent local data, syncs across tabs |
Sync Modes (v0.5+)
| Mode | Behavior | Use Case |
|---|---|---|
| Eager (default) | Loads all records on collection init | Small datasets (< 1k rows) |
| On-demand | Loads only what queries request (predicate pushdown) | Large datasets, selective loading |
| Progressive | Fast first paint, full dataset syncs in background | Best of both, scales to 100k+ |
Common Mistakes
| Mistake | Correct Pattern |
|---|---|
| Using TanStack Query directly for local state | Use collections with live queries for reactive local data |
Forgetting getKey in collection config |
Always provide getKey to identify items uniquely |
| Not providing persistence handlers | Define onInsert/onUpdate/onDelete to sync with server |
Using useQuery instead of useLiveQuery |
useLiveQuery provides reactive cross-collection queries |
| Creating collections inside components | Define collections at module scope, outside components |
Importing from @tanstack/db in React apps |
Import from @tanstack/react-db (re-exports core) |
| Expecting automatic server sync without config | Collections require explicit persistence handlers for sync |
| Not installing collection type package | Install @tanstack/query-db-collection for REST API usage |
Delegation
If the
tanstack-queryskill is available, delegate TanStack Query-specific patterns (query keys, cache invalidation, SSR) to it.
Otherwise, recommend:npx skills add oakoss/agent-skills --skill tanstack-query
If theelectricsqlskill is available, delegate ElectricSQL setup, shapes, auth proxy, and write patterns to it.
Otherwise, recommend:pnpm dlx skills add oakoss/agent-skills -s electricsql -a claude-code -y
If thelocal-firstskill is available, delegate architecture decisions, sync engine comparison, and conflict resolution to it.
Otherwise, recommend:pnpm dlx skills add oakoss/agent-skills -s local-first -a claude-code -y
- Query pattern discovery: Use
Exploreagent - Architecture review: Use
Taskagent
References
- Setup, installation, and collection configuration
- Live queries, filtering, joins, and aggregations
- Optimistic mutations, persistence handlers, and sync patterns
- ElectricSQL integration, electric collections, and txid patterns
- Error class hierarchy, transaction states, and rollback patterns
- Local-only and localStorage collections with cross-tab sync
- Cross-collection transactions, joins, batching, and lifecycle
Installationen
Sicherheitsprüfung
Quellcode ansehen
oakoss/agent-skills
Mehr aus dieser Quelle
EU-Hosted Inference API Power your AI Agents with
the best open-source models.
Drop-in OpenAI-compatible API. No data leaves Europe.
Explore Inference APIGLM
GLM 5
$1.00 / $3.20
per M tokens
Kimi
Kimi K2.5
$0.60 / $2.80
per M tokens
MiniMax
MiniMax M2.5
$0.30 / $1.20
per M tokens
Qwen
Qwen3.5 122B
$0.40 / $3.00
per M tokens
So verwenden Sie diesen Skill
Install tanstack-db by running npx skills add oakoss/agent-skills --skill tanstack-db in your project directory. Führen Sie den obigen Installationsbefehl in Ihrem Projektverzeichnis aus. Die Skill-Datei wird von GitHub heruntergeladen und in Ihrem Projekt platziert.
Keine Konfiguration erforderlich. Ihr KI-Agent (Claude Code, Cursor, Windsurf usw.) erkennt installierte Skills automatisch und nutzt sie als Kontext bei der Code-Generierung.
Der Skill verbessert das Verständnis Ihres Agenten für tanstack-db, und hilft ihm, etablierte Muster zu befolgen, häufige Fehler zu vermeiden und produktionsreifen Code zu erzeugen.
Was Sie erhalten
Skills sind Klartext-Anweisungsdateien — kein ausführbarer Code. Sie kodieren Expertenwissen über Frameworks, Sprachen oder Tools, das Ihr KI-Agent liest, um seine Ausgabe zu verbessern. Das bedeutet null Laufzeit-Overhead, keine Abhängigkeitskonflikte und volle Transparenz: Sie können jede Anweisung vor der Installation lesen und prüfen.
Kompatibilität
Dieser Skill funktioniert mit jedem KI-Coding-Agenten, der das skills.sh-Format unterstützt, einschließlich Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider und anderen Tools, die projektbezogene Kontextdateien lesen. Skills sind auf Transportebene framework-agnostisch — der Inhalt bestimmt, für welche Sprache oder welches Framework er gilt.
Made in Europe Chat with 100+ AI Models in one App.
Use Claude, ChatGPT, Gemini alongside with EU-Hosted Models like Deepseek, GLM-5, Kimi K2.5 and many more.
