theus-cli-darwin-x64 0.2.84

package/vendor/theus-arsenal/skills/patrones-angular/references/e2e-testing.md

@@ -0,0 +1,56 @@
+# Pruebas end-to-end (E2E)
+
+Usa pruebas E2E para cubrir los recorridos de usuario críticos en un navegador real. Prefiere el framework ya configurado en el workspace de Angular, como Cypress o Playwright.
+
+## Ejecutar pruebas E2E
+
+Revisa `package.json` y `angular.json` para encontrar el comando específico del proyecto. Patrones comunes:
+
+```shell
+npm run e2e
+pnpm e2e
+ng e2e
+```
+
+Cuando la app debe compilarse o servirse primero, usa los scripts existentes del proyecto en lugar de inventar un punto de entrada de pruebas paralelo.
+
+## Estructura de las pruebas
+
+- Mantén los specs E2E cerca del framework de pruebas configurado, como `cypress/e2e/` o `e2e/`.
+- Coloca los helpers reutilizables de login/configuración en el directorio de soporte del framework.
+- Mantén los fixtures explícitos y lo bastante pequeños como para que cada prueba pueda explicar el estado de usuario del que depende.
+
+### Ejemplo con Cypress
+
+```typescript
+describe('Flujo de inicio de sesión', () => {
+  it('redirige al panel con credenciales válidas', () => {
+    cy.visit('/login');
+    cy.get('[data-cy=email]').type('user@example.com');
+    cy.get('[data-cy=password]').type('password123');
+    cy.get('[data-cy=submit]').click();
+    cy.url().should('include', '/dashboard');
+  });
+});
+```
+
+### Ejemplo con Playwright
+
+```typescript
+import {expect, test} from '@playwright/test';
+
+test('redirige al panel con credenciales válidas', async ({page}) => {
+  await page.goto('/login');
+  await page.getByLabel('Email').fill('user@example.com');
+  await page.getByLabel('Password').fill('password123');
+  await page.getByRole('button', {name: 'Sign in'}).click();
+  await expect(page).toHaveURL(/dashboard/);
+});
+```
+
+## Buenas prácticas
+
+- Prefiere localizadores accesibles (`getByRole`, `getByLabel`) o atributos `data-*` estables.
+- Evita selectores que dependan de clases CSS, de la profundidad del DOM o de texto incidental.
+- Espera estados de UI, rutas o respuestas de red específicos en lugar de esperas arbitrarias.
+- Mantén los smoke tests cortos y reserva la cobertura de flujos completos para las rutas de mayor valor.

package/vendor/theus-arsenal/skills/patrones-angular/references/effects.md

