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

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

@@ -11,38 +11,46 @@ Configure routing in Angular v20+ with lazy loading, functional guards, and sign
 
 ```typescript
 // app.routes.ts
-import { Routes } from "@angular/router";
+import { Routes } from '@angular/router';
 
 export const routes: Routes = [
-  { path: "", redirectTo: "/home", pathMatch: "full" },
-  { path: "home", component: Home },
-  { path: "about", component: About },
-  { path: "**", component: NotFound },
+    { path: '', redirectTo: '/home', pathMatch: 'full' },
+    { path: 'home', component: Home },
+    { path: 'about', component: About },
+    { path: '**', component: NotFound },
 ];
 
 // app.config.ts
-import { ApplicationConfig } from "@angular/core";
-import { provideRouter } from "@angular/router";
-import { routes } from "./app.routes";
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes)],
+    providers: [provideRouter(routes)],
 };
 
 // app.component.ts
-import { Component } from "@angular/core";
-import { RouterOutlet, RouterLink, RouterLinkActive } from "@angular/router";
+import { Component } from '@angular/core';
+import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
 
 @Component({
-  selector: "app-root",
-  imports: [RouterOutlet, RouterLink, RouterLinkActive],
-  template: `
-    <nav>
-      <a routerLink="/home" routerLinkActive="active">Home</a>
-      <a routerLink="/about" routerLinkActive="active">About</a>
-    </nav>
-    <router-outlet />
-  `,
+    selector: 'app-root',
+    imports: [RouterOutlet, RouterLink, RouterLinkActive],
+    template: `
+        <nav>
+            <a
+                routerLink="/home"
+                routerLinkActive="active"
+                >Home</a
+            >
+            <a
+                routerLink="/about"
+                routerLinkActive="active"
+                >About</a
+            >
+        </nav>
+        <router-outlet />
+    `,
 })
 export class App {}
 ```
@@ -54,29 +62,27 @@ Load feature modules on demand:
 ```typescript
 // app.routes.ts
 export const routes: Routes = [
-  { path: "", redirectTo: "/home", pathMatch: "full" },
-  { path: "home", component: Home },
+    { path: '', redirectTo: '/home', pathMatch: 'full' },
+    { path: 'home', component: Home },
 
-  // Lazy load entire feature
-  {
-    path: "admin",
-    loadChildren: () =>
-      import("./admin/admin.routes").then((m) => m.adminRoutes),
-  },
+    // Lazy load entire feature
+    {
+        path: 'admin',
+        loadChildren: () => import('./admin/admin.routes').then((m) => m.adminRoutes),
+    },
 
-  // Lazy load single component
-  {
-    path: "settings",
-    loadComponent: () =>
-      import("./settings/settings.component").then((m) => m.Settings),
-  },
+    // Lazy load single component
+    {
+        path: 'settings',
+        loadComponent: () => import('./settings/settings.component').then((m) => m.Settings),
+    },
 ];
 
 // admin/admin.routes.ts
 export const adminRoutes: Routes = [
-  { path: "", component: AdminDashboard },
-  { path: "users", component: AdminUsers },
-  { path: "settings", component: AdminSettings },
+    { path: '', component: AdminDashboard },
+    { path: 'users', component: AdminUsers },
+    { path: 'settings', component: AdminSettings },
 ];
 ```
 
@@ -110,10 +116,10 @@ Enable with `withComponentInputBinding()`:
 
 ```typescript
 // app.config.ts
-import { provideRouter, withComponentInputBinding } from "@angular/router";
+import { provideRouter, withComponentInputBinding } from '@angular/router';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes, withComponentInputBinding())],
+    providers: [provideRouter(routes, withComponentInputBinding())],
 };
 ```
 
@@ -282,25 +288,25 @@ export class UserDetail {
 ```typescript
 // Parent route with children
 export const routes: Routes = [
-  {
-    path: "products",
-    component: ProductsLayout,
-    children: [
-      { path: "", component: ProductList },
-      { path: ":id", component: ProductDetail },
-      { path: ":id/edit", component: ProductEdit },
-    ],
-  },
+    {
+        path: 'products',
+        component: ProductsLayout,
+        children: [
+            { path: '', component: ProductList },
+            { path: ':id', component: ProductDetail },
+            { path: ':id/edit', component: ProductEdit },
+        ],
+    },
 ];
 
 // ProductsLayout
 @Component({
-  imports: [RouterOutlet],
-  template: `
-    <h1>Products</h1>
-    <router-outlet />
-    <!-- Child routes render here -->
-  `,
+    imports: [RouterOutlet],
+    template: `
+        <h1>Products</h1>
+        <router-outlet />
+        <!-- Child routes render here -->
+    `,
 })
 export class ProductsLayout {}
 ```