playbooks

home / skills / joncrangle / .dotfiles / tanstack-solid

tanstack-solid skill

/dot_config/opencode/skills/tanstack-solid

This skill helps you build type-safe, reactive Solid apps with TanStack Start, Query, Router, Table, and Form patterns.

npx playbooks add skill joncrangle/.dotfiles --skill tanstack-solid

Review the files below or copy the command above to add this skill to your agents.

Files (3)
SKILL.md
2.4 KB
---
name: tanstack-solid
description: Specialist in the TanStack ecosystem for SolidJS, including TanStack Start, Query, Router, Table, and Form. Focuses on Solid-specific reactivity patterns.
---
<skill_doc>
<trigger_keywords>
## Trigger Keywords

Activate this skill when the user mentions any of:

**Meta-Framework**: TanStack Start, TanStack Start Solid, Server Functions, createServerFn

**Libraries**: @tanstack/solid-query, @tanstack/solid-router, @tanstack/solid-table, @tanstack/solid-form

**Concepts**: createQuery, createMutation, createRouter, createSolidTable, createForm
</trigger_keywords>

## â›” Forbidden Patterns

1.  **NO Destructuring Query Results**: `const { data } = createQuery(...)` breaks reactivity. Always use `query.data`.
2.  **NO Static Options Objects**: Passing a static object to `createQuery` prevents updates when dependencies change. Pass a function: `createQuery(() => ({ ... }))`.
3.  **NO React Patterns**: Do not use `useQuery` or `useEffect`. Use `createQuery` and `createEffect`.
4.  **NO Direct Prop Access in Options**: If using props in options, access them inside the getter function: `() => props.id`.
5.  **NO Manual Refetching Loop**: Do not use `setInterval` to refetch. Use `refetchInterval` in Query options.

## 🤖 Agent Tool Strategy

1.  **Reactivity Check**: Verify that all options objects passed to TanStack creators are wrapped in functions (e.g., `() => ({ ... })`) if they depend on signals/props.
2.  **Server Functions**: For TanStack Start, use `createServerFn` for backend logic instead of API routes where possible.
3.  **Type Safety**: Prioritize the type-safe routing features of TanStack Router (file-based routing, `createFileRoute`).

## Quick Reference (30 seconds)

TanStack Solid Specialist - Type-safe, Headless, Reactive.

**Core Philosophy**:
- **Solid Adapter**: All libraries use Solid's fine-grained reactivity.
- **Getters are King**: Options must be getters to track dependencies.
- **Type Safety**: End-to-end type safety from router to server functions.

**Key Libraries**:
- **Start**: Full-stack meta-framework.
- **Query**: Async state management (`createResource` alternative).
- **Router**: Type-safe routing.
- **Table**: Headless data tables.
- **Form**: Headless form state management.

---

## Resources

- **Examples**: See `examples/examples.md` for detailed code patterns.
- **References**: See `references/reference.md` for official documentation links.
</skill_doc>

Overview

This skill specializes in the TanStack ecosystem for SolidJS, covering TanStack Start, Query, Router, Table, and Form with a focus on Solid-specific reactivity patterns. It helps you build type-safe, headless, and reactive UI and full-stack flows using Solid's fine-grained signals and getters. The guidance centers on correct option usage, server functions, and avoiding common reactivity pitfalls.

How this skill works

I inspect code for Solid-compatible TanStack patterns and flag anti-patterns that break reactivity, such as static option objects or destructured query results. I enforce wrapping options in getters, recommend createServerFn for server-side logic, and favor TanStack Router's type-safe routing. I also validate that Query/Table/Form/Router creators receive functions when they depend on signals or props.

When to use it

  • When building data fetching with @tanstack/solid-query and you need fine-grained reactivity.
  • When creating routes with TanStack Router and you want end-to-end type safety.
  • When composing headless tables or forms with @tanstack/solid-table and @tanstack/solid-form.
  • When using TanStack Start for full-stack patterns and preferring server functions over manual API routes.
  • When auditing Solid code for common reactivity mistakes and incorrect option usage.

Best practices

  • Always pass options as getters: use createQuery(() => ({ ... })) when options depend on signals or props.
  • Never destructure reactive query results; read via query.data, query.error, etc., to preserve reactivity.
  • Avoid React idioms like useQuery/useEffect—use Solid equivalents such as createQuery and createEffect.
  • Access props inside getter functions: () => ({ queryKey: [props.id] }) to track dependencies.
  • Use refetchInterval option instead of manual setInterval loops for safe polling.
  • Prefer createServerFn for backend logic with TanStack Start and leverage file-based type-safe routes.

Example use cases

  • Implementing a paginated data table whose query keys depend on reactive page and filter signals.
  • Creating a type-safe route hierarchy with TanStack Router and tying loaders to server functions.
  • Replacing a setInterval refetch loop with createQuery({ refetchInterval }) for polling updates.
  • Building a form with @tanstack/solid-form that reacts to signal-driven default values.
  • Auditing an app to replace destructured query data with query.data to fix stale UI updates.

FAQ

Why must options be getters?

Getters allow Solid to track dependencies. Static option objects prevent updates when dependent signals or props change.

Can I destructure createQuery results?

No. Destructuring (const { data } = query) breaks fine-grained reactivity. Always reference query.data.