@@ -0,0 +1,83 @@
+# Efectos secundarios con `effect` y `afterRenderEffect`
+
+En Angular, un **effect** es una operación que se ejecuta cada vez que cambian uno o más valores de las signals que rastrea.
+
+## Cuándo usar `effect`
+
+Los effects están pensados para sincronizar estado de signals con APIs imperativas ajenas a signals.
+
+**Casos de uso válidos:**
+
+- Registrar analíticas.
+- Sincronizar estado con `localStorage` o `sessionStorage`.
+- Renderizado personalizado en un `<canvas>` o una librería de gráficos de terceros.
+
+**REGLA CRÍTICA: NO uses effects para propagar estado.**
+Si te descubres usando `.set()` o `.update()` sobre una signal _dentro_ de un effect para mantener dos signals sincronizadas, estás cometiendo un error. Eso provoca errores `ExpressionChangedAfterItHasBeenChecked` y bucles infinitos. **Usa siempre `computed()` o `linkedSignal()` para derivar estado.**
+
+## Uso básico
+
+Los effects se ejecutan de forma asíncrona durante el proceso de detección de cambios. Siempre se ejecutan al menos una vez.
+
+```ts
+import { Component, signal, effect } from '@angular/core';
+
+@Component({...})
+export class Example {
+  count = signal(0);
+
+  constructor() {
+    // El effect debe crearse en un contexto de inyección (p. ej., un constructor)
+    effect((onCleanup) => {
+      console.log(`El conteo cambió a ${this.count()}`);
+
+      const timer = setTimeout(() => console.log('Temporizador finalizado'), 1000);
+
+      // La función de limpieza se ejecuta antes de la siguiente ejecución, o al destruirse
+      onCleanup(() => clearTimeout(timer));
+    });
+  }
+}
+```
+
+## Manipulación del DOM con `afterRenderEffect`
+
+El `effect` estándar se ejecuta _antes_ de que Angular actualice el DOM. Si necesitas inspeccionar o modificar manualmente el DOM en respuesta a un cambio de signal (p. ej., al integrar una librería de UI de terceros), usa `afterRenderEffect`.
+
+`afterRenderEffect` se ejecuta después de que Angular haya terminado de renderizar el DOM.
+
+### Fases de renderizado
+
+Para prevenir reflows (thrashing de layout forzado), `afterRenderEffect` te obliga a dividir tus lecturas y escrituras del DOM en fases específicas.
+
+```ts
+import { Component, afterRenderEffect, viewChild, ElementRef } from '@angular/core';
+
+@Component({...})
+export class Chart {
+  canvas = viewChild.required<ElementRef>('canvas');
+
+  constructor() {
+    afterRenderEffect({
+      // 1. Leer del DOM
+      earlyRead: () => {
+        return this.canvas().nativeElement.getBoundingClientRect().width;
+      },
+      // 2. Escribir en el DOM (recibe el resultado de la fase anterior)
+      write: (width) => {
+        // NUNCA leas del DOM en la fase write.
+        setupChart(this.canvas().nativeElement, width);
+      }
+    });
+  }
+}
+```
+
+**Fases disponibles (ejecutadas en este orden):**
+
+1. `earlyRead`
+2. `write` (nunca leas aquí)
+3. `mixedReadWrite` (evítala si es posible)
+4. `read` (nunca escribas aquí)
+
+_Nota: `afterRenderEffect` solo se ejecuta en el cliente, nunca durante el renderizado en servidor (SSR)._

package/vendor/theus-arsenal/skills/patrones-angular/references/hierarchical-injectors.md

@@ -0,0 +1,43 @@
+# Inyectores jerárquicos
+
+El sistema de inyección de dependencias de Angular es jerárquico, lo que significa que los servicios pueden acotarse a distintos niveles de la aplicación.
+
+## Tipos de jerarquías de inyectores
+
+1. **Jerarquía de `EnvironmentInjector`**: se configura mediante `@Injectable({ providedIn: 'root' })` o `ApplicationConfig.providers` durante el bootstrap. Son singletons globales.
+2. **Jerarquía de `ElementInjector`**: se crea implícitamente en cada elemento del DOM. Se configura mediante los arrays `providers` o `viewProviders` en `@Component()` o `@Directive()`.
+
+## Reglas de resolución
+
+Cuando se solicita una dependencia, Angular la resuelve en dos fases:
+
+1. Busca hacia arriba en el árbol de **`ElementInjector`**, empezando por el componente/directiva que la solicita hasta el elemento raíz.
+2. Si no la encuentra, busca en el árbol de **`EnvironmentInjector`**, desde el inyector de entorno más cercano hasta la raíz.
+3. Si aun así no la encuentra, lanza un error (salvo que esté marcada como opcional).
+
+## Modificadores de resolución
+
+Puedes alterar cómo Angular busca una dependencia usando el objeto de opciones de `inject()`:
+
+- **`optional`**: si no se encuentra la dependencia, devuelve `null` en lugar de lanzar un error.
+- **`self`**: solo revisa el `ElementInjector` actual. No sube por el árbol de padres.
+- **`skipSelf`**: empieza a buscar en el `ElementInjector` padre, saltándose el elemento actual.
+- **`host`**: detiene la búsqueda al alcanzar la frontera de la vista del componente host.
+
+```ts
+@Component({...})
+export class Example {
+  // Devuelve null si no se encuentra, en lugar de fallar
+  optionalService = inject(MyService, { optional: true });
+
+  // Se salta los providers de este componente y mira en el padre
+  parentService = inject(ParentService, { skipSelf: true });
+}
+```
+
+## `providers` vs. `viewProviders`
+
+Al proveer un servicio a nivel de componente:
+
+- **`providers`**: el servicio está disponible para el componente, su vista (plantilla) y cualquier **contenido proyectado** (`<ng-content>`).
+- **`viewProviders`**: el servicio está disponible para el componente y su vista, pero **NO** para el contenido proyectado. Úsalo para aislar servicios del contenido que pasan los consumidores.

