theus-cli 0.2.83 → 0.2.85

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

@@ -1,56 +0,0 @@
-# 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

@@ -1,83 +0,0 @@
-# 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

@@ -1,43 +0,0 @@
-# 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

@@ -1,80 +0,0 @@
-# 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

@@ -1,63 +0,0 @@
-# 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

@@ -1,101 +0,0 @@
-# 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

@@ -1,59 +0,0 @@
-# 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

@@ -1,61 +0,0 @@
-# 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

@@ -1,67 +0,0 @@
-# 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

@@ -1,69 +0,0 @@
-# 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`).