@aliaksei-raketski/pi-angular-developer 0.1.0

package/skills/angular-developer/references/loading-strategies.md

@@ -0,0 +1,61 @@
+# Route Loading Strategies
+
+Angular supports two main strategies for loading routes and components to balance initial load time and navigation responsiveness.
+
+## Eager Loading
+
+Components are bundled into the initial JavaScript payload and are available immediately.
+
+```ts
+{ path: 'home', component: Home }
+```
+
+- **Pros**: Seamless transitions.
+- **Cons**: Increases initial bundle size.
+
+## Lazy Loading
+
+Components or routes are loaded only when the user navigates to them. This creates separate JavaScript "chunks".
+
+### Lazy Loading Components
+
+Use `loadComponent` to fetch the component on demand.
+
+```ts
+{
+  path: 'admin',
+  loadComponent: () => import('./admin/admin.component').then(m => m.AdminComponent)`,
+}
+```
+
+### Lazy Loading Child Routes
+
+Use `loadChildren` to fetch a set of routes.
+
+```ts
+{
+  path: 'settings',
+  loadChildren: () => import('./settings/settings.routes'),
+}
+```
+
+## Injection Context and Lazy Loading
+
+Loader functions run within the **injection context** of the current route. This allows you to call `inject()` to make context-aware loading decisions.
+
+```ts
+{
+  path: 'dashboard',
+  loadComponent: () => {
+    const flags = inject(FeatureFlags);
+    return flags.isPremium
+      ? import('./premium-dashboard')
+      : import('./basic-dashboard');
+  },
+}
+```
+
+## Recommendation
+
+- Use **Eager Loading** for the primary landing pages.
+- Use **Lazy Loading** for all other feature areas to keep the initial bundle small.

package/skills/angular-developer/references/migrations.md

@@ -0,0 +1,30 @@
+# Automatic Migrations & Code Modernization
+
+When tasked with refactoring or modernizing an existing codebase, always prefer using the official automated schematics available in `@angular/core` over manual text replacement.
+
+## Discovering Migrations
+
+To view all available schematics for the installed version of the core framework, run:
+`ng generate @angular/core: --help`
+
+## Common Migration Schematics
+
+Use the following commands to apply specific syntax updates. You can scope these commands to a specific project or directory using the `--project <name>` or `--path <dir>` flags.
+
+| Feature to Modernize      | Command to Execute                                          |
+| :------------------------ | :---------------------------------------------------------- |
+| **Built-in Control Flow** | `ng generate @angular/core:control-flow`                    |
+| **Signal-based Inputs**   | `ng generate @angular/core:signal-input-migration`          |
+| **Signal Queries**        | `ng generate @angular/core:signal-queries-migration`        |
+| **Functional Outputs**    | `ng generate @angular/core:output-migration`                |
+| **`inject()` Function**   | `ng generate @angular/core:inject`                          |
+| **Self-Closing Tags**     | `ng generate @angular/core:self-closing-tag`                |
+| **Standalone**            | `ng generate @angular/core:standalone` (See workflow below) |
+
+## Specialized Workflow: Migrating to Standalone
+
+The Standalone migration is an interactive, multi-step refactoring. You **MUST** perform this in three discrete stages, verifying that the application builds and runs correctly after each stage completes:
+
+1. **Phase 1**: Run `ng generate @angular/core:standalone` and select the option to **Convert all components, directives, and pipes to standalone**.
+2. **Phase 2**: Verify the build with `ng build`. Run the command again and select **Remove unnecessary NgModule classes**.
+3. **Phase 3**: Verify the build with `ng build`. Run the final pass and select **Bootstrap the project using standalone APIs**.

package/skills/angular-developer/references/navigate-to-routes.md

@@ -0,0 +1,69 @@
+# Navigate to Routes
+
+Angular provides both declarative and programmatic ways to navigate between routes.
+
+## Declarative Navigation (`RouterLink`)
+
+Use the `RouterLink` directive on anchor elements.
+
+```ts
+import {RouterLink, RouterLinkActive} from '@angular/router';
+
+@Component({
+  imports: [RouterLink, RouterLinkActive],
+  template: `
+    <nav>
+      <a routerLink="/dashboard" routerLinkActive="active-link">Dashboard</a>
+      <a [routerLink]="['/user', userId]">Profile</a>
+    </nav>
+  `,
+})
+export class Nav {
+  userId = '123';
+}
+```
+
+- **Absolute Paths**: Start with `/` (e.g., `/settings`).
+- **Relative Paths**: No leading `/`. Use `../` to go up a level.
+
+## Programmatic Navigation (`Router`)
+
+Inject the `Router` service to navigate via TypeScript code.
+
+### `router.navigate()`
+
+Uses an array of commands.
+
+```ts
+private router = inject(Router);
+private route = inject(ActivatedRoute);
+
+// Standard navigation
+this.router.navigate(['/profile']);
+
+// With parameters
+this.router.navigate(['/search'], {
+  queryParams: { q: 'angular' },
+  fragment: 'results'
+});
+
+// Relative navigation
+this.router.navigate(['edit'], { relativeTo: this.route });
+```
+
+### `router.navigateByUrl()`
+
+Uses a string path. Ideal for absolute navigation or full URLs.
+
+```ts
+this.router.navigateByUrl('/products/123?view=details');
+
+// Replace current entry in history
+this.router.navigateByUrl('/login', {replaceUrl: true});
+```
+
+## URL Parameters
+
+- **Route Params**: Part of the path (e.g., `/user/123`).
+- **Query Params**: After the `?` (e.g., `/search?q=query`).
+- **Matrix Params**: Scoped to a segment (e.g., `/products;category=books`).

package/skills/angular-developer/references/outputs.md

@@ -0,0 +1,86 @@
+# Outputs (Custom Events)
+
+Outputs allow a child component to emit custom events that a parent component can listen to. Angular recommends using the new `output()` function for modern applications.
+
+## Function-based outputs
+
+Declare outputs using the `output()` function. This returns an `OutputEmitterRef`.
+
+```ts
+import {Component, output} from '@angular/core';
+
+@Component({
+  selector: 'custom-slider',
+  template: `<button (click)="changeValue(50)">Set to 50</button>`,
+})
+export class CustomSlider {
+  // Output without event data
+  readonly panelClosed = output<void>();
+
+  // Output with event data (number)
+  readonly valueChanged = output<number>();
+
+  changeValue(newValue: number) {
+    this.valueChanged.emit(newValue);
+  }
+}
+```
+
+### Usage in Template
+
+Bind to the output event using parentheses `()`. If the event emits data, access it using the special `$event` variable.
+
+```html
+<custom-slider (panelClosed)="savePanelState()" (valueChanged)="logValue($event)" />
+```
+
+## Configuration Options
+
+The `output` function accepts a config object to specify an alias.
+
+```ts
+@Component({...})
+export class CustomSlider {
+  // The event is named 'valueChanged' in the template,
+  // but accessed as 'changed' in the component class.
+  readonly changed = output<number>({ alias: 'valueChanged' });
+}
+```
+
+## Programmatic Subscription
+
+When creating components dynamically, you can subscribe to outputs programmatically:
+
+```ts
+const componentRef = viewContainerRef.createComponent(CustomSlider);
+
+const subscription = componentRef.instance.valueChanged.subscribe((val) => {
+  console.log('Value changed:', val);
+});
+
+// Clean up manually if needed (Angular cleans up destroyed components automatically)
+subscription.unsubscribe();
+```
+
+## Decorator-based Outputs (@Output)
+
+The legacy API uses the `@Output()` decorator with an `EventEmitter`. It remains supported but is not recommended for new code.
+
+```ts
+import { Component, Output, EventEmitter } from '@angular/core';
+
+@Component({...})
+export class LegacyExample {
+  @Output() readonly valueChanged = new EventEmitter<number>();
+
+  // With alias
+  @Output('customEventName') readonly changed = new EventEmitter<void>();
+}
+```
+
+## Best Practices
+
+- **Prefer `output()`**: Use the function-based `output()` instead of `@Output()` and `EventEmitter`.
+- **Naming**: Use `camelCase` for output names. Avoid prefixing with `on` (e.g., use `valueChanged` instead of `onValueChanged`).
+- **No DOM Bubbling**: Angular custom events do not bubble up the DOM tree like native events.
+- **Avoid Collisions**: Do not choose names that collide with native DOM events (like `click` or `submit`).

package/skills/angular-developer/references/reactive-forms.md

@@ -0,0 +1,118 @@
+# Reactive Forms
+
+Reactive forms provide a model-driven approach to handling form inputs. They are built around observable streams and provide synchronous access to the data model, making them more scalable and testable than template-driven forms.
+
+## Core Classes
+
+Reactive forms are built using these fundamental classes from `@angular/forms`:
+
+- `FormControl`: Manages the value and validity of an individual input.
+- `FormGroup`: Manages a group of controls (an object-like structure).
+- `FormArray`: Manages a numerically indexed array of controls.
+- `FormBuilder`/`NonNullableFormBuilder`: A service that provides factory methods for creating control instances.
+
+## Setup
+
+Import `ReactiveFormsModule` into your component.
+
+```ts
+import {Component, inject} from '@angular/core';
+import {ReactiveFormsModule, NonNullableFormBuilder, Validators} from '@angular/forms';
+
+@Component({
+  selector: 'app-profile-editor',
+  imports: [ReactiveFormsModule],
+  templateUrl: './profile-editor.component.html',
+})
+export class ProfileEditor {
+  private readonly fb = inject(NonNullableFormBuilder);
+
+  // Using FormBuilder for concise definition
+  protected readonly profileForm = this.fb.group({
+    firstName: ['', Validators.required],
+    lastName: '',
+    address: this.fb.group({
+      street: '',
+      city: '',
+    }),
+    aliases: this.fb.array([this.fb.control('')]),
+  });
+
+  protected onSubmit() {
+    console.warn(this.profileForm.value);
+  }
+}
+```
+
+## Template Binding
+
+Use directives to bind the model to the view:
+
+- `[formGroup]`: Binds a `FormGroup` to a `<form>` or `<div>`.
+- `formControlName`: Binds a named control within a group to an input.
+- `formGroupName`: Binds a nested `FormGroup`.
+- `formArrayName`: Binds a nested `FormArray`.
+- `[formControl]`: Binds a standalone `FormControl`.
+
+```html
+<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
+  <input type="text" formControlName="firstName" />
+
+  <div formGroupName="address">
+    <input type="text" formControlName="street" />
+  </div>
+
+  <div formArrayName="aliases">
+    @for (alias of profileForm.controls.aliases.controls; track alias) {
+    <input type="text" [formControlName]="$index" />
+    }
+  </div>
+
+  <button type="submit" [disabled]="!profileForm.valid">Submit</button>
+</form>
+```
+
+## Accessing Controls
+
+Use `.controls` for easy access to controls.
+
+```ts
+addAlias() {
+  this.profileForm.controls.aliases.push(this.fb.control(''));
+}
+```
+
+## Updating Values
+
+- `patchValue()`: Updates only the specified properties. Fails silently on structural mismatches.
+- `setValue()`: Replaces the entire model. Strictly enforces the form structure.
+
+```ts
+updateProfile() {
+  this.profileForm.patchValue({
+    firstName: 'Nancy',
+    address: { street: '123 Drew Street' }
+  });
+}
+```
+
+## Unified Change Events
+
+Modern Angular (v18+) provides a single `events` observable on all controls to track value, status, pristine, touched, reset, and submit events.
+
+```ts
+import {ValueChangeEvent, StatusChangeEvent} from '@angular/forms';
+
+this.profileForm.events.subscribe((event) => {
+  if (event instanceof ValueChangeEvent) {
+    console.log('New value:', event.value);
+  }
+});
+```
+
+## Manual State Management
+
+- `markAsTouched()` / `markAllAsTouched()`: Useful for showing validation errors on submit.
+- `markAsDirty()` / `markAsPristine()`: Tracks if the value has been modified.
+- `updateValueAndValidity()`: Manually triggers recalculation of value and status.
+- Options `{ emitEvent: false }` or `{ onlySelf: true }` can be passed to most methods to control propagation.

package/skills/angular-developer/references/rendering-strategies.md

@@ -0,0 +1,44 @@
+# Rendering Strategies
+
+Angular supports multiple rendering strategies to optimize for SEO, performance, and interactivity.
+
+## 1. Client-Side Rendering (CSR)
+
+**Default Strategy.** Content is rendered entirely in the browser.
+
+- **Use case**: Interactive dashboards, internal tools.
+- **Pros**: Simplest to configure, low server cost.
+- **Cons**: Poor SEO, slower initial content visibility (must wait for JS).
+
+## 2. Static Site Generation (SSG / Prerendering)
+
+Content is pre-rendered into static HTML files at **build time**.
+
+- **Use case**: Marketing pages, blogs, documentation.
+- **Pros**: Fastest initial load, excellent SEO, CDN-friendly.
+- **Cons**: Requires rebuild for content updates, not for user-specific data.
+
+## 3. Server-Side Rendering (SSR)
+
+Content is rendered on the server for the **initial request**. Subsequent navigations happen client-side (SPA style).
+
+- **Use case**: E-commerce product pages, news sites, personalized dynamic content.
+- **Pros**: Excellent SEO, fast initial content visibility.
+- **Cons**: Requires a server (Node.js), higher server cost/latency.
+
+## Hydration
+
+Hydration is the process of making server-rendered HTML interactive in the browser.
+
+- **Full Hydration**: The entire app becomes interactive at once.
+- **Incremental Hydration**: (Advanced) Parts become interactive as needed using `@defer` blocks.
+- **Event Replay**: Captures and replays user events that happened before hydration finished.
+
+## Decision Matrix
+
+| Requirement                     | Strategy             |
+| :------------------------------ | :------------------- |
+| **SEO + Static Content**        | SSG                  |
+| **SEO + Dynamic Content**       | SSR                  |
+| **No SEO + High Interactivity** | CSR                  |
+| **Mixed**                       | Hybrid (Route-based) |

package/skills/angular-developer/references/resource.md

@@ -0,0 +1,74 @@
+# Async Reactivity with `resource`
+
+A `Resource` incorporates asynchronous data fetching into Angular's signal-based reactivity. It executes an async loader function whenever its dependencies change, exposing the status and result as synchronous signals.
+
+## Basic Usage
+
+The `resource` function accepts an options object with two main properties:
+
+1. `params`: A reactive computation (like `computed`). When signals read here change, the resource re-fetches.
+2. `loader`: An async function that fetches data based on the parameters.
+
+```ts
+import { Component, resource, signal, computed } from '@angular/core';
+
+@Component({...})
+export class UserProfile {
+  protected readonly userId = signal('123');
+
+  protected readonly userResource = resource({
+    // Reactively tracking userId
+    params: () => ({ id: this.userId() }),
+
+    // Executes whenever params change
+    loader: async ({ params, abortSignal }) => {
+      const response = await fetch(`/api/users/${params.id}`, { signal: abortSignal });
+      if (!response.ok) throw new Error('Network error');
+      return response.json();
+    }
+  });
+
+  // Use the resource value in computed signals
+  protected readonly userName = computed(() => {
+    if (this.userResource.hasValue()) {
+      return this.userResource.value()?.name;
+    } else {
+      return 'Loading...';
+    }
+  });
+}
+```
+
+## Aborting Requests
+
+If the `params` signal changes while a previous loader is still running, the `Resource` will attempt to abort the outstanding request using the provided `abortSignal`. **Always pass `abortSignal` to your `fetch` calls.**
+
+## Reloading Data
+
+You can imperatively force the resource to re-run the loader without the params changing by calling `.reload()`.
+
+```ts
+this.userResource.reload();
+```
+
+## Resource Status Signals
+
+The `Resource` object provides several signals to read its current state:
+
+- `value()`: The resolved data, or `undefined`.
+- `hasValue()`: Type-guard boolean. `true` if a value exists.
+- `isLoading()`: Boolean indicating if the loader is currently running.
+- `error()`: The error thrown by the loader, or `undefined`.
+- `status()`: A string constant representing the exact state (`'idle'`, `'loading'`, `'resolved'`, `'error'`, `'reloading'`, `'local'`).
+
+## Local Mutation
+
+You can optimistically update the resource's value directly. This changes the status to `'local'`.
+
+```ts
+this.userResource.value.set({name: 'Optimistic Update'});
+```
+
+## Reactive Data Fetching with `httpResource`
+
+If you are using Angular's `HttpClient`, prefer using `httpResource`. It is a specialized wrapper that leverages the Angular HTTP stack (including interceptors) while providing the same signal-based resource API.

package/skills/angular-developer/references/route-animations.md

@@ -0,0 +1,56 @@
+# Route Transition Animations
+
+Angular Router supports the browser's **View Transitions API** for smooth visual transitions between routes.
+
+## Enabling View Transitions
+
+Add `withViewTransitions()` to your router configuration.
+
+```ts
+provideRouter(routes, withViewTransitions());
+```
+
+This is a **progressive enhancement**. In browsers that don't support the API, the router will still work but without the transition animation.
+
+## How it Works
+
+1. Browser takes a screenshot of the old state.
+2. Router updates the DOM (activates new component).
+3. Browser takes a screenshot of the new state.
+4. Browser animates between the two states.
+
+## Customizing with CSS
+
+Transitions are customized in **global CSS files** (not component-scoped CSS).
+
+Use the `::view-transition-old()` and `::view-transition-new()` pseudo-elements.
+
+```css
+/* Example: Cross-fade + Slide */
+::view-transition-old(root) {
+  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out;
+}
+::view-transition-new(root) {
+  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in;
+}
+```
+
+## Advanced Control
+
+Use `onViewTransitionCreated` to skip transitions or customize behavior based on the navigation context.
+
+```ts
+withViewTransitions({
+  onViewTransitionCreated: ({transition, from, to}) => {
+    // Skip animation for specific routes
+    if (to.url === '/no-animation') {
+      transition.skipTransition();
+    }
+  },
+});
+```
+
+## Best Practices
+
+- **Global Styles**: Always define transition animations in `styles.css` to avoid view encapsulation issues.
+- **View Transition Names**: Assign unique `view-transition-name` to elements that should transition smoothly across routes (e.g., a header image).

package/skills/angular-developer/references/route-guards.md

@@ -0,0 +1,52 @@
+# Route Guards
+
+Route guards control whether a user can navigate to or leave a route.
+
+## Types of Guards
+
+- **`CanActivate`**: Can the user access this route? (e.g., Auth check).
+- **`CanActivateChild`**: Can the user access children of this route?
+- **`CanDeactivate`**: Can the user leave this route? (e.g., Unsaved changes).
+- **`CanMatch`**: Should this route even be considered for matching? (e.g., Feature flags). If it returns `false`, the router continues checking other routes.
+
+## Creating a Guard
+
+Guards are typically functional since Angular 15.
+
+```ts
+export const authGuard: CanActivateFn = (route, state) => {
+  const authService = inject(AuthService);
+  const router = inject(Router);
+
+  if (authService.isLoggedIn()) {
+    return true;
+  }
+
+  // Redirect to login
+  return router.parseUrl('/login');
+};
+```
+
+## Applying Guards
+
+Add them to the route configuration as an array. They execute in order.
+
+```ts
+{
+  path: 'admin',
+  component: Admin,
+  canActivate: [authGuard],
+  canActivateChild: [adminChildGuard],
+  canDeactivate: [unsavedChangesGuard]
+}
+```
+
+## Return Values
+
+- `boolean`: `true` to allow, `false` to block.
+- `UrlTree` or `RedirectCommand`: Redirect to a different route.
+- `Observable` or `Promise`: Resolves to the above types.
+
+## Security Note
+
+**Client-side guards are NOT a substitute for server-side security.** Always verify permissions on the server.

package/skills/angular-developer/references/router-lifecycle.md

@@ -0,0 +1,45 @@
+# Router Lifecycle and Events
+
+Angular Router emits events through the `Router.events` observable, allowing you to track the navigation lifecycle from start to finish.
+
+## Common Router Events (Chronological)
+
+1. **`NavigationStart`**: Navigation begins.
+2. **`RoutesRecognized`**: Router matches the URL to a route.
+3. **`GuardsCheckStart` / `End`**: Evaluation of `canActivate`, `canMatch`, etc.
+4. **`ResolveStart` / `End`**: Data resolution phase (fetching data via resolvers).
+5. **`NavigationEnd`**: Navigation completed successfully.
+6. **`NavigationCancel`**: Navigation canceled (e.g., guard returned `false`).
+7. **`NavigationError`**: Navigation failed (e.g., error in resolver).
+
+## Subscribing to Events
+
+Inject the `Router` and filter the `events` observable.
+
+```ts
+import {Router, NavigationStart, NavigationEnd} from '@angular/router';
+
+export class MyService {
+  private router = inject(Router);
+
+  constructor() {
+    this.router.events.pipe(filter((e) => e instanceof NavigationEnd)).subscribe((event) => {
+      console.log('Navigated to:', event.url);
+    });
+  }
+}
+```
+
+## Debugging
+
+Enable detailed console logging of all routing events during application bootstrap.
+
+```ts
+provideRouter(routes, withDebugTracing());
+```
+
+## Common Use Cases
+
+- **Loading Indicators**: Show a spinner when `NavigationStart` fires and hide it on `NavigationEnd`/`Cancel`/`Error`.
+- **Analytics**: Track page views by listening for `NavigationEnd`.
+- **Scroll Management**: Respond to `Scroll` events for custom scroll behavior.