package/vendor/theus-arsenal/skills/patrones-angular/references/host-elements.md

@@ -0,0 +1,80 @@
+# Elementos host de componentes
+
+El **elemento host** es el elemento del DOM que coincide con el selector de un componente. La plantilla del componente se renderiza dentro de este elemento.
+
+## Enlazar al elemento host
+
+Usa la propiedad `host` del decorador `@Component` para enlazar propiedades, atributos, estilos y eventos al elemento host. Este es el **enfoque preferido** frente a los decoradores heredados.
+
+```ts
+@Component({
+  selector: 'custom-slider',
+  host: {
+    'role': 'slider', // Atributo estático
+    '[attr.aria-valuenow]': 'value', // Enlace de atributo
+    '[class.active]': 'isActive()', // Enlace de clase
+    '[style.color]': 'color()', // Enlace de estilo
+    '[tabIndex]': 'disabled ? -1 : 0', // Enlace de propiedad
+    '(keydown)': 'onKeyDown($event)', // Enlace de evento
+  },
+})
+export class CustomSlider {
+  value = 0;
+  disabled = false;
+  isActive = signal(false);
+  color = signal('blue');
+
+  onKeyDown(event: KeyboardEvent) {
+    /* ... */
+  }
+}
+```
+
+## Decoradores heredados
+
+`@HostBinding` y `@HostListener` se soportan por compatibilidad hacia atrás, pero deben evitarse en código nuevo.
+
+```ts
+export class CustomSlider {
+  @HostBinding('tabIndex')
+  get tabIndex() {
+    return this.disabled ? -1 : 0;
+  }
+
+  @HostListener('keydown', ['$event'])
+  onKeyDown(event: KeyboardEvent) {
+    /* ... */
+  }
+}
+```
+
+## Colisiones de enlaces
+
+Si tanto el componente (enlace host) como el consumidor (enlace en plantilla) enlazan a la misma propiedad:
+
+1. **Estático vs. estático**: gana el enlace de la instancia (consumidor).
+2. **Estático vs. dinámico**: gana el enlace dinámico.
+3. **Dinámico vs. dinámico**: gana el enlace host del componente.
+
+## Inyectar atributos del host
+
+Usa `HostAttributeToken` con la función `inject` para leer atributos estáticos del elemento host en el momento de la construcción.
+
+```ts
+import {Component, HostAttributeToken, inject} from '@angular/core';
+
+@Component({
+  selector: 'app-btn',
+  template: `<ng-content />`,
+})
+export class AppButton {
+  // Lanza un error si falta 'type', salvo que se inyecte con { optional: true }
+  type = inject(new HostAttributeToken('type'));
+}
+```
+
+Uso:
+
+```html
+<app-btn type="primary">Haz clic</app-btn>
+```

package/vendor/theus-arsenal/skills/patrones-angular/references/injection-context.md

