@saulwade/swl-ses 1.0.0

package/habilidades/nextjs-experto/SKILL.md

@@ -0,0 +1,335 @@
+---
+name: nextjs-experto
+description: >
+  Next.js App Router: Server Components, Client Components, Server Actions,
+  streaming con Suspense, ISR, route handlers y middleware. Cargar cuando se
+  implementen páginas Next.js, data fetching, mutaciones o rutas de API.
+version: "1.0.0"
+herramientasPermitidas: [Read]
+exclusiones:
+  - "No cargar para proyectos Next.js con Pages Router (pages/index.tsx) — el modelo de getServerSideProps y getStaticProps es diferente al App Router; este skill solo cubre App Router."
+  - "No cargar para errores de compilación next build — para esos cargar `build-errors-nextjs` que cubre hydration mismatch, Turbopack y errores de RSC."
+  - "No cargar cuando la pregunta es sobre patrones de arquitectura de App Router (nested layouts, parallel routes, caching strategies) — para diseño de arquitectura cargar `nextjs-patrones`."
+  - "No cargar para testing de componentes Next.js (Vitest, RTL, Playwright) — para escribir tests cargar `nextjs-testing`."
+evolvable: true  # default para skill estandar
+---
+# Next.js Experto — App Router Moderno
+
+Next.js 13+ con App Router cambia el modelo mental: los componentes son Server
+Components por defecto. El cliente solo recibe HTML renderizado y los fragments
+de JS necesarios para interactividad. Este skill cubre los patrones del App Router,
+data fetching con cache granular, Server Actions y middleware.
+
+## Cuándo cargar este skill
+
+Invoca `Skill("nextjs-experto")` cuando:
+
+- Se implementen páginas, layouts o rutas en App Router
+- Se configure data fetching con cache y revalidación
+- Se implementen Server Actions para mutaciones
+- Se creen route handlers (API routes en App Router)
+- Se configure middleware para autenticación o i18n
+- Se use `generateStaticParams` para SSG dinámico
+
+## Cuándo NO cargar
+
+- El proyecto usa Pages Router (`pages/index.tsx`, `getServerSideProps`, `getStaticProps`) — ese modelo es incompatible con App Router; las APIs de cache y Server Actions no aplican.
+- La pregunta es sobre errores de compilación o hydration mismatch — esos son errores de plataforma; cargar `build-errors-nextjs`.
+- La pregunta es sobre diseño de arquitectura (nested layouts, parallel routes, estrategias de cache) — para decisiones de diseño cargar `nextjs-patrones`.
+- La pregunta es sobre escribir tests (Vitest, Playwright, RTL) — para testing cargar `nextjs-testing`.
+
+## Conceptos clave
+
+### Server Components vs Client Components
+
+Server Components se ejecutan en el servidor, pueden ser async, acceden a BD
+directamente, no tienen hooks ni eventos. Client Components se marcan con
+`"use client"`, tienen acceso a hooks, browser APIs y estado local.
+
+**Regla de oro**: usar Server Component por defecto. Agregar `"use client"` solo
+cuando se necesita interactividad, hooks o browser APIs.
+
+### Cache y Revalidación
+
+`fetch()` en Next.js está extendido con opciones de cache. `no-store` deshabilita
+cache (siempre fresco). `revalidate: N` revalida cada N segundos (ISR).
+`tags` permite invalidación selectiva. Los Server Actions pueden llamar
+`revalidateTag()` o `revalidatePath()` para invalidar después de mutaciones.
+
+### Server Actions
+
+Funciones marcadas con `"use server"` que se ejecutan en el servidor. Se pueden
+llamar directamente desde formularios (`action={miAction}`) o desde Client
+Components. Eliminan la necesidad de route handlers para mutaciones simples.
+
+## Reglas obligatorias
+
+### "use client" solo cuando sea absolutamente necesario
+
+```tsx
+// MAL — todo marcado como client component sin necesidad
+"use client";
+export default function ListaProductos({ productos }) {
+    return <ul>{productos.map(p => <li key={p.id}>{p.nombre}</li>)}</ul>;
+}
+
+// BIEN — Server Component, sin "use client"
+export default function ListaProductos({ productos }: { productos: Producto[] }) {
+    return <ul>{productos.map(p => <li key={p.id}>{p.nombre}</li>)}</ul>;
+}
+```
+
+### fetch con error handling SIEMPRE en data fetching
+
+```tsx
+// MAL — no maneja errores
+async function obtenerProducto(id: string) {
+    const res = await fetch(`/api/productos/${id}`);
+    return res.json();
+}
+
+// BIEN — maneja HTTP errors y serializa correctamente
+async function obtenerProducto(id: string): Promise<Producto> {
+    const res = await fetch(`${process.env.API_URL}/productos/${id}`, {
+        next: { revalidate: 3600, tags: [`producto-${id}`] },
+    });
+    if (!res.ok) throw new Error(`Error ${res.status}: ${res.statusText}`);
+    return res.json() as Promise<Producto>;
+}
+```
+
+### Server Actions con validación antes de mutar
+
+```tsx
+"use server";
+
+export async function crearProducto(formData: FormData) {
+    // 1. Validar con zod antes de cualquier mutación
+    const resultado = ProductoSchema.safeParse({
+        nombre: formData.get('nombre'),
+        precio: Number(formData.get('precio')),
+    });
+    if (!resultado.success) {
+        return { error: resultado.error.flatten().fieldErrors };
+    }
+    // 2. Verificar autenticación
+    const sesion = await auth();
+    if (!sesion) redirect('/login');
+    // 3. Mutar
+    await db.producto.create({ data: resultado.data });
+    // 4. Invalidar cache
+    revalidateTag('productos');
+}
+```
+
+### Suspense boundaries para streaming
+
+```tsx
+// Envolver fetches lentos en Suspense para no bloquear la página completa
+export default function PaginaProducto({ params }: { params: { id: string } }) {
+    return (
+        <main>
+            <h1>Producto</h1>
+            <Suspense fallback={<EsqueletoDetalle />}>
+                <DetalleProducto id={params.id} />
+            </Suspense>
+            <Suspense fallback={<EsqueletoResenas />}>
+                <ResenasProducto id={params.id} />
+            </Suspense>
+        </main>
+    );
+}
+```
+
+## Patrones recomendados
+
+### Convención de archivos App Router
+
+```
+app/
+├── layout.tsx          # Layout raíz (html, body)
+├── page.tsx            # Página /
+├── loading.tsx         # Skeleton mientras carga la página
+├── error.tsx           # Boundary de error ("use client")
+├── not-found.tsx       # 404 personalizado
+├── (auth)/             # Route group — no afecta la URL
+│   ├── login/page.tsx
+│   └── registro/page.tsx
+└── productos/
+    ├── page.tsx              # /productos
+    ├── [id]/
+    │   └── page.tsx          # /productos/[id]
+    └── route.ts              # API route GET /productos
+```
+
+### generateStaticParams para SSG con rutas dinámicas
+
+```tsx
+export async function generateStaticParams() {
+    const productos = await db.producto.findMany({ select: { id: true } });
+    return productos.map(p => ({ id: p.id.toString() }));
+}
+
+export default async function PaginaProducto({ params }: { params: { id: string } }) {
+    const producto = await obtenerProducto(params.id);
+    // ...
+}
+```
+
+### Route Handler con tipado
+
+```tsx
+// app/api/productos/route.ts
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function GET(request: NextRequest) {
+    const searchParams = request.nextUrl.searchParams;
+    const pagina = Number(searchParams.get('pagina') ?? 1);
+
+    const productos = await db.producto.findMany({
+        skip: (pagina - 1) * 20,
+        take: 20,
+    });
+
+    return NextResponse.json({ data: productos, pagina });
+}
+```
+
+### Middleware para autenticación
+
+```tsx
+// middleware.ts (raiz del proyecto)
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export function middleware(request: NextRequest) {
+    const token = request.cookies.get('session')?.value;
+    const esRutaProtegida = request.nextUrl.pathname.startsWith('/dashboard');
+
+    if (esRutaProtegida && !token) {
+        return NextResponse.redirect(new URL('/login', request.url));
+    }
+    return NextResponse.next();
+}
+
+export const config = {
+    matcher: ['/dashboard/:path*', '/api/privada/:path*'],
+};
+```
+
+### Metadata API para SEO
+
+```tsx
+// Estatica
+export const metadata: Metadata = {
+    title: 'Tienda — Inicio',
+    description: 'Los mejores productos...',
+};
+
+// Dinámica por página
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+    const producto = await obtenerProducto(params.id);
+    return {
+        title: producto.nombre,
+        openGraph: { images: [producto.imagen] },
+    };
+}
+```
+
+## Anti-patrones conocidos
+
+### useEffect para data fetching — NUNCA en App Router
+
+```tsx
+// MAL — patrón de Pages Router que no aplica en App Router
+"use client";
+export default function Productos() {
+    const [productos, setProductos] = useState([]);
+    useEffect(() => {
+        fetch('/api/productos').then(r => r.json()).then(setProductos);
+    }, []);
+}
+
+// BIEN — Server Component con fetch directo
+export default async function Productos() {
+    const productos = await obtenerProductos();
+    return <ListaProductos productos={productos} />;
+}
+```
+
+### Layout para datos altamente dinámicos (tiempo real)
+
+Los layouts se cachean agresivamente. Para datos que cambian por request,
+usar `page.tsx` con `export const dynamic = 'force-dynamic'` o `no-store`.
+
+### Dynamic imports para reducir bundle del cliente
+
+```tsx
+// Cargar componentes pesados solo cuando se necesitan
+const Mapa = dynamic(() => import('@/components/Mapa'), {
+    loading: () => <p>Cargando mapa...</p>,
+    ssr: false, // no renderizar en servidor si usa browser APIs
+});
+```
+
+### Hydration mismatch — causas comunes y solución
+
+El servidor y el cliente deben producir HTML idéntico en el primer render.
+Causas frecuentes de divergencia:
+
+```tsx
+// MAL — Date.now() produce valor distinto en servidor vs cliente
+export default function Banner() {
+    return <p>Generado: {Date.now()}</p>; // hydration mismatch
+}
+
+// MAL — Math.random() diverge entre servidor y cliente
+<div style={{ order: Math.random() }}>...</div>
+
+// MAL — typeof window produce HTML condicional
+{typeof window !== 'undefined' && <ComponenteSoloCliente />}
+
+// MAL — localStorage no existe en el servidor
+<p>Tema: {localStorage.getItem('theme')}</p>
+```
+
+Solución: mover valores dinámicos del cliente a un `useEffect` con estado
+inicial neutro, o usar `suppressHydrationWarning` solo en nodos de texto que
+intencionalmente difieren (timestamps mostrados al usuario):
+
+```tsx
+"use client";
+export default function Reloj() {
+    const [hora, setHora] = useState<string>('');
+    useEffect(() => setHora(new Date().toLocaleTimeString()), []);
+    return <time suppressHydrationWarning>{hora}</time>;
+}
+```
+
+## Gotchas / Errores comunes no obvios
+
+**`cookies()` y `headers()` hacen opt-out del cache completo de la ruta**: llamar a `cookies()` o `headers()` en cualquier Server Component de una ruta convierte toda la ruta a dinámica (`force-dynamic`), incluso si el componente que los llama es un hijo no relacionado con el dato cacheado. Causa: Next.js marca la ruta entera como dinámica en el momento del análisis estático. Fix: aislar el componente que necesita cookies/headers en un Server Component dedicado e importarlo solo donde se use, o usar `export const dynamic = 'force-static'` en las páginas que no deben ser afectadas.
+
+**Server Action llamada desde un formulario no revalida la UI después de éxito**: el formulario se envía y la acción ejecuta, pero la página no muestra los datos nuevos. Causa: la mutación se hizo pero no se llamó `revalidatePath()` o `revalidateTag()` dentro de la action. Fix: agregar `revalidatePath('/ruta-de-la-pagina')` al final de la Server Action, después de confirmar que la mutación fue exitosa.
+
+**`"use client"` en un componente padre hace que todos sus imports sean Client Components**: si un layout o componente padre tiene `"use client"`, todos los componentes que importa son arrastrados al bundle del cliente aunque sean Server Components sin estado. Causa: el límite `"use client"` se aplica al subárbol completo. Fix: mover el estado o los event handlers a un componente hijo dedicado con `"use client"` y mantener el padre como Server Component.
+
+**Variables de entorno sin `NEXT_PUBLIC_` no disponibles en el cliente en runtime**: `process.env.MI_VAR` en un Client Component retorna `undefined` en el browser aunque esté definida en `.env.local`. Causa: Next.js solo serializa al bundle del cliente las variables con prefijo `NEXT_PUBLIC_`. Fix: renombrar a `NEXT_PUBLIC_MI_VAR` si debe estar en el cliente, o leerla en un Server Component/Action y pasarla como prop.
+
+## Checklist de verificación
+
+- [ ] "use client" solo en componentes con hooks, eventos o browser APIs
+- [ ] fetch con manejo de errores HTTP y tipado de respuesta
+- [ ] Server Actions con validación Zod antes de mutar
+- [ ] Suspense boundaries alrededor de fetches independientes
+- [ ] Metadata generada para páginas públicas (SEO)
+- [ ] Middleware en rutas protegidas
+- [ ] generateStaticParams para rutas dinámicas conocidas en build time
+
+## Referencias
+
+- [Next.js App Router Docs](https://nextjs.org/docs/app)
+- [Next.js Caching](https://nextjs.org/docs/app/building-your-application/caching)
+
+---
+*Skill creado con swl:crear-skill el 2026-03-31. Versión 1.0.0.*

package/habilidades/nextjs-patrones/SKILL.md

@@ -0,0 +1,303 @@
+---
+name: nextjs-patrones
+description: >
+  Patrones Next.js App Router: nested layouts, parallel routes, intercepting
+  routes, caching strategies, Partial Prerendering y autenticación con middleware.
+  Cargar cuando se diseñe arquitectura de una app Next.js o se optimice caching.
+version: "1.0.0"
+herramientasPermitidas: [Read, Glob, Grep]
+exclusiones:
+  - "No cargar para implementar un endpoint o página específica — para implementación concreta cargar `nextjs-experto`; este skill es para diseño de arquitectura y estrategia de caching."
+  - "No cargar para proyectos con Pages Router — los patrones de nested layouts, parallel routes y PPR son exclusivos del App Router."
+  - "No cargar para tests de páginas Next.js — para testing cargar `nextjs-testing`."
+  - "No cargar para errores de build o hydration — esos son errores de plataforma; cargar `build-errors-nextjs`."
+evolvable: true  # default para skill estandar
+---
+# Next.js Patrones — Arquitectura App Router
+
+El App Router introduce patrones de composición que no existían en Pages Router.
+Este skill cubre las decisiones de arquitectura: cuándo usar layouts anidados,
+cómo aprovechar parallel routes para UI compleja, qué estrategia de cache elegir
+para cada tipo de dato, y cómo estructurar autenticación con middleware.
+
+## Cuándo cargar este skill
+
+Invoca `Skill("nextjs-patrones")` cuando:
+
+- Se diseñe la estructura de rutas de una app Next.js nueva
+- Se implemente un modal que debe mantener la ruta anterior (intercepting routes)
+- Se optimice el comportamiento de cache de páginas o datos
+- Se configure autenticación o i18n con middleware
+- Se evalúen las estrategias de rendering: SSR, SSG, ISR, PPR
+
+## Cuándo NO cargar
+
+- La pregunta es sobre implementar un endpoint o página específica — para implementación concreta cargar `nextjs-experto`; este skill cubre decisiones de arquitectura y estrategia.
+- El proyecto usa Pages Router — los patrones de nested layouts, parallel routes y PPR son exclusivos del App Router.
+- La pregunta es sobre tests de páginas Next.js — para testing cargar `nextjs-testing`.
+- La pregunta es sobre errores de build o hydration — esos son errores de plataforma; cargar `build-errors-nextjs`.
+
+## Conceptos clave
+
+### Nested Layouts y composición
+
+Cada segmento de ruta puede tener su propio `layout.tsx`. Los layouts se anidan:
+el layout de `/dashboard` envuelve a todos los layouts y páginas bajo esa ruta.
+Los layouts son Server Components y persisten entre navegaciones del mismo segmento.
+
+### Route Groups
+
+Los route groups (carpetas entre paréntesis como `(auth)`) agrupan rutas sin
+afectar la URL. Sirven para aplicar layouts diferentes a segmentos del mismo
+nivel, o para organizar el código sin impactar las rutas públicas.
+
+### Parallel Routes y Slots
+
+Los slots (`@nombre`) permiten renderizar múltiples páginas en el mismo layout
+simultáneamente. El layout recibe los slots como props. Útil para dashboards
+con secciones independientes o vistas divididas.
+
+## Reglas obligatorias
+
+### Layout solo para UI que persiste — no para datos dinámicos por usuario
+
+```tsx
+// MAL — el layout hace fetch de datos que dependen del usuario
+// Los layouts se cachean y puede servirse el mismo a distintos usuarios
+export default async function DashboardLayout({ children }) {
+    const usuario = await obtenerUsuarioActual(); // PELIGROSO en layout
+    return <aside>{usuario.nombre}</aside>;
+}
+
+// BIEN — datos dinamicos en el page.tsx o en un Client Component
+// con fetch propio que respeta el contexto de la request
+export default function DashboardLayout({ children }) {
+    return (
+        <div className="flex">
+            <NavegacionLateral /> {/* Server Component con su propio fetch */}
+            <main>{children}</main>
+        </div>
+    );
+}
+```
+
+### Cache con tags para invalidación granular — nunca `no-store` por comodidad
+
+```tsx
+// MAL — deshabilitar cache para evitar pensar en invalidacion
+const productos = await fetch('/api/productos', { cache: 'no-store' });
+
+// BIEN — cache con revalidacion y tags especificos
+const productos = await fetch('/api/productos', {
+    next: {
+        revalidate: 3600,          // Revalidar cada hora como maximo
+        tags: ['productos'],        // Invalidar con revalidateTag('productos')
+    },
+});
+
+// En el Server Action al mutar:
+revalidateTag('productos');        // Solo invalida lo necesario
+```
+
+### Composition pattern: Server Component envuelve Client Component
+
+```tsx
+// Server Component puede pasar datos como props a Client Components
+// pero NO puede importar un Client Component que use hooks en el servidor
+// BIEN — composicion correcta
+export default async function PaginaProducto({ params }) {
+    const producto = await obtenerProducto(params.id); // Server
+    return (
+        <div>
+            <DetalleProducto producto={producto} />      {/* Server */}
+            <BotonAgregarCarrito productoId={producto.id} /> {/* Client */}
+        </div>
+    );
+}
+```
+
+## Patrones recomendados
+
+### Parallel Routes para dashboard con secciones independientes
+
+```
+app/dashboard/
+├── layout.tsx         # Recibe @analytics y @equipo como props
+├── page.tsx
+├── @analytics/
+│   └── page.tsx       # Carga independientemente
+└── @equipo/
+    └── page.tsx       # Carga independientemente
+```
+
+```tsx
+// layout.tsx
+export default function DashboardLayout({
+    children,
+    analytics,
+    equipo,
+}: {
+    children: React.ReactNode;
+    analytics: React.ReactNode;
+    equipo: React.ReactNode;
+}) {
+    return (
+        <div className="grid grid-cols-3 gap-4">
+            <main className="col-span-2">{children}</main>
+            <aside>
+                <Suspense fallback={<Skeleton />}>{analytics}</Suspense>
+                <Suspense fallback={<Skeleton />}>{equipo}</Suspense>
+            </aside>
+        </div>
+    );
+}
+```
+
+### Intercepting Routes para modales con URL propia
+
+```
+app/
+├── productos/
+│   ├── page.tsx                  # /productos — lista
+│   ├── [id]/page.tsx             # /productos/[id] — página completa
+│   └── (.)foto/[id]/page.tsx    # Intercepta /foto/[id] desde /productos
+└── foto/
+    └── [id]/page.tsx             # /foto/[id] — página completa si acceso directo
+```
+
+El `(.)` intercepta rutas en el mismo nivel. `(..)` intercepta un nivel arriba.
+Al navegar desde `/productos`, abre el modal. Al acceder directo a `/foto/123`,
+muestra la página completa — permite compartir URLs de modales.
+
+### Estrategias de cache por tipo de contenido
+
+```tsx
+// Contenido estático (documentación, landing pages)
+// No especificar cache — Next.js cachea indefinidamente en build
+export default async function PaginaMarketing() { ... }
+
+// Contenido con actualizacion periodica (catalogo, precios)
+async function obtenerCatalogo() {
+    return fetch('/api/catalogo', { next: { revalidate: 3600 } });
+}
+
+// Contenido personalizado por usuario (carrito, perfil)
+async function obtenerCarrito(usuarioId: string) {
+    return fetch(`/api/carrito/${usuarioId}`, { cache: 'no-store' });
+}
+
+// Contenido en tiempo real (stock, precios live)
+export const dynamic = 'force-dynamic'; // en el page.tsx
+```
+
+### Edge Runtime para middleware de autenticación
+
+```tsx
+// middleware.ts
+export const runtime = 'edge'; // más rápido, sin cold start
+
+export async function middleware(request: NextRequest) {
+    const token = request.cookies.get('session')?.value;
+
+    if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
+        const loginUrl = new URL('/login', request.url);
+        loginUrl.searchParams.set('callbackUrl', request.nextUrl.pathname);
+        return NextResponse.redirect(loginUrl);
+    }
+
+    // Agregar headers de usuario para Server Components downstream
+    const response = NextResponse.next();
+    response.headers.set('x-user-id', decodeToken(token)?.id ?? '');
+    return response;
+}
+
+export const config = {
+    matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
+};
+```
+
+### Partial Prerendering (PPR) — Next.js 14+
+
+```tsx
+// next.config.ts
+export default {
+    experimental: { ppr: true },
+};
+
+// page.tsx — shell estático + partes dinámicas en Suspense
+export default function PaginaProducto({ params }) {
+    return (
+        <>
+            {/* Estático — se precompila */}
+            <HeaderProducto />
+            <DescripcionProducto id={params.id} />
+
+            {/* Dinámico — se hace streaming por separado */}
+            <Suspense fallback={<SkeletonStock />}>
+                <StockEnTiempoReal id={params.id} />
+            </Suspense>
+        </>
+    );
+}
+```
+
+## Anti-patrones conocidos
+
+### Prop drilling de Server Components a través de múltiples niveles
+
+```tsx
+// MAL — pasar props a través de 4 niveles de Server Components
+<Layout usuario={usuario}>
+  <Dashboard usuario={usuario}>
+    <Header usuario={usuario} />
+
+// BIEN — cada Server Component hace su propio fetch o usa Context del lado cliente
+// Los Server Components pueden colocarse directamente en el árbol
+```
+
+### Route Handler para todo cuando Server Actions son suficientes
+
+Para mutaciones simples desde formularios o acciones de usuario, los Server Actions
+son más simples que crear un route handler separado. Los route handlers tienen
+sentido para endpoints que consumirán terceros, webhooks o necesitan headers HTTP.
+
+### Imports de librerias pesadas en el bundle del cliente
+
+```tsx
+// MAL — lodash completo en el cliente
+"use client";
+import _ from 'lodash';
+
+// BIEN — importar solo lo necesario, o mover la lógica al servidor
+import debounce from 'lodash/debounce';
+// O mejor: la transformación de datos en un Server Component
+```
+
+## Gotchas / Errores comunes no obvios
+
+**`loading.tsx` en un segmento bloquea el loading de segmentos padre**: en una ruta `/dashboard/pedidos`, si `pedidos/loading.tsx` existe pero el fetch lento está en el layout de `/dashboard`, el spinner de pedidos aparece pero la UI de dashboard también queda pendiente. Causa: el `loading.tsx` solo envuelve la página del segmento donde vive, no los layouts padres. Fix: poner el `loading.tsx` al mismo nivel que el layout o componente que hace el fetch lento.
+
+**Parallel routes con `@slot` que no tienen `default.tsx` causan 404 en navegación directa**: al navegar directamente a una URL (refresh o link externo) con parallel routes, Next.js necesita renderizar todos los slots — si alguno no tiene `default.tsx`, lanza 404. Causa: en navegación suave (client-side), el estado de los slots se mantiene; en navegación directa, Next.js busca `default.tsx` como fallback. Fix: crear `default.tsx` en cada `@slot` que no tenga una ruta correspondiente.
+
+**`revalidateTag()` en Server Action no invalida el cache si el `fetch` no declaró el tag**: se llama `revalidateTag('productos')` pero la página no se refresca. Causa: el `fetch` correspondiente no tenía `next: { tags: ['productos'] }` — sin tag declarado, no hay entrada en el cache que invalidar. Fix: verificar que cada `fetch` que debe invalidarse declara explícitamente los tags con `next: { tags: ['nombre-del-tag'] }`.
+
+**Intercepting routes `(..)ruta` no intercepta si el layout padre no coincide**: al configurar `(..)modal` para interceptar `/fotos/[id]` desde `/`, la intercepción no funciona si el archivo de intercepción está un nivel más arriba de lo esperado. Causa: la notación `(.)` intercepta el mismo segmento, `(..)` intercepta un nivel arriba, `(...)` intercepta desde la raíz — un error de conteo de puntos hace que la intercepción no se active y navega a la página completa. Fix: contar los segmentos de ruta entre el origen y el destino para elegir la notación correcta.
+
+## Checklist de verificación
+
+- [ ] Layouts solo contienen UI persistente, sin datos dinámicos por usuario
+- [ ] Cache configurada con tags para invalidación granular
+- [ ] Parallel routes con Suspense independiente por slot
+- [ ] Intercepting routes cuando se necesitan modales con URL compartible
+- [ ] Middleware en Edge Runtime para latencia mínima
+- [ ] Server Components hacen fetch directamente — no prop drilling de datos
+- [ ] PPR evaluado para páginas con mezcla de contenido estático y dinámico
+
+## Referencias
+
+- [Next.js Routing](https://nextjs.org/docs/app/building-your-application/routing)
+- [Next.js Caching Deep Dive](https://nextjs.org/docs/app/building-your-application/caching)
+- [Partial Prerendering](https://nextjs.org/docs/app/api-reference/next-config-js/ppr)
+
+---
+*Skill creado con swl:crear-skill el 2026-03-31. Versión 1.0.0.*