Domina Next.js 14+ App Router con Server Components, streaming, rutas paralelas y data fetching avanzado. Úsalo al construir apps Next.js, implementar SSR/SSG u optimizar React Server Components.
en todo el repo
0–100, la ruta de este skill
último commit aquí
últimos 90 días
53 tok en reposo
13 KB
Funciona con cualquier agente que lea SKILL.md
npx -y skills add wshobson/agents --skill nextjs-app-router-patterns --agent claude-codeSe instala solo en este repositorio.
Este skill makes network requests.
Di cualquiera de estas frases y el agente debería cargar este skill.
Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.
| Mode | Where | When to Use |
|---|---|---|
| Server Components | Server only | Data fetching, heavy computation, secrets |
| Client Components | Browser | Interactivity, hooks, browser APIs |
| Static | Build time | Content that rarely changes |
| Dynamic | Request time | Personalized or real-time data |
| Streaming | Progressive | Large pages, slow data sources |
app/
├── layout.tsx # Shared UI wrapper
├── page.tsx # Route UI
├── loading.tsx # Loading UI (Suspense)
├── error.tsx # Error boundary
├── not-found.tsx # 404 UI
├── route.ts # API endpoint
├── template.tsx # Re-mounted layout
├── default.tsx # Parallel route fallback
└── opengraph-image.tsx # OG image generation
// app/layout.tsx
import { Inter } from 'next/font/google'
import { Providers } from './providers'
const inter = Inter({ subsets: ['latin'] })
export const metadata = {
title: { default: 'My App', template: '%s | My App' },
description: 'Built with Next.js App Router',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" suppressHydrationWarning>
<body className={inter.className}>
<Providers>{children}</Providers>
</body>
</html>
)
}
// app/page.tsx - Server Component by default
async function getProducts() {
const res = await fetch('https://api.example.com/products', {
next: { revalidate: 3600 }, // ISR: revalidate every hour
})
return res.json()
}
export default async function HomePage() {
const products = await getProducts()
return (
<main>
<h1>Products</h1>
<ProductGrid products={products} />
</main>
)
}
Detailed pattern documentation lives in references/details.md. Read that file when the navigation tier above is insufficient.
Reproducido de wshobson/agents bajo licencia MIT. Leer esta página en markdown.
2 archivos en el paquete. Solo se lee SKILL.md al activarse — las referencias se cargan si el skill decide que las necesita.
Requiere Next.js 14+ con App Router; hay detalles adicionales en references/details.md.
Este repo incluye 180 skills. Si instalas uno, normalmente ya tienes los demás.
Úsalo al seleccionar y colocar iconos, imágenes, SVGs, diagramas o infografías de apoyo aprobados en un PPTX editable.
Úsalo cuando pidan optimizar un prompt, mejorar su rendimiento, diseñar una plantilla, aplicar chain-of-thought, few-shot prompting o técnicas avanzadas de prompt engineering para producción.
Úsalo al redactar o reparar una especificación JSON con coordenadas explícitas para un PPTX editable.
Úsalo para validar o reparar un PPTX editable en cuanto a geometría, accesibilidad, editabilidad nativa, linaje de fuente e integridad del paquete OOXML.
Úsalo para analizar un PPTX de referencia en modo solo lectura: estructura, tema, tipografía, ritmo de layout, diagnósticos, catálogos de plantillas derivados o inspección segura del paquete OOXML.
Úsalo al preparar la narrativa, las fuentes y el contexto de diseño para un nuevo deck PPTX editable.
Domina el sistema de tipos avanzado de TypeScript: generics, tipos condicionales, mapped types, template literals y utility types para aplicaciones type-safe.
Patrones de resiliencia en Python: reintentos automáticos, backoff exponencial, timeouts y decoradores tolerantes a fallos para servicios.
Organización de proyectos Python, arquitectura de módulos y diseño de APIs públicas con __all__, para nuevos proyectos o reorganización de directorios.