@@ -0,0 +1,63 @@
+# Contexto de inyección
+
+La función `inject()` solo puede usarse cuando el código se ejecuta dentro de un **contexto de inyección**.
+
+## ¿Dónde está disponible un contexto de inyección?
+
+Un contexto de inyección está disponible automáticamente en:
+
+1. **Inicializadores de campos** de clases instanciadas por la DI (`@Injectable`, `@Component`, `@Directive`, `@Pipe`).
+2. **Constructores** de clases instanciadas por la DI.
+3. **Funciones de fábrica** especificadas en `useFactory` o en configuraciones de `InjectionToken`.
+4. **APIs funcionales** ejecutadas por Angular (p. ej., guards de ruta funcionales, resolvers, interceptores).
+
+```ts
+@Component({...})
+export class Example {
+  // Válido: inicializador de campo
+  private router = inject(Router);
+
+  constructor() {
+    // Válido: constructor
+    const http = inject(HttpClient);
+  }
+
+  onClick() {
+    // Inválido: no es un contexto de inyección
+    // const auth = inject(AuthService);
+  }
+}
+```
+
+## `runInInjectionContext`
+
+Si necesitas ejecutar una función dentro de un contexto de inyección (a menudo necesario para la creación dinámica de componentes o en pruebas), usa `runInInjectionContext`. Requiere acceso a un inyector existente (como `EnvironmentInjector` o `Injector`).
+
+```ts
+import {Injectable, inject, EnvironmentInjector, runInInjectionContext} from '@angular/core';
+
+@Injectable({providedIn: 'root'})
+export class MyService {
+  private injector = inject(EnvironmentInjector);
+
+  doSomethingDynamic() {
+    runInInjectionContext(this.injector, () => {
+      // Ahora es válido usar inject() aquí
+      const router = inject(Router);
+    });
+  }
+}
+```
+
+## `assertInInjectionContext`
+
+Usa `assertInInjectionContext` en funciones de utilidad para garantizar que se llamen desde un contexto válido. Lanza un error claro en caso contrario.
+
+```ts
+import {assertInInjectionContext, inject, ElementRef} from '@angular/core';
+
+export function injectNativeElement<T extends Element>(): T {
+  assertInInjectionContext(injectNativeElement);
+  return inject(ElementRef).nativeElement;
+}
+```

package/vendor/theus-arsenal/skills/patrones-angular/references/inputs.md

@@ -0,0 +1,101 @@
+# Inputs
+
+Los inputs permiten que los datos fluyan de un componente padre a uno hijo. Angular recomienda usar la API `input` basada en signals para aplicaciones modernas.
+
+## Inputs basados en signals
+
+Declara los inputs con la función `input()`. Devuelve un `InputSignal`.
+
+```ts
+import {Component, input, computed} from '@angular/core';
+
+@Component({
+  selector: 'app-user',
+  template: `<p>Usuario: {{ name() }} ({{ age() }})</p>`,
+})
+export class User {
+  // Input opcional con valor por defecto
+  name = input('Invitado');
+
+  // Input obligatorio
+  age = input.required<number>();
+
+  // Los inputs son signals reactivas
+  label = computed(() => `Nombre: ${this.name()}`);
+}
+```
+
+### Uso en la plantilla
+
+```html
+<app-user [name]="userName" [age]="25" />
+```
+
+## Opciones de configuración
+
+La función `input` acepta un objeto de configuración:
+
+- **Alias**: cambia el nombre de la propiedad usado en las plantillas.
+- **Transform**: modifica el valor antes de que llegue al componente.
+
+```ts
+import { input, booleanAttribute } from '@angular/core';
+
+@Component({...})
+export class CustomButton {
+  // Ejemplo de alias
+  label = input('', { alias: 'btnLabel' });
+
+  // Ejemplo de transform con el helper integrado
+  disabled = input(false, { transform: booleanAttribute });
+}
+```
+
+## Model inputs (enlace bidireccional)
+
+Usa `model()` para crear un input que soporte enlace de datos bidireccional.
+
+```ts
+@Component({
+  selector: 'custom-counter',
+  template: `<button (click)="increment()">+</button>`,
+})
+export class CustomCounter {
+  value = model(0);
+
+  increment() {
+    this.value.update((v) => v + 1);
+  }
+}
+```
+
+### Uso
+
+```html
+<!-- Enlace bidireccional con una signal -->
+<custom-counter [(value)]="mySignal" />
+
+<!-- Enlace bidireccional con una propiedad simple -->
+<custom-counter [(value)]="myProperty" />
+```
+
+## Inputs con decorador (@Input)
+
+La API heredada sigue soportada, pero no se recomienda para código nuevo.
+
+```ts
+import { Component, Input } from '@angular/core';
+
+@Component({...})
+export class Legacy {
+  @Input({ required: true }) value = 0;
+  @Input({ transform: trimString }) label = '';
+}
+```
+
+## Buenas prácticas
+
+- **Prefiere signals**: usa `input()` en lugar de `@Input()` para mejor reactividad y seguridad de tipos.
+- **Inputs obligatorios**: usa `input.required()` para datos obligatorios y obtener errores en tiempo de compilación.
+- **Transforms puros**: asegura que las funciones de transformación de inputs sean puras y analizables estáticamente.
+- **Evita colisiones**: no uses nombres de input que colisionen con propiedades estándar del DOM (p. ej., `id`, `title`).

