@saulwade/swl-ses 1.0.0

package/habilidades/angular-avanzado/recursos/ejemplos-avanzados.md

@@ -0,0 +1,219 @@
+# Angular Avanzado — Ejemplos Completos
+
+## Resource API (v19+) — Datos Asíncronos como Signals
+
+```typescript
+// Resource API — alternativa a RxJS para carga de datos simple
+import { resource, linkedSignal } from "@angular/core";
+
+@Component({ standalone: true, ... })
+export class UsuariosComponent {
+  private http = inject(HttpClient);
+
+  // Filtro reactivo
+  readonly busqueda = signal("");
+  readonly pagina   = signal(1);
+
+  // Resource — carga datos cuando cambia el request
+  readonly usuariosResource = resource({
+    request: () => ({
+      q: this.busqueda(),
+      page: this.pagina(),
+    }),
+
+    loader: ({ request }) =>
+      firstValueFrom(
+        this.http.get<PaginatedResponse<Usuario>>("/api/usuarios", {
+          params: { q: request.q, page: String(request.page) },
+        })
+      ),
+  });
+
+  // Signals derivados del resource
+  readonly usuarios    = computed(() => this.usuariosResource.value()?.items ?? []);
+  readonly cargando    = computed(() => this.usuariosResource.isLoading());
+  readonly error       = computed(() => this.usuariosResource.error());
+  readonly totalPaginas = computed(() => this.usuariosResource.value()?.totalPaginas ?? 0);
+}
+```
+
+```html
+<!-- Template con @defer y resource -->
+<div class="usuarios-lista">
+  @if (cargando()) {
+    <mat-progress-bar mode="indeterminate" />
+  } @else if (error()) {
+    <p class="error">Error al cargar: {{ error()?.message }}</p>
+  } @else {
+    @for (usuario of usuarios(); track usuario.id) {
+      <app-tarjeta-usuario [usuario]="usuario" />
+    } @empty {
+      <p class="vacio">No se encontraron usuarios</p>
+    }
+  }
+</div>
+```
+
+---
+
+## Guards, Resolvers e Interceptors Funcionales
+
+```typescript
+// guards/auth.guard.ts — funcional, sin clase
+import { inject } from "@angular/core";
+import { CanActivateFn, Router } from "@angular/router";
+import { AuthService } from "../services/auth.service";
+
+export const authGuard: CanActivateFn = (route, state) => {
+  const auth   = inject(AuthService);
+  const router = inject(Router);
+
+  if (auth.estaAutenticado()) {
+    return true;
+  }
+
+  return router.createUrlTree(["/login"], {
+    queryParams: { returnUrl: state.url },
+  });
+};
+
+// Guard con roles — composable
+export const roleGuard = (rolesPermitidos: string[]): CanActivateFn =>
+  () => {
+    const auth   = inject(AuthService);
+    const router = inject(Router);
+
+    if (rolesPermitidos.includes(auth.usuarioActual()?.rol ?? "")) {
+      return true;
+    }
+
+    return router.createUrlTree(["/sin-permisos"]);
+  };
+
+// resolvers/usuario.resolver.ts
+import { ResolveFn } from "@angular/router";
+import { inject } from "@angular/core";
+import { UsuariosService } from "../services/usuarios.service";
+
+export const usuarioResolver: ResolveFn<Usuario> = (route) => {
+  return inject(UsuariosService).obtenerPorId(route.paramMap.get("id")!);
+};
+
+// interceptors/auth.interceptor.ts
+import { HttpInterceptorFn } from "@angular/common/http";
+import { inject } from "@angular/core";
+import { AuthService } from "../services/auth.service";
+
+export const authInterceptor: HttpInterceptorFn = (req, next) => {
+  const auth = inject(AuthService);
+  const token = auth.token();
+
+  if (!token) return next(req);
+
+  return next(req.clone({
+    setHeaders: { Authorization: `Bearer ${token}` },
+  }));
+};
+
+// app.config.ts — registrar todo funcionalmente
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(routes, withComponentInputBinding()),
+    provideHttpClient(withInterceptors([authInterceptor, errorInterceptor])),
+    provideAnimationsAsync(),
+  ],
+};
+```
+
+---
+
+## SSR / SSG con Angular Universal
+
+```typescript
+// Detectar si estamos en el servidor o el navegador
+import { isPlatformBrowser, isPlatformServer } from "@angular/common";
+import { PLATFORM_ID, inject } from "@angular/core";
+
+@Injectable({ providedIn: "root" })
+export class PlatformService {
+  private platformId = inject(PLATFORM_ID);
+
+  readonly esBrowser = isPlatformBrowser(this.platformId);
+  readonly esServidor = isPlatformServer(this.platformId);
+}
+
+// Uso en componente — evitar acceso a APIs del browser en servidor
+@Component({ standalone: true, ... })
+export class MapaComponent implements OnInit {
+  private platform = inject(PlatformService);
+
+  ngOnInit(): void {
+    if (!this.platform.esBrowser) return;
+
+    import("leaflet").then(L => {
+      const mapa = L.map("mapa").setView([19.4326, -99.1332], 13);
+      L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(mapa);
+    });
+  }
+}
+
+// Transferir estado del servidor al cliente — evitar doble petición
+import { TransferState, makeStateKey } from "@angular/core";
+
+const CLAVE_PRODUCTOS = makeStateKey<Producto[]>("productos");
+
+@Injectable({ providedIn: "root" })
+export class ProductosService {
+  private http = inject(HttpClient);
+  private transferState = inject(TransferState);
+
+  obtenerTodos(): Observable<Producto[]> {
+    if (this.transferState.hasKey(CLAVE_PRODUCTOS)) {
+      const productos = this.transferState.get(CLAVE_PRODUCTOS, []);
+      this.transferState.remove(CLAVE_PRODUCTOS);
+      return of(productos);
+    }
+
+    return this.http.get<Producto[]>("/api/productos").pipe(
+      tap(productos => this.transferState.set(CLAVE_PRODUCTOS, productos))
+    );
+  }
+}
+```
+
+---
+
+## Angular Zoneless (Experimental v18+)
+
+```typescript
+// app.config.ts — habilitar zoneless
+import { provideExperimentalZonelessChangeDetection } from "@angular/core";
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideExperimentalZonelessChangeDetection(),
+  ],
+};
+
+// Con zoneless, la detección de cambios sólo ocurre cuando:
+// 1. Un signal cambia (automático)
+// 2. Se llama markForCheck() manualmente (para casos especiales)
+// 3. Un async pipe emite un valor
+
+// Componente completamente reactivo — cero zone.js
+@Component({
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <p>Contador: {{ contador() }}</p>
+    <button (click)="incrementar()">+</button>
+  `,
+})
+export class ContadorComponent {
+  readonly contador = signal(0);
+
+  incrementar(): void {
+    this.contador.update(n => n + 1);
+  }
+}
+```

package/habilidades/angular-moderno/SKILL.md

@@ -0,0 +1,186 @@
+---
+name: angular-moderno
+description: Angular v17+/v20+. Signals, standalone components, OnPush, host bindings, nueva sintaxis de control flow (@if/@for/@switch), defer blocks y patrones modernos.
+version: "1.0.0"
+herramientasPermitidas: [Read]
+exclusiones:
+  - "No cargar para patrones Angular avanzados (zoneless, SSR, Resource API, interceptores funcionales) — para eso cargar `angular-avanzado`."
+  - "No cargar para formularios Angular complejos, state management o animaciones avanzadas — cargar `angular-avanzado`."
+  - "No cargar para frameworks React o Vue — los patrones de signals y control flow son específicos de Angular."
+  - "No cargar para testing Angular (TestBed, harnesses, Spectator) — para testing cargar el skill de testing del stack."
+evolvable: true  # default para skill estandar
+---
+# Angular Moderno (v17+)
+
+## Cuándo NO cargar
+
+- La tarea requiere Angular avanzado: zoneless, SSR/SSG con Angular Universal, Resource API, interceptores funcionales — cargar `angular-avanzado`.
+- Los temas son formularios reactivos complejos, state management con signals store o animaciones Angular — cargar `angular-avanzado`.
+- El framework es React, Vue o Svelte — los patrones de signals y `@if`/`@for` son específicos de Angular.
+- La tarea es escribir tests Angular (TestBed, harnesses de Material) — usar el skill de testing correspondiente.
+
+## Principios de la era moderna de Angular
+
+Angular evolucionó hacia un modelo más reactivo y explícito:
+- **Signals** reemplaza Zone.js para la detección de cambios.
+- **Standalone** elimina NgModules como unidad de organización obligatoria.
+- **New control flow** (@if, @for, @switch) reemplaza directivas estructurales.
+- **OnPush + Signals** es el estándar para componentes de producción.
+
+---
+
+## Standalone Components
+
+```typescript
+import { Component, OnInit, inject } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { FacturaCardComponent } from './factura-card/factura-card.component';
+
+@Component({
+  selector: 'app-facturas-lista',
+  standalone: true,
+  imports: [RouterLink, MatButtonModule, FacturaCardComponent],
+  templateUrl: './facturas-lista.component.html',
+  styleUrl: './facturas-lista.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FacturasListaComponent implements OnInit {
+  private readonly facturasService = inject(FacturasService);
+  ngOnInit(): void { ... }
+}
+```
+
+---
+
+## Signals — Estado reactivo
+
+```typescript
+import { signal, computed, Signal } from '@angular/core';
+
+@Component({ ... })
+export class FacturasListaComponent {
+  private readonly _facturas = signal<Factura[]>([]);
+  private readonly _cargando = signal(false);
+  private readonly _filtro = signal('');
+
+  readonly facturas: Signal<Factura[]> = this._facturas.asReadonly();
+  readonly cargando: Signal<boolean> = this._cargando.asReadonly();
+
+  // Derivaciones con computed() — NUNCA funciones directas en templates
+  readonly facturasFiltradas = computed(() => {
+    const filtro = this._filtro().toLowerCase();
+    return this._facturas().filter(f =>
+      f.folio.toLowerCase().includes(filtro)
+    );
+  });
+
+  readonly totalFacturas = computed(() => this.facturasFiltradas().length);
+
+  actualizarFiltro(valor: string): void {
+    this._filtro.set(valor);
+  }
+}
+```
+
+---
+
+## Nueva sintaxis de control flow
+
+```html
+<!-- @if — reemplaza *ngIf -->
+@if (cargando()) {
+  <mat-spinner diameter="40" />
+} @else if (hayFacturas()) {
+  <div class="lista-facturas">
+    <!-- @for — reemplaza *ngFor, track OBLIGATORIO -->
+    @for (factura of facturasFiltradas(); track factura.id) {
+      <app-factura-card [factura]="factura" />
+    } @empty {
+      <p>No se encontraron facturas con ese filtro.</p>
+    }
+  </div>
+} @else {
+  <p>No tienes facturas registradas.</p>
+}
+
+<!-- @switch — reemplaza ngSwitch -->
+@switch (factura.estatus) {
+  @case ('emitida') { <span class="badge-verde">Emitida</span> }
+  @case ('cancelada') { <span class="badge-rojo">Cancelada</span> }
+}
+```
+
+---
+
+## @defer — Carga diferida de componentes
+
+```html
+@defer (on viewport) {
+  <app-grafica-ventas [datos]="datosGrafica()" />
+} @placeholder {
+  <div class="h-64 bg-gray-100 animate-pulse rounded"></div>
+} @loading (minimum 300ms) {
+  <mat-spinner />
+} @error {
+  <p>Error al cargar la gráfica.</p>
+}
+```
+
+---
+
+## Input y Output modernos (Angular v17.1+)
+
+```typescript
+import { input, output, model } from '@angular/core';
+
+@Component({ ... })
+export class FacturaCardComponent {
+  readonly factura = input.required<Factura>();
+  readonly modoCompacto = input(false);
+  readonly facturaId = input('', { transform: (v: string) => v.trim() });
+
+  readonly cancelar = output<string>();
+  readonly seleccionar = output<Factura>();
+  readonly checked = model(false);  // two-way binding
+
+  alCancelar(): void {
+    this.cancelar.emit(this.factura().id);
+  }
+}
+```
+
+---
+
+## Host bindings, Services con Signals y Formularios reactivos
+
+Para ejemplos completos de host bindings con clases dinámicas, services store con signals y HttpClient, y formularios reactivos con FormBuilder, ver [recursos/ejemplos-avanzados.md](recursos/ejemplos-avanzados.md).
+
+---
+
+## Anti-patrones a evitar
+
+```typescript
+// MAL: *ngIf / *ngFor en Angular v17+
+// BIEN: @if / @for con track obligatorio
+
+// MAL: funciones en templates (se evalúan en cada CD)
+// {{ getTotal() }}
+// BIEN: computed()
+// readonly total = computed(() => this.calcularTotal());
+
+// MAL: NgModules innecesarios en proyectos nuevos
+
+// MAL: item?.propiedad para signals (NG8107)
+// BIEN: @if (item()) { {{ item()!.nombre }} }
+```
+
+## Gotchas / Errores comunes no obvios
+
+**`@for` sin `track` compila con advertencia en v17 pero causa re-renderizado completo de la lista**: si se omite `track` (o se usa `track $index` en listas mutables), Angular recrea todos los elementos DOM al cambiar el array en lugar de hacer reconciliación. Causa: sin `track`, Angular no puede identificar qué elemento cambió. Fix: usar `track item.id` con el identificador estable del elemento; solo usar `track $index` en listas de solo lectura que nunca cambian de orden.
+
+**`computed()` que lee otra signal dentro de un `effect()` no re-ejecuta el efecto cuando cambia la computed**: si un `effect()` lee `this.total()` que es un `computed()`, el efecto sí se suscribe a la computed — pero si dentro del `effect` se llama a un método que modifica otra signal no leída directamente en el efecto, ese efecto no se re-ejecuta. Causa: Angular rastrea solo las signals leídas síncronamente dentro del cuerpo del efecto. Fix: leer explícitamente todas las signals de las que depende el efecto en su cuerpo, no mediante funciones intermedias.
+
+**`input.required<T>()` accedido fuera del contexto de renderizado (en `constructor`) lanza error de runtime**: `this.factura()` dentro del `constructor` de un componente que usa `input.required<Factura>()` lanza `NG0950: Input is required but no value is available yet`. Causa: los inputs signal no tienen valor hasta que Angular completa la inicialización del componente. Fix: acceder a inputs en `ngOnInit`, en `computed()`, o en métodos del template — nunca en el constructor.
+
+**`takeUntilDestroyed()` usado fuera del contexto de inyección lanza error**: `takeUntilDestroyed()` sin argumentos requiere un `DestroyRef` del contexto de inyección activo — si se llama dentro de un callback asíncrono (como `.then()` o `setTimeout`), el injection context ya no está activo. Causa: `inject()` solo funciona en contextos de inyección síncronos. Fix: capturar `DestroyRef` en el constructor con `private destroyRef = inject(DestroyRef)` y pasarlo explícitamente: `takeUntilDestroyed(this.destroyRef)`.

package/habilidades/angular-moderno/evals/evals.json

@@ -0,0 +1,45 @@
+{
+  "$schema": "../../../schemas/skill-evals.schema.json",
+  "skill_name": "angular-moderno",
+  "artifact_type": "skill",
+  "schema_version": 1,
+  "description": "Evals para angular-moderno — signals, control flow, standalone components (Angular 17+).",
+  "evals": [
+    {
+      "id": 0,
+      "prompt": "Componente Angular 17+ minimal con signal — snippet paste-ready.",
+      "files": [],
+      "expectations": [
+        "Usa `signal()` (no `BehaviorSubject` ni property simple).",
+        "`standalone: true` en el decorador o import standalone.",
+        "NO usa NgModule."
+      ],
+      "tags": ["signals"],
+      "weight": 1.5
+    },
+    {
+      "id": "anti-ngif",
+      "prompt": "Condicional en template Angular moderno.",
+      "files": [],
+      "expectations": [
+        "Usa `@if (...) { ... } @else { ... }` (control flow block, Angular 17+).",
+        "NO usa `*ngIf` (legacy).",
+        "La respuesta menciona que `*ngIf` sigue funcionando pero es deprecated."
+      ],
+      "grading_guidance": "Failure si usa *ngIf sin comentar que es legacy.",
+      "tags": ["anti-pattern", "control-flow"],
+      "weight": 1.5
+    },
+    {
+      "id": "computed",
+      "prompt": "Derivar un valor de dos signals — ¿cómo?",
+      "files": [],
+      "expectations": [
+        "Usa `computed(() => signalA() + signalB())`.",
+        "NO usa `effect()` para derivar valores.",
+        "Menciona que computed es lazy y memoizado."
+      ],
+      "tags": ["signals"]
+    }
+  ]
+}

package/habilidades/angular-moderno/recursos/ejemplos-avanzados.md

@@ -0,0 +1,106 @@
+# Angular Moderno — Ejemplos avanzados
+
+## Host bindings
+
+```typescript
+@Component({
+  selector: 'app-badge',
+  template: `{{ texto() }}`,
+  host: {
+    // Clases estáticas
+    'class': 'inline-flex items-center px-2 py-1 rounded text-sm font-medium',
+    // Bindings dinámicos
+    '[class.bg-green-100]': "tipo() === 'exito'",
+    '[class.bg-red-100]': "tipo() === 'error'",
+    '[class.bg-yellow-100]': "tipo() === 'advertencia'",
+    '[attr.role]': '"status"',
+    '[attr.aria-label]': 'texto()',
+  },
+})
+export class BadgeComponent {
+  readonly texto = input.required<string>();
+  readonly tipo = input<'exito' | 'error' | 'advertencia'>('exito');
+}
+```
+
+---
+
+## Services con Signals — ejemplo completo
+
+```typescript
+import { Injectable, signal, computed } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+@Injectable({ providedIn: 'root' })
+export class FacturasStore {
+  private readonly http = inject(HttpClient);
+  private readonly destroyRef = inject(DestroyRef);
+
+  // Estado interno
+  private readonly _facturas = signal<Factura[]>([]);
+  private readonly _cargando = signal(false);
+  private readonly _error = signal<string | null>(null);
+
+  // API pública
+  readonly facturas = this._facturas.asReadonly();
+  readonly cargando = this._cargando.asReadonly();
+  readonly error = this._error.asReadonly();
+  readonly totalEmitidas = computed(() =>
+    this._facturas().filter(f => f.estatus === 'emitida').length
+  );
+
+  cargar(): void {
+    this._cargando.set(true);
+    this._error.set(null);
+    this.http.get<PaginatedResponse<Factura>>('/api/v1/facturas/')
+      .pipe(
+        map(resp => resp.items),
+        takeUntilDestroyed(this.destroyRef),
+      )
+      .subscribe({
+        next: facturas => {
+          this._facturas.set(facturas);
+          this._cargando.set(false);
+        },
+        error: err => {
+          this._error.set(err.message);
+          this._cargando.set(false);
+        },
+      });
+  }
+}
+```
+
+---
+
+## Formularios reactivos — ejemplo completo
+
+```typescript
+import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
+
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatDatepickerModule],
+  ...
+})
+export class FacturaFormComponent {
+  private readonly fb = inject(FormBuilder);
+
+  readonly form = this.fb.group({
+    folio: ['', [Validators.required, Validators.maxLength(20)]],
+    // MatDatepicker OBLIGATORIO — NUNCA <input type="date">
+    fecha: [new Date(), Validators.required],
+    monto: [null as number | null, [Validators.required, Validators.min(0.01)]],
+    estatus: ['borrador' as 'borrador' | 'emitida', Validators.required],
+  });
+
+  get folioControl() { return this.form.controls.folio; }
+
+  onSubmit(): void {
+    if (this.form.invalid) return;
+    const datos = this.form.getRawValue();
+    // ...
+  }
+}
+```