React Tanstack Senior

This is a practical guide for working with React and TanStack libraries with senior-level patterns baked in. It prioritizes KISS principles over clever code, readability over brevity, and includes a quick decision tree for common scenarios. The philosophy leans hard on composition, colocation, and type safety, which tracks with modern React best practices. Worth grabbing if you're working with TanStack Query, Table, or Router and want Claude to default to pragmatic patterns instead of overly abstracted solutions. The 122 installs suggest it's seeing real use, and it passed the usual security audits cleanly.

skills.sh installs: 157
GitHub stars: 5
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add modra40/claude-codex-skills-directory --skill react-tanstack-senior --agent claude-code

Installs into .claude/skills of the current project.

Files

React + TanStack Senior Developer Skill

Core Philosophy

KISS > Clever Code
Readability > Brevity  
Explicit > Implicit
Composition > Inheritance
Colocation > Separation
Type Safety > Any

Quick Decision Tree

State Management:

Server state → TanStack Query (WAJIB)
URL state → TanStack Router search params
Form state → TanStack Form atau React Hook Form
Global UI state → Zustand (bukan Redux)
Local UI state → useState/useReducer

Routing:

SPA → TanStack Router
Full-stack SSR → TanStack Start
Existing Next.js → tetap Next.js

Project Setup Workflow

Determine project type:
- SPA/Client-only? → Vite + TanStack Router + Query
- Full-stack SSR? → TanStack Start (Vinxi-based)
- Existing project? → Incremental adoption
Initialize project → See folder-structure.md
Setup core dependencies → See recommended-libraries.md