feat: Implement tasks feature using NGRX signals and remove the old counter store, alongside general project configuration and skill documentation updates.

.agents/skills/angular-di/SKILL.md

@@ -14,43 +14,43 @@ Configure and use dependency injection in Angular v20+ with `inject()` and provi
 Prefer `inject()` over constructor injection:
 
 ```typescript
-import { Component, inject } from "@angular/core";
-import { HttpClient } from "@angular/common/http";
-import { User } from "./user.service";
+import { Component, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { User } from './user.service';
 
 @Component({
-  selector: "app-user-list",
-  template: `...`,
+    selector: 'app-user-list',
+    template: `...`,
 })
 export class UserList {
-  // Inject dependencies
-  private http = inject(HttpClient);
-  private userService = inject(User);
+    // Inject dependencies
+    private http = inject(HttpClient);
+    private userService = inject(User);
 
-  // Can use immediately
-  users = this.userService.getUsers();
+    // Can use immediately
+    users = this.userService.getUsers();
 }
 ```
 
 ### Injectable Services
 
 ```typescript
-import { Injectable, inject, signal } from "@angular/core";
-import { HttpClient } from "@angular/common/http";
+import { Injectable, inject, signal } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
 
 @Injectable({
-  providedIn: "root", // Singleton at root level
+    providedIn: 'root', // Singleton at root level
 })
 export class User {
-  private http = inject(HttpClient);
+    private http = inject(HttpClient);
 
-  private users = signal<User[]>([]);
-  readonly users$ = this.users.asReadonly();
+    private users = signal<User[]>([]);
+    readonly users$ = this.users.asReadonly();
 
-  async loadUsers() {
-    const users = await firstValueFrom(this.http.get<User[]>("/api/users"));
-    this.users.set(users);
-  }
+    async loadUsers() {
+        const users = await firstValueFrom(this.http.get<User[]>('/api/users'));
+        this.users.set(users);
+    }
 }
 ```
 
