Angular Best Practices Tanstack

What it does

This skill equips AI agents to generate Angular applications that strictly adhere to modern best practices by leveraging the TanStack ecosystem. It ensures codebases are built with scalable architecture, optimized performance, and maintainable patterns suitable for large-scale enterprise projects.

When to use it

• You need to scaffold a new Angular project using the latest community-driven standards rather than default configurations.
• Your team requires strict type safety and reactive state management without relying on deprecated RxJS operators or heavy boilerplate.
• You are migrating an existing monolithic Angular app to a modular structure with improved dependency injection strategies.
• You want to ensure consistent UI component logic using the TanStack Query library for server-state management.

Key capabilities

• Generates Angular codebases pre-configured with TanStack Router for type-safe navigation and URL handling.
• Implements TanStack Query (React Query) for efficient data fetching, caching, and synchronization across components.
• Enforces strict TypeScript typing and modern linting rules to prevent runtime errors early in development.
• Structures projects using feature-based modularization for better scalability and team collaboration.

Example prompts

• "Create a new Angular project using the TanStack ecosystem with a feature-based folder structure."
• "Generate a user dashboard component that uses TanStack Query to fetch data from an API with proper loading and error states."
• "Refactor this legacy Angular service to use TanStack Router for navigation logic and strict type definitions."

Tips & gotchas

Ensure your development environment has the latest Node.js version installed, as TanStack libraries frequently update their dependencies. This skill is optimized for new projects; migrating complex legacy codebases may require manual adjustments to existing state management patterns.