package/vendor/theus-arsenal/skills/patrones-angular/references/linked-signal.md

@@ -0,0 +1,59 @@
+# Estado dependiente con `linkedSignal`
+
+La función `linkedSignal` te permite crear estado escribible que está intrínsecamente vinculado a otro estado. Es perfecta para estado que necesita un valor por defecto derivado de un input u otra signal, pero que aun así puede ser modificado de forma independiente por el usuario.
+
+Si el estado fuente cambia, la `linkedSignal` se restablece a un nuevo valor computado.
+
+## Uso básico
+
+Cuando solo necesitas recomputar a partir de una fuente, pasa una función de cálculo. `linkedSignal` funciona como `computed`, pero la signal resultante es escribible (puedes llamar a `.set()` o `.update()` sobre ella).
+
+```ts
+import { Component, signal, linkedSignal } from '@angular/core';
+
+@Component({...})
+export class ShippingMethodPicker {
+  shippingOptions = signal(['Terrestre', 'Aéreo', 'Marítimo']);
+
+  // Por defecto, la primera opción.
+  // Si shippingOptions cambia, selectedOption se restablece a la nueva primera opción.
+  selectedOption = linkedSignal(() => this.shippingOptions()[0]);
+
+  changeShipping(index: number) {
+    // ¡Aun así podemos actualizar esta signal manualmente!
+    this.selectedOption.set(this.shippingOptions()[index]);
+  }
+}
+```
+
+## Uso avanzado: tener en cuenta el estado anterior
+
+A veces, cuando el estado fuente cambia, quieres preservar la selección manual del usuario si sigue siendo válida. Para ello, usa la sintaxis de objeto proporcionando `source` y `computation`.
+
+La función `computation` recibe el nuevo valor de la fuente y un objeto `previous` con el valor anterior de la fuente y el valor anterior de la `linkedSignal`.
+
+```ts
+interface ShippingMethod { id: number; name: string; }
+
+@Component({...})
+export class ShippingMethodPicker {
+  shippingOptions = signal<ShippingMethod[]>([
+    {id: 0, name: 'Terrestre'}, {id: 1, name: 'Aéreo'}, {id: 2, name: 'Marítimo'}
+  ]);
+
+  selectedOption = linkedSignal<ShippingMethod[], ShippingMethod>({
+    source: this.shippingOptions,
+    computation: (newOptions, previous) => {
+      // Si las opciones recién cargadas siguen conteniendo la opción que el usuario
+      // había seleccionado, mantenla seleccionada. Si no, vuelve a la primera opción.
+      return newOptions.find(opt => opt.id === previous?.value.id) ?? newOptions[0];
+    }
+  });
+}
+```
+
+### Cuándo usar `linkedSignal` vs. `computed` vs. `effect`
+
+- Usa `computed`: cuando el estado se deriva **estrictamente** de otro estado y nunca debe actualizarse manualmente.
+- Usa `linkedSignal`: cuando el estado se deriva de otro estado, pero el usuario **debe** poder sobreescribirlo o actualizarlo manualmente.
+- **Nunca** uses `effect` para sincronizar un estado con otro. Es un antipatrón. Usa `computed` o `linkedSignal` en su lugar.

