#601

Global Rank · of 601 Skills

tanstack-store AI Agent Skill

View Source: oakoss/agent-skills

Safe

Installation

npx skills add oakoss/agent-skills --skill tanstack-store

38

Installs

TanStack Store

Overview

TanStack Store is a lightweight, framework-agnostic reactive state management library with type-safe updates, derived computations, batched mutations, and effect management. It powers the core of TanStack libraries internally and can be used as a standalone state solution. Framework adapters are available for React, Vue, Solid, Angular, and Svelte.

Core primitives:

  • Store — reactive container with setState, subscriptions, and lifecycle hooks
  • Derived — lazily computed values that track Store/Derived dependencies
  • Effect — side-effect runner triggered by dependency changes
  • batch — groups multiple updates so subscribers fire once

When to use: Shared reactive state across components, derived/computed values from multiple stores, batched state updates, framework-agnostic state logic reusable across React/Vue/Solid/Angular/Svelte, lightweight alternative to Redux/Zustand/MobX.

When NOT to use: Server state and caching (TanStack Query), complex normalized state with middleware (Redux Toolkit), form state management (TanStack Form), simple component-local state (useState/useSignal).

Key characteristics:

  • Tiny bundle size with zero dependencies
  • Immutable update model (always return new references from setState)
  • Lazy evaluation for Derived values (recompute only when accessed after change)
  • Explicit mount/unmount lifecycle for Derived and Effect (no automatic cleanup)

Installation

Package Use Case
@tanstack/store Framework-agnostic core
@tanstack/react-store React adapter (re-exports core)
@tanstack/vue-store Vue adapter
@tanstack/solid-store Solid adapter
@tanstack/angular-store Angular adapter
@tanstack/svelte-store Svelte adapter

Framework packages re-export the core Store, Derived, Effect, and batch — install only the framework package, not both.

Quick Reference

Pattern API Key Points
Create store new Store(initialState, options?) Generic over TState and TUpdater
Read state store.state Synchronous property access
Previous state store.prevState Value before last setState call
Update state store.setState((prev) => newState) Accepts updater function or direct value
Subscribe store.subscribe(listener) Returns unsubscribe function
Derived value new Derived({ deps, fn }) Lazily recomputes when dependencies change
Mount derived derived.mount() Required to activate dependency tracking
Derived from derived Nest Derived in another deps Forms a computation graph
Batch updates batch(() => { ... }) Subscribers notified once after all updates
Side effects new Effect({ deps, fn, eager? }) Runs fn when dependencies change
Mount effect effect.mount() Required to start listening
React binding useStore(store, selector?) Re-renders only when selected value changes
Shallow compare useStore(store, selector, shallow) Prevents re-renders for structurally equal objects
Lifecycle: subscribe onSubscribe option Fires on first subscriber, cleanup on last
Lifecycle: update onUpdate option Fires after every state change
Custom updater updateFn option Replace default setState behavior
Previous deps fn: ({ prevDepVals }) Compare current vs previous dependency values
Dep vals access fn: ({ currDepVals }) Array ordered by deps declaration order

Common Mistakes

Mistake Correct Pattern
Reading derived.state without mounting Call derived.mount() before accessing state
Forgetting to unmount derived/effect Store the cleanup function and call it on teardown
Multiple setState calls without batching Wrap related updates in batch() to avoid intermediate recomputation
Selecting objects in useStore without shallow Pass shallow as third argument to prevent unnecessary re-renders
Mutating state object directly Always return a new object from setState updater
Subscribing inside render without cleanup Use useStore hook in React instead of manual subscribe
Creating stores inside React components Instantiate stores outside components or in a ref/useState
Not including all deps in Derived List every Store/Derived dependency in the deps array
Mounting Derived deps after the parent Mount leaf dependencies before parent Derived values
Using @tanstack/store with React directly Install @tanstack/react-store which re-exports core

Delegation

  • Server state and caching: Delegate to the tanstack-query skill if available. Otherwise, recommend: npx skills add oakoss/agent-skills --skill tanstack-query
  • React component patterns: Delegate to framework-specific skills for component architecture
  • Form state management: Delegate to the tanstack-form skill if available. Otherwise, recommend: npx skills add oakoss/agent-skills --skill tanstack-form
  • Query pattern discovery: Use Explore agent to find examples in the codebase
  • Code review: Delegate to code-reviewer agent for store architecture review

References

Installs

Installs 38
Global Rank #601 of 601

Security Audit

ath Safe
socket Safe
Alerts: 0 Score: 90
snyk Low
EU 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 API

GLM

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

How to use this skill

1

Install tanstack-store by running npx skills add oakoss/agent-skills --skill tanstack-store in your project directory. Run the install command above in your project directory. The skill file will be downloaded from GitHub and placed in your project.

2

No configuration needed. Your AI agent (Claude Code, Cursor, Windsurf, etc.) automatically detects installed skills and uses them as context when generating code.

3

The skill enhances your agent's understanding of tanstack-store, helping it follow established patterns, avoid common mistakes, and produce production-ready output.

What you get

Skills are plain-text instruction files — not executable code. They encode expert knowledge about frameworks, languages, or tools that your AI agent reads to improve its output. This means zero runtime overhead, no dependency conflicts, and full transparency: you can read and review every instruction before installing.

Compatibility

This skill works with any AI coding agent that supports the skills.sh format, including Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider, and other tools that read project-level context files. Skills are framework-agnostic at the transport level — the content inside determines which language or framework it applies to.

Data sourced from the skills.sh registry and GitHub. Install counts and security audits are updated regularly.

EU 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.

Start for free View pricing
Customer Support