Cursor Rules Template: Angular 18 Standalone Components + NgRx

Overview

Cursor rules configuration for Angular 18 standalone components with NgRx state management. This Cursor rules template provides practical, stack-specific instructions to guide Cursor AI in generating, validating, and maintaining Angular 18 apps that leverage standalone components and NgRx store patterns.

When to Use These Cursor Rules

• Starting a new Angular 18 project with standalone components and NgRx store architecture.
• Scaffolding feature slices with createAction, createReducer, createEffect, and selectors.
• Guiding Cursor AI to generate consistent, type-safe NgRx patterns across modules.
• Enforcing project structure and security practices from the outset.
• Documenting testing, linting, and CI workflows for a TypeScript Angular stack.

Copyable .cursorrules Configuration

Framework Role & Context:
  - You are a senior Angular 18 developer specializing in standalone components and NgRx state management.
  - Cursor AI acts as a code co-pilot, emitting type-safe, modular code aligned with the Angular 18 style guide.

Code Style and Style Guides:
  - TypeScript strict mode, Angular style guide, ESLint with angular-eslint, Prettier.
  - Use OnPush change detection, async pipe, and feature-based selectors.

Architecture & Directory Rules:
  - Standalone components everywhere; no NgModule declarations.
  - src/app/ features/ store/ adapters/ and components/ with a clear separation of concerns.
  - Use a feature-driven store shape: actions, reducers, selectors, and effects per feature.

Authentication & Security Rules:
  - Token handling via HttpClient interceptors; store tokens in memory or HttpOnly cookies when feasible.
  - Do not persist tokens to localStorage; validate tokens server-side and refresh using silent endpoints.

Database and ORM patterns:
  - Frontend talks to REST/GraphQL APIs; do not embed credentials in the client.
  - Effects call APIs; normalize responses; handle errors gracefully with retries.

Testing & Linting Workflows:
  - Unit tests for actions, reducers, and effects; integration tests for feature modules.
  - E2E tests with Cypress; CI runs lint, type-check, unit tests, and E2E tests on PRs.

Prohibited Actions and Anti-patterns:
  - Do not mutate the NgRx store outside reducers; do not perform side effects in components.
  - Do not bypass DI or use window/document without guards for SSR; avoid direct DOM manipulation.
  - Do not couple actions to UI strings or environment-specific values in rules.

Recommended Project Structure

apps/
  angular-ngrx/
    src/
      app/
        components/         # standalone components for features
        features/           # feature folders containing feature components
        store/              # NgRx store: actions, reducers, selectors, effects per feature
        app-routing/        # routing with provideRouter, not NgModule-based routing
        core/               # singleton services, API clients, guards
        shared/             # reusable UI and utilities
      environments/
      main.ts
      index.html

Core Engineering Principles

• Modular, component-first architecture with clear feature boundaries.
• Type-safe code with strict TypeScript settings and Angular best practices.
• Testability at unit, integration, and e2e levels; high code coverage goals.
• Deterministic state management using NgRx with predictable reducers and effects.
• Security-minded development: proper auth handling, input sanitization, and CSP compliance.
• Performance-conscious rendering using standalone components and OnPush change detection.

Code Construction Rules

• Use createAction, createReducer, and createEffect for all NgRx patterns; keep actions small and explicit.
• Define feature slices under src/app/store/features with selectors and adapters.
• All HTTP calls must go through an API service and be orchestrated by NgRx effects.
• Define route components as standalone and lazy-load feature modules with provideRoutes.
• Leverage TypeScript interfaces for model definitions and strong typing for API payloads.
• Lint strictly with angular-eslint rules and Prettier formatting; run lint in CI.

Security and Production Rules

• Serve with a strict Content-Security-Policy and sanitize all user-generated content.
• Use HttpOnly cookies for session tokens when possible; otherwise store in memory with short lifetimes.
• Enable CSRF protection for state-changing requests; validate server tokens on every API call.
• Avoid exposing secrets in client code; use environment variables provided at build time.
• Set up robust error handling and rate limiting on API interactions; log security incidents.

Testing Checklist

• Unit tests for actions, reducers, selectors, and effects with mocked API responses.
• Integration tests for API client services and NgRx effects orchestration.
• E2E tests for critical flows using Cypress; run against a staging API.
• Type checks and linting as part of CI; ensure 80%+ code coverage.
• Static analysis for security posture and dependency vetting.

Common Mistakes to Avoid

• Mutating NgRx state in components instead of reducers and effects.
• Ignoring standalone component wiring in Angular 18; relying on NgModule boilerplate.
• Storing tokens in localStorage or exposing API keys in frontend code.
• Using non-deterministic selectors or selector re-computation without memoization.
• Overcomplicating store architecture without feature boundaries.

FAQ

What is included in this Cursor Rules Template for Angular 18 with NgRx?

This Cursor Rules Template provides stack-specific guidance for building Angular 18 apps with standalone components and NgRx. It outlines roles, architecture, and recommended patterns so Cursor AI can generate consistent, maintainable code within the Angular 18+ NgRx context.

How should I structure an Angular 18 standalone components project with NgRx?

Follow the recommended project structure: standalone components, feature slices under src/app/store/features, provideRouter-based routing, and a single API service layer orchestrated by NgRx effects for API calls.

What common mistakes should I avoid with Cursor AI on this stack?

Avoid mutating the NgRx store in components, bypassing dependency injection, storing tokens insecurely, or coupling actions to UI strings. Keep isolation between UI and business logic and validate all tokens server-side.

What testing strategies are recommended for Angular 18 with NgRx?

Use unit tests for actions, reducers, and effects; integration tests for API clients; Cypress for E2E tests; and integrate linting and type checks into CI.

How does Cursor AI stay aligned with Angular 18 standalone components?

Cursor AI should emit code following the Angular 18 standalone component paradigm and NgRx patterns, adhering to the project structure, security rules, and testing workflows defined in this template.