Agent skill
tanstack-solid
Specialist in the TanStack ecosystem for SolidJS, including TanStack Start, Query, Router, Table, and Form. Focuses on Solid-specific reactivity patterns.
Install this agent skill to your Project
npx add-skill https://github.com/joncrangle/.dotfiles/tree/main/dot_config/opencode/skills/tanstack-solid
SKILL.md
<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
- NO Destructuring Query Results:
const { data } = createQuery(...)breaks reactivity. Always usequery.data. - NO Static Options Objects: Passing a static object to
createQueryprevents updates when dependencies change. Pass a function:createQuery(() => ({ ... })). - NO React Patterns: Do not use
useQueryoruseEffect. UsecreateQueryandcreateEffect. - NO Direct Prop Access in Options: If using props in options, access them inside the getter function:
() => props.id. - NO Manual Refetching Loop: Do not use
setIntervalto refetch. UserefetchIntervalin Query options.
🤖 Agent Tool Strategy
- Reactivity Check: Verify that all options objects passed to TanStack creators are wrapped in functions (e.g.,
() => ({ ... })) if they depend on signals/props. - Server Functions: For TanStack Start, use
createServerFnfor backend logic instead of API routes where possible. - 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 (
createResourcealternative). - Router: Type-safe routing.
- Table: Headless data tables.
- Form: Headless form state management.
Resources
- Examples: See
examples/examples.mdfor detailed code patterns. - References: See
references/reference.mdfor official documentation links. </skill_doc>
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
lang-javascript
This skill should be used when the user asks to "write JavaScript", "debug a Node.js/Bun app", "create a Hono server", "configure Biome", "run tests with bun test", or mentions .js/.mjs files. Covers ES2024+, Bun, and Hono patterns.
opentui
Comprehensive OpenTUI skill for building terminal user interfaces. Covers the core imperative API, React reconciler, and Solid reconciler. Use for any TUI development task including components, layout, keyboard handling, animations, and testing.
vitest
Specialist in Vitest, a blazing fast unit test framework powered by Vite. Focuses on Jest compatibility, in-source testing, and native ESM support.
PreventionPatterns
Known bug patterns and their fixes to prevent regression.
lang-typescript
This skill should be used when the user asks to "write TypeScript", "debug TypeScript", "create a SolidJS component", "configure TanStack Start", "validate data with Valibot", or mentions .ts/.tsx files. Covers TypeScript 5.9+, SolidJS, and TanStack patterns.
just-cli
This skill should be used when the user asks to "create a justfile", "write just recipes", "configure just settings", "add just modules", "use just attributes", "set up task automation", mentions justfile, just command runner, or task automation with just.
Didn't find tool you were looking for?