@@ -61,13 +61,13 @@ export class User {
 ```typescript
 // Recommended: providedIn
 @Injectable({
-  providedIn: "root",
+    providedIn: 'root',
 })
 export class Auth {}
 
 // Alternative: in app.config.ts
 export const appConfig: ApplicationConfig = {
-  providers: [Auth],
+    providers: [Auth],
 };
 ```
 
@@ -75,12 +75,12 @@ export const appConfig: ApplicationConfig = {
 
 ```typescript
 @Component({
-  selector: "app-editor",
-  providers: [EditorState], // New instance for each component
-  template: `...`,
+    selector: 'app-editor',
+    providers: [EditorState], // New instance for each component
+    template: `...`,
 })
 export class Editor {
-  private editorState = inject(EditorState);
+    private editorState = inject(EditorState);
 }
 ```
 
@@ -88,14 +88,14 @@ export class Editor {
 
 ```typescript
 export const routes: Routes = [
-  {
-    path: "admin",
-    providers: [Admin], // Shared within this route tree
-    children: [
-      { path: "", component: AdminDashboard },
-      { path: "users", component: AdminUsers },
-    ],
-  },
+    {
+        path: 'admin',
+        providers: [Admin], // Shared within this route tree
+        children: [
+            { path: '', component: AdminDashboard },
+            { path: 'users', component: AdminUsers },
+        ],
+    },
 ];
 ```
 
@@ -104,31 +104,31 @@ export const routes: Routes = [
 ### Creating Tokens
 
 ```typescript
-import { InjectionToken } from "@angular/core";
+import { InjectionToken } from '@angular/core';
 
 // Simple value token
-export const API_URL = new InjectionToken<string>("API_URL");
+export const API_URL = new InjectionToken<string>('API_URL');
 
 // Object token
 export interface AppConfig {
-  apiUrl: string;
-  features: {
-    darkMode: boolean;
-    analytics: boolean;
-  };
+    apiUrl: string;
+    features: {
+        darkMode: boolean;
+        analytics: boolean;
+    };
 }
 
-export const APP_CONFIG = new InjectionToken<AppConfig>("APP_CONFIG");
+export const APP_CONFIG = new InjectionToken<AppConfig>('APP_CONFIG');
 
 // Token with factory (self-providing)
-export const WINDOW = new InjectionToken<Window>("Window", {
-  providedIn: "root",
-  factory: () => window,
+export const WINDOW = new InjectionToken<Window>('Window', {
+    providedIn: 'root',
+    factory: () => window,
 });
 
-export const LOCAL_STORAGE = new InjectionToken<Storage>("LocalStorage", {
-  providedIn: "root",
-  factory: () => localStorage,
+export const LOCAL_STORAGE = new InjectionToken<Storage>('LocalStorage', {
+    providedIn: 'root',
+    factory: () => localStorage,
 });
 ```
 
@@ -137,31 +137,31 @@ export const LOCAL_STORAGE = new InjectionToken<Storage>("LocalStorage", {
 ```typescript
 // app.config.ts
 export const appConfig: ApplicationConfig = {
-  providers: [
-    { provide: API_URL, useValue: "https://api.example.com" },
-    {
-      provide: APP_CONFIG,
-      useValue: {
-        apiUrl: "https://api.example.com",
-        features: { darkMode: true, analytics: true },
-      },
-    },
-  ],
+    providers: [
+        { provide: API_URL, useValue: 'https://api.example.com' },
+        {
+            provide: APP_CONFIG,
+            useValue: {
+                apiUrl: 'https://api.example.com',
+                features: { darkMode: true, analytics: true },
+            },
+        },
+    ],
 };
 ```
 
 ### Injecting Tokens
 
 ```typescript
-@Injectable({ providedIn: "root" })
+@Injectable({ providedIn: 'root' })
 export class Api {
-  private apiUrl = inject(API_URL);
-  private config = inject(APP_CONFIG);
-  private window = inject(WINDOW);
+    private apiUrl = inject(API_URL);
+    private config = inject(APP_CONFIG);
+    private window = inject(WINDOW);
 
-  getBaseUrl(): string {
-    return this.apiUrl;
-  }
+    getBaseUrl(): string {
+        return this.apiUrl;
+    }
 }
 ```
 
@@ -268,23 +268,23 @@ Collect multiple values for same token:
 
 ```typescript
 // Token for multiple validators
-export const VALIDATORS = new InjectionToken<Validator[]>("Validators");
+export const VALIDATORS = new InjectionToken<Validator[]>('Validators');
 
 // Provide multiple values
 providers: [
-  { provide: VALIDATORS, useClass: RequiredValidator, multi: true },
-  { provide: VALIDATORS, useClass: EmailValidator, multi: true },
-  { provide: VALIDATORS, useClass: MinLengthValidator, multi: true },
+    { provide: VALIDATORS, useClass: RequiredValidator, multi: true },
+    { provide: VALIDATORS, useClass: EmailValidator, multi: true },
+    { provide: VALIDATORS, useClass: MinLengthValidator, multi: true },
 ];
 
 // Inject as array
 @Injectable()
 export class Validation {
-  private validators = inject(VALIDATORS); // Validator[]
+    private validators = inject(VALIDATORS); // Validator[]
 
-  validate(value: string): ValidationError[] {
-    return this.validators.map((v) => v.validate(value)).filter(Boolean);
-  }
+    validate(value: string): ValidationError[] {
+        return this.validators.map((v) => v.validate(value)).filter(Boolean);
+    }
 }
 ```
 
@@ -293,11 +293,7 @@ export class Validation {
 ```typescript
 // Interceptors use multi providers internally
 export const appConfig: ApplicationConfig = {
-  providers: [
-    provideHttpClient(
-      withInterceptors([authInterceptor, loggingInterceptor, errorInterceptor]),
-    ),
-  ],
+    providers: [provideHttpClient(withInterceptors([authInterceptor, loggingInterceptor, errorInterceptor]))],
 };
 ```
 
@@ -306,16 +302,16 @@ export const appConfig: ApplicationConfig = {
 Run async code before app starts using `provideAppInitializer`:
 
 ```typescript
-import { provideAppInitializer, inject } from "@angular/core";
+import { provideAppInitializer, inject } from '@angular/core';
 
 export const appConfig: ApplicationConfig = {
-  providers: [
-    Config,
-    provideAppInitializer(() => {
-      const configService = inject(Config);
-      return configService.loadConfig();
-    }),
-  ],
+    providers: [
+        Config,
+        provideAppInitializer(() => {
+            const configService = inject(Config);
+            return configService.loadConfig();
+        }),
+    ],
 };
 ```
 
@@ -323,14 +319,14 @@ export const appConfig: ApplicationConfig = {
 
 ```typescript
 providers: [
-  provideAppInitializer(() => {
-    const config = inject(Config);
-    return config.load();
-  }),
-  provideAppInitializer(() => {
-    const auth = inject(Auth);
-    return auth.checkSession();
-  }),
+    provideAppInitializer(() => {
+        const config = inject(Config);
+        return config.load();
+    }),
+    provideAppInitializer(() => {
+        const auth = inject(Auth);
+        return auth.checkSession();
+    }),
 ];
 ```
 
@@ -339,19 +335,15 @@ providers: [
 Create injectors programmatically:
 
 ```typescript
-import {
-  createEnvironmentInjector,
-  EnvironmentInjector,
-  inject,
-} from "@angular/core";
+import { createEnvironmentInjector, EnvironmentInjector, inject } from '@angular/core';
 
-@Injectable({ providedIn: "root" })
+@Injectable({ providedIn: 'root' })
 export class Plugin {
-  private parentInjector = inject(EnvironmentInjector);
+    private parentInjector = inject(EnvironmentInjector);
 
-  loadPlugin(providers: Provider[]): EnvironmentInjector {
-    return createEnvironmentInjector(providers, this.parentInjector);
-  }
+    loadPlugin(providers: Provider[]): EnvironmentInjector {
+        return createEnvironmentInjector(providers, this.parentInjector);
+    }
 }
 ```
 
@@ -360,25 +352,21 @@ export class Plugin {
 Run code with injection context:
 
 ```typescript
-import {
-  runInInjectionContext,
-  EnvironmentInjector,
-  inject,
-} from "@angular/core";
+import { runInInjectionContext, EnvironmentInjector, inject } from '@angular/core';
 
-@Injectable({ providedIn: "root" })
+@Injectable({ providedIn: 'root' })
 export class Utility {
-  private injector = inject(EnvironmentInjector);
+    private injector = inject(EnvironmentInjector);
 
-  executeWithDI<T>(fn: () => T): T {
-    return runInInjectionContext(this.injector, fn);
-  }
+    executeWithDI<T>(fn: () => T): T {
+        return runInInjectionContext(this.injector, fn);
+    }
 }
 
 // Usage
 utilityService.executeWithDI(() => {
-  const http = inject(HttpClient);
-  // Use http...
+    const http = inject(HttpClient);
+    // Use http...
 });
 ```
 

.agents/skills/angular-di/references/di-patterns.md

@@ -16,31 +16,31 @@
 Combine multiple services into a single API:
 
 ```typescript
-@Injectable({ providedIn: "root" })
+@Injectable({ providedIn: 'root' })
 export class ShopFacade {
-  private productService = inject(Product);
-  private cartService = inject(Cart);
-  private orderService = inject(Order);
+    private productService = inject(Product);
+    private cartService = inject(Cart);
+    private orderService = inject(Order);
 
-  // Expose combined state
-  readonly products = this.productService.products;
-  readonly cart = this.cartService.items;
-  readonly cartTotal = this.cartService.total;
+    // Expose combined state
+    readonly products = this.productService.products;
+    readonly cart = this.cartService.items;
+    readonly cartTotal = this.cartService.total;
 
-  // Unified actions
-  addToCart(productId: string, quantity: number) {
-    const product = this.productService.getById(productId);
-    if (product) {
-      this.cartService.add(product, quantity);
+    // Unified actions
+    addToCart(productId: string, quantity: number) {
+        const product = this.productService.getById(productId);
+        if (product) {
+            this.cartService.add(product, quantity);
+        }
     }
-  }
 
-  async checkout() {
-    const items = this.cartService.items();
-    const order = await this.orderService.create(items);
-    this.cartService.clear();
-    return order;
-  }
+    async checkout() {
+        const items = this.cartService.items();
+        const order = await this.orderService.create(items);
+        this.cartService.clear();
+        return order;
+    }
 }
 ```
 
@@ -48,41 +48,41 @@ export class ShopFacade {
 
 ```typescript
 interface UserState {
-  user: User | null;
-  loading: boolean;
-  error: string | null;
+    user: User | null;
+    loading: boolean;
+    error: string | null;
 }
 
-@Injectable({ providedIn: "root" })
+@Injectable({ providedIn: 'root' })
 export class UserState {
-  private state = signal<UserState>({
-    user: null,
-    loading: false,
-    error: null,
-  });
+    private state = signal<UserState>({
+        user: null,
+        loading: false,
+        error: null,
+    });
 
-  // Selectors
-  readonly user = computed(() => this.state().user);
-  readonly loading = computed(() => this.state().loading);
-  readonly error = computed(() => this.state().error);
-  readonly isAuthenticated = computed(() => this.state().user !== null);
+    // Selectors
+    readonly user = computed(() => this.state().user);
+    readonly loading = computed(() => this.state().loading);
+    readonly error = computed(() => this.state().error);
+    readonly isAuthenticated = computed(() => this.state().user !== null);
 
-  // Actions
-  setUser(user: User) {
-    this.state.update((s) => ({ ...s, user, loading: false, error: null }));
-  }
+    // Actions
+    setUser(user: User) {
+        this.state.update((s) => ({ ...s, user, loading: false, error: null }));
+    }
 
-  setLoading() {
-    this.state.update((s) => ({ ...s, loading: true, error: null }));
-  }
+    setLoading() {
+        this.state.update((s) => ({ ...s, loading: true, error: null }));
+    }
 
-  setError(error: string) {
-    this.state.update((s) => ({ ...s, loading: false, error }));
-  }
+    setError(error: string) {
+        this.state.update((s) => ({ ...s, loading: false, error }));
+    }
 
-  clear() {
-    this.state.set({ user: null, loading: false, error: null });
-  }
+    clear() {
+        this.state.set({ user: null, loading: false, error: null });
+    }
 }
 ```
 
@@ -208,36 +208,36 @@ export class User {
 ```typescript
 // Parent provides service
 @Component({
-  selector: "app-form-container",
-  providers: [FormState],
-  template: `
-    <app-form-header />
-    <app-form-body />
-    <app-form-footer />
-  `,
+    selector: 'app-form-container',
+    providers: [FormState],
+    template: `
+        <app-form-header />
+        <app-form-body />
+        <app-form-footer />
+    `,
 })
 export class FormContainer {
-  private formState = inject(FormState);
+    private formState = inject(FormState);
 }
 
 // Children share same instance
 @Component({
-  selector: "app-form-body",
-  template: `...`,
+    selector: 'app-form-body',
+    template: `...`,
 })
 export class FormBody {
-  // Gets same instance as parent
-  private formState = inject(FormState);
+    // Gets same instance as parent
+    private formState = inject(FormState);
 }
 
 // Grandchildren also share
 @Component({
-  selector: "app-form-field",
-  template: `...`,
+    selector: 'app-form-field',
+    template: `...`,
 })
 export class FormField {
-  // Gets same instance from ancestor
-  private formState = inject(FormState);
+    // Gets same instance from ancestor
+    private formState = inject(FormState);
 }
 ```
 
@@ -245,20 +245,20 @@ export class FormField {
 
 ```typescript
 @Component({
-  selector: "app-tabs",
-  // providers: Available to component AND content children
-  providers: [TabsSvc],
+    selector: 'app-tabs',
+    // providers: Available to component AND content children
+    providers: [TabsSvc],
 
-  // viewProviders: Available to component AND view children only
-  // NOT available to content children (<ng-content>)
-  viewProviders: [InternalTabs],
+    // viewProviders: Available to component AND view children only
+    // NOT available to content children (<ng-content>)
+    viewProviders: [InternalTabs],
 
-  template: `
-    <div class="tabs">
-      <ng-content />
-      <!-- Content children can't access viewProviders -->
-    </div>
-  `,
+    template: `
+        <div class="tabs">
+            <ng-content />
+            <!-- Content children can't access viewProviders -->
+        </div>
+    `,
 })
 export class Tabs {}
 ```
@@ -338,56 +338,56 @@ import { PLATFORM_ID, isPlatformBrowser } from '@angular/common';
 ### Mocking Services
 
 ```typescript
-describe("UserCmpt", () => {
-  let userServiceSpy: jasmine.SpyObj<User>;
+describe('UserCmpt', () => {
+    let userServiceSpy: jasmine.SpyObj<User>;
 
-  beforeEach(async () => {
-    userServiceSpy = jasmine.createSpyObj("User", ["getUser", "updateUser"]);
-    userServiceSpy.getUser.and.returnValue(of({ id: "1", name: "Test" }));
+    beforeEach(async () => {
+        userServiceSpy = jasmine.createSpyObj('User', ['getUser', 'updateUser']);
+        userServiceSpy.getUser.and.returnValue(of({ id: '1', name: 'Test' }));
 
-    await TestBed.configureTestingModule({
-      imports: [UserCmpt],
-      providers: [{ provide: User, useValue: userServiceSpy }],
-    }).compileComponents();
-  });
+        await TestBed.configureTestingModule({
+            imports: [UserCmpt],
+            providers: [{ provide: User, useValue: userServiceSpy }],
+        }).compileComponents();
+    });
 
-  it("should load user", () => {
-    const fixture = TestBed.createComponent(UserCmpt);
-    fixture.detectChanges();
+    it('should load user', () => {
+        const fixture = TestBed.createComponent(UserCmpt);
+        fixture.detectChanges();
 
-    expect(userServiceSpy.getUser).toHaveBeenCalled();
-  });
+        expect(userServiceSpy.getUser).toHaveBeenCalled();
+    });
 });
 ```
 
 ### Overriding Providers
 
 ```typescript
-describe("with different config", () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [App],
-    })
-      .overrideProvider(APP_CONFIG, {
-        useValue: { apiUrl: "http://test-api.com" },
-      })
-      .compileComponents();
-  });
+describe('with different config', () => {
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [App],
+        })
+            .overrideProvider(APP_CONFIG, {
+                useValue: { apiUrl: 'http://test-api.com' },
+            })
+            .compileComponents();
+    });
 });
 ```
 
 ### Testing Injection Tokens
 
 ```typescript
-describe("API_URL token", () => {
-  it("should provide correct URL", () => {
-    TestBed.configureTestingModule({
-      providers: [{ provide: API_URL, useValue: "https://api.test.com" }],
-    });
+describe('API_URL token', () => {
+    it('should provide correct URL', () => {
+        TestBed.configureTestingModule({
+            providers: [{ provide: API_URL, useValue: 'https://api.test.com' }],
+        });
 
-    const apiUrl = TestBed.inject(API_URL);
-    expect(apiUrl).toBe("https://api.test.com");
-  });
+        const apiUrl = TestBed.inject(API_URL);
+        expect(apiUrl).toBe('https://api.test.com');
+    });
 });
 ```
 
@@ -430,18 +430,18 @@ export class Data {
 ```typescript
 @Injectable()
 export class WebSocket {
-  private destroyRef = inject(DestroyRef);
-  private socket: WebSocket | null = null;
+    private destroyRef = inject(DestroyRef);
+    private socket: WebSocket | null = null;
 
-  constructor() {
-    this.destroyRef.onDestroy(() => {
-      this.socket?.close();
-    });
-  }
+    constructor() {
+        this.destroyRef.onDestroy(() => {
+            this.socket?.close();
+        });
+    }
 
-  connect(url: string) {
-    this.socket = new WebSocket(url);
-  }
+    connect(url: string) {
+        this.socket = new WebSocket(url);
+    }
 }
 ```