package/vendor/theus-arsenal/skills/patrones-angular/references/loading-strategies.md

@@ -0,0 +1,61 @@
+# Estrategias de carga de rutas
+
+Angular soporta dos estrategias principales para cargar rutas y componentes, equilibrando el tiempo de carga inicial y la fluidez de navegación.
+
+## Carga temprana (eager)
+
+Los componentes se empaquetan en el payload JavaScript inicial y están disponibles de inmediato.
+
+```ts
+{ path: 'home', component: Home }
+```
+
+- **Ventajas**: transiciones fluidas.
+- **Desventajas**: aumenta el tamaño del bundle inicial.
+
+## Carga diferida (lazy)
+
+Los componentes o rutas se cargan solo cuando el usuario navega hacia ellos. Esto crea "chunks" JavaScript separados.
+
+### Carga diferida de componentes
+
+Usa `loadComponent` para obtener el componente bajo demanda.
+
+```ts
+{
+  path: 'admin',
+  loadComponent: () => import('./admin/admin.component').then(m => m.AdminComponent)`,
+}
+```
+
+### Carga diferida de rutas hijas
+
+Usa `loadChildren` para obtener un conjunto de rutas.
+
+```ts
+{
+  path: 'settings',
+  loadChildren: () => import('./settings/settings.routes'),
+}
+```
+
+## Contexto de inyección y carga diferida
+
+Las funciones loader se ejecutan dentro del **contexto de inyección** de la ruta actual. Esto permite llamar a `inject()` para tomar decisiones de carga según el contexto.
+
+```ts
+{
+  path: 'dashboard',
+  loadComponent: () => {
+    const flags = inject(FeatureFlags);
+    return flags.isPremium
+      ? import('./premium-dashboard')
+      : import('./basic-dashboard');
+  },
+}
+```
+
+## Recomendación
+
+- Usa **carga temprana** para las páginas de aterrizaje principales.
+- Usa **carga diferida** para el resto de áreas funcionales, para mantener pequeño el bundle inicial.

package/vendor/theus-arsenal/skills/patrones-angular/references/mcp.md

@@ -0,0 +1,67 @@
+# Servidor MCP de la CLI de Angular
+
+La CLI de Angular incluye un servidor Model Context Protocol (MCP) que permite a los agentes de código (como Theus) interactuar directamente con la CLI de Angular. Provee herramientas para generar código, modernizarlo, obtener ejemplos y ejecutar builds/pruebas.
+
+## Herramientas disponibles (por defecto)
+
+Cuando el servidor MCP está habilitado, el agente tiene acceso a las siguientes herramientas:
+
+| Nombre                      | Descripción                                                                                                      |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------- |
+| `ai_tutor`                  | Lanza un tutor interactivo de Angular impulsado por el modelo.                                                    |
+| `find_examples`             | Encuentra ejemplos de código autorizados y de buenas prácticas para funcionalidades modernas de Angular.          |
+| `get_best_practices`        | Obtiene la Guía de buenas prácticas de Angular (crucial para componentes standalone, formularios tipados, etc.).  |
+| `list_projects`             | Lista todas las aplicaciones y librerías del workspace leyendo `angular.json`.                                    |
+| `onpush_zoneless_migration` | Analiza el código y propone un plan para migrarlo a detección de cambios `OnPush` (prerrequisito para zoneless).  |
+| `search_documentation`      | Busca en la documentación oficial en `https://angular.dev`.                                                       |
+
+## Herramientas experimentales
+
+Algunas herramientas deben habilitarse explícitamente con el flag `--experimental-tool` (o `-E`).
+
+| Nombre                     | Descripción                                                                    |
+| :------------------------- | :------------------------------------------------------------------------------ |
+| `build`                    | Realiza un build puntual con `ng build`.                                        |
+| `devserver.start`          | Inicia asíncronamente un servidor de desarrollo (`ng serve`). Retorna de inmediato. |
+| `devserver.stop`           | Detiene el servidor de desarrollo.                                              |
+| `devserver.wait_for_build` | Devuelve los logs del build más reciente en un servidor de desarrollo en marcha. |
+| `e2e`                      | Ejecuta las pruebas end-to-end.                                                 |
+| `modernize`                | Realiza migraciones de código para alinearlo con las últimas buenas prácticas y sintaxis. |
+| `test`                     | Ejecuta las pruebas unitarias del proyecto.                                     |
+
+## Configuración
+
+Para usar el servidor MCP, configura tu entorno anfitrión para ejecutar `npx @angular/cli mcp`.
+
+### Theus (CLI)
+
+Registra el servidor en la configuración MCP del proyecto (archivo `.mcp.json` en la raíz):
+
+```json
+{
+  "mcpServers": {
+    "angular-cli": {
+      "command": "npx",
+      "args": ["-y", "@angular/cli", "mcp"]
+    }
+  }
+}
+```
+
+### Otros entornos
+
+Cualquier IDE o CLI compatible con MCP puede montar el mismo servidor. La forma del bloque `mcpServers` (a veces `servers`) y la ubicación del archivo de configuración varían según el anfitrión, pero el comando es siempre el mismo: `npx -y @angular/cli mcp`. Consulta la documentación de configuración MCP de tu entorno.
+
+## Opciones del comando
+
+Puedes pasar argumentos al servidor MCP en el array `args` de tu configuración:
+
+- `--read-only`: registra solo las herramientas que no modifican el proyecto.
+- `--local-only`: registra solo las herramientas que no requieren conexión a internet.
+- `--experimental-tool` (`-E`): habilita herramientas experimentales específicas (p. ej., `-E build`, `-E devserver`).
+
+Ejemplo de modo solo lectura con herramientas experimentales habilitadas:
+
+```json
+"args": ["-y", "@angular/cli", "mcp", "--read-only", "-E", "build", "-E", "modernize"]
+```

