verify-frontend-state

To validate frontend state management patterns, use this skill to enforce TanStack Query usage for server state, prohibit useState for server data, and check cache invalidation strategies after modifying SPA components or hooks.

You should use TanStack Query instead of useState for server data to properly separate server and client concerns. This skill enforces useQuery and useMutation to manage server state robustly and prevent anti-patterns in your frontend.

The best way to handle cache invalidation with TanStack Query is avoiding setQueryData inside onSuccess callbacks. This skill checks for proper cache invalidation placement and guides you toward correct server-state practices after component modifications.

To enforce code splitting and dynamic imports in frontend components, apply this skill when adding or modifying hooks. It encourages dynamic imports to separate Server and Client components, ensuring robust UI state management patterns.

This validation targets SPA frontends using TanStack Query for state management. It applies when adding or modifying components or hooks to verify server-state practices, ensuring proper separation of server and client concerns regardless of the underlying UI framework.