---
name: "ngrx-component-store-state"
description: "Manage local and feature reactive state in Angular components without global Redux boilerplate."
metadata:
  author: "NgRx"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "setup ngrx componentstore"
  - "write componentstore updater"
  - "componentstore effect rxjs"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# NgRx ComponentStore Fine-Grained Reactive Component State

Implements NgRx ComponentStore: extending ComponentStore<State>, defining selectors (select), updaters (updater), asynchronous effects (effect), and auto-unsubscribing upon component destruction.

## When to Invoke
Invoke this skill whenever you need to:
- setup ngrx componentstore
- write componentstore updater
- componentstore effect rxjs

## Execution SOP & Rules
1. Create store: @Injectable() export class ItemStore extends ComponentStore<ItemState> { ... }.
2. Declare selector: readonly items$ = this.select(state => state.items).
3. Declare updater: readonly updateFilter = this.updater((state, filter: string) => ({ ...state, filter })).
4. Declare effect: readonly loadItems = this.effect<void>(trigger$ => trigger$.pipe(switchMap(...))).

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.