React Tanstack Senior

The react-tanstack-senior skill enables AI agents to build complex, high-performance React applications using the TanStack ecosystem. It focuses on implementing advanced state management, data fetching strategies, and component composition patterns typical of senior-level development.

When to use it

• Generating production-ready React components that leverage TanStack Query for efficient server-state management.
• Creating sophisticated UI layouts with TanStack Table for dynamic data filtering, sorting, and pagination.
• Developing scalable applications requiring robust form handling via TanStack Form or similar utilities within the ecosystem.
• Architecting modular codebases where senior-level best practices like separation of concerns and type safety are critical.

Key capabilities

• Integration of React with TanStack Query for optimized data fetching and caching.
• Implementation of TanStack Table features including virtualization, grouping, and row selection.
• Construction of reusable, typed component libraries adhering to senior engineering standards.
• Generation of code that handles complex asynchronous workflows and error states gracefully.

Example prompts

• "Create a data grid for an inventory management dashboard using React and TanStack Table with virtualization enabled."
• "Build a customer profile page that fetches user data asynchronously using TanStack Query and displays it in a reactive UI."
• "Generate a senior-level React component structure for a multi-step form wizard utilizing TanStack Form validation."

Tips & gotchas

Ensure your project dependencies include the latest versions of React and specific TanStack packages (e.g., @tanstack/react-query, @tanstack/table) to match the skill's expectations. This skill is designed for complex applications; avoid using it for simple static pages where full-featured state management libraries are unnecessary overhead.