package/vendor/theus-arsenal/skills/patrones-angular/references/navigate-to-routes.md

@@ -0,0 +1,69 @@
+# Navegar a rutas
+
+Angular ofrece formas declarativas y programáticas de navegar entre rutas.
+
+## Navegación declarativa (`RouterLink`)
+
+Usa la directiva `RouterLink` en elementos ancla.
+
+```ts
+import {RouterLink, RouterLinkActive} from '@angular/router';
+
+@Component({
+  imports: [RouterLink, RouterLinkActive],
+  template: `
+    <nav>
+      <a routerLink="/dashboard" routerLinkActive="active-link">Panel</a>
+      <a [routerLink]="['/user', userId]">Perfil</a>
+    </nav>
+  `,
+})
+export class Nav {
+  userId = '123';
+}
+```
+
+- **Rutas absolutas**: empiezan con `/` (p. ej., `/settings`).
+- **Rutas relativas**: sin `/` inicial. Usa `../` para subir un nivel.
+
+## Navegación programática (`Router`)
+
+Inyecta el servicio `Router` para navegar desde código TypeScript.
+
+### `router.navigate()`
+
+Usa un array de comandos.
+
+```ts
+private router = inject(Router);
+private route = inject(ActivatedRoute);
+
+// Navegación estándar
+this.router.navigate(['/profile']);
+
+// Con parámetros
+this.router.navigate(['/search'], {
+  queryParams: { q: 'angular' },
+  fragment: 'results'
+});
+
+// Navegación relativa
+this.router.navigate(['edit'], { relativeTo: this.route });
+```
+
+### `router.navigateByUrl()`
+
+Usa una ruta en formato string. Ideal para navegación absoluta o URLs completas.
+
+```ts
+this.router.navigateByUrl('/products/123?view=details');
+
+// Reemplazar la entrada actual del historial
+this.router.navigateByUrl('/login', {replaceUrl: true});
+```
+
+## Parámetros de URL
+
+- **Parámetros de ruta**: parte del path (p. ej., `/user/123`).
+- **Parámetros de query**: después del `?` (p. ej., `/search?q=query`).
+- **Parámetros de matriz**: acotados a un segmento (p. ej., `/products;category=books`).