-}
-```
-
-### Function Level
-
-```tsx
-export async function getData() {
- 'use cache'
- return db.query('SELECT * FROM posts')
-}
-```
-
----
-
-### Optimistic UI for Server Actions
-
-
-When Client Components need data:
-
-### Option 1: Pass from Server Component (Preferred)
-
-```tsx
-// Server Component
-async function Page() {
- const data = await fetchData();
- return ;
-}
-
-// Client Component
-'use client';
-function ClientComponent({ initialData }) {
- const [data, setData] = useState(initialData);
- // ...
-}
-```
-
-### Option 2: Fetch on Mount (When Necessary)
-
-```tsx
-'use client';
-import { useEffect, useState } from 'react';
-
-function ClientComponent() {
- const [data, setData] = useState(null);
-
- useEffect(() => {
- fetch('/api/data')
- .then(r => r.json())
- .then(setData);
- }, []);
-
- if (!data) return ;
- return
{data.value}
;
-}
-```
-
-### Option 3: Server Action for Reads (Works But Not Ideal)
-
-Server Actions can be called from Client Components for reads, but this is not their intended purpose:
-
-```tsx
-'use client';
-import { getData } from './actions';
-import { useEffect, useState } from 'react';
-
-function ClientComponent() {
- const [data, setData] = useState(null);
-
- useEffect(() => {
- getData().then(setData);
- }, []);
-
- return
-}
-```
-
-Key differences:
-- **No manual cache keys** - `use cache` generates keys automatically from function arguments and closures. The `keyParts` array from `unstable_cache` is no longer needed.
-- **Tags** - Replace `options.tags` with `cacheTag()` calls inside the function.
-- **Revalidation** - Replace `options.revalidate` with `cacheLife({ revalidate: N })` or a built-in profile like `cacheLife('minutes')`.
-- **Dynamic data** - `unstable_cache` did not support `cookies()` or `headers()` inside the callback. The same restriction applies to `use cache`, but you can use `'use cache: private'` if needed.
-
----
-
-## Limitations
-
-- **Edge runtime not supported** - requires Node.js
-- **Static export not supported** - needs server
-- **Non-deterministic values** (`Math.random()`, `Date.now()`) execute once at build time inside `use cache`
-
-For request-time randomness outside cache:
-
-```tsx
-import { connection } from 'next/server'
-
-async function DynamicContent() {
- await connection() // Defer to request time
- const id = crypto.randomUUID() // Different per request
- return
{id}
-}
-```
-
-Sources:
-- [Cache Components Guide](https://nextjs.org/docs/app/getting-started/cache-components)
-- [use cache Directive](https://nextjs.org/docs/app/api-reference/directives/use-cache)
-- [unstable_cache (legacy)](https://nextjs.org/docs/app/api-reference/functions/unstable_cache)
diff --git a/skills/next-cache-components/overlay.yaml b/skills/next-cache-components/overlay.yaml
deleted file mode 100644
index 1addecb..0000000
--- a/skills/next-cache-components/overlay.yaml
+++ /dev/null
@@ -1,78 +0,0 @@
-name: next-cache-components
-description: Next.js 16 Cache Components guidance — PPR, use cache directive, cacheLife, cacheTag, updateTag, and migration from unstable_cache. Use when implementing partial prerendering, caching strategies, or migrating from older Next.js cache patterns.
-metadata:
- priority: 6
- docs:
- - "https://nextjs.org/docs/app/getting-started/cache-components"
- - "https://nextjs.org/docs/app/api-reference/directives/use-cache"
- pathPatterns:
- - 'next.config.*'
- - 'app/**'
- - 'src/app/**'
- - 'apps/*/app/**'
- - 'apps/*/src/app/**'
- importPatterns:
- - "next/cache"
- bashPatterns:
- - '\bnext\s+(dev|build)\b'
- promptSignals:
- phrases:
- - "use cache"
- - "cache components"
- - "partial prerendering"
- - "PPR"
- - "cacheLife"
- - "cacheTag"
- - "updateTag"
- - "unstable_cache"
- allOf:
- - [cache, component]
- - [cache, directive]
- - [partial, prerender]
- anyOf:
- - "revalidateTag"
- - "stale"
- - "revalidate"
- - "cache profile"
- noneOf: []
- minScore: 6
- validate:
- -
- pattern: 'unstable_cache\s*\('
- message: 'unstable_cache is deprecated in Next.js 16 — use the "use cache" directive with cacheTag() and cacheLife() instead'
- severity: recommended
- upgradeToSkill: next-cache-components
- upgradeWhy: 'Guides migration from unstable_cache to use cache directive with cacheTag and cacheLife.'
- -
- pattern: '\bcacheHandler\s*:'
- message: 'Singular cacheHandler is deprecated in Next.js 16 — use cacheHandlers (plural) with per-type handlers'
- severity: recommended
- -
- pattern: revalidateTag\(\s*['"][^'"]+['"]\s*\)
- message: 'Single-arg revalidateTag(tag) is deprecated in Next.js 16 — pass a cacheLife profile: revalidateTag(tag, "max")'
- severity: recommended
-retrieval:
- aliases:
- - cache components
- - partial prerendering
- - PPR
- - use cache
- intents:
- - enable partial prerendering in Next.js
- - cache async data with use cache directive
- - invalidate cache with cacheTag
- - migrate from unstable_cache
- entities:
- - use cache
- - cacheLife
- - cacheTag
- - updateTag
- - revalidateTag
- - PPR
-chainTo:
- -
- pattern: 'use cache'
- targetSkill: nextjs
- message: 'Cache component detected — loading Next.js best practices for RSC boundaries and data patterns alongside caching.'
- skipIfFileContains: 'next-best-practices'
-
diff --git a/skills/next-cache-components/upstream/SKILL.md b/skills/next-cache-components/upstream/SKILL.md
deleted file mode 100644
index 13a8961..0000000
--- a/skills/next-cache-components/upstream/SKILL.md
+++ /dev/null
@@ -1,411 +0,0 @@
----
-name: next-cache-components
-description: Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag
----
-
-# Cache Components (Next.js 16+)
-
-Cache Components enable Partial Prerendering (PPR) - mix static, cached, and dynamic content in a single route.
-
-## Enable Cache Components
-
-```ts
-// next.config.ts
-import type { NextConfig } from 'next'
-
-const nextConfig: NextConfig = {
- cacheComponents: true,
-}
-
-export default nextConfig
-```
-
-This replaces the old `experimental.ppr` flag.
-
----
-
-## Three Content Types
-
-With Cache Components enabled, content falls into three categories:
-
-### 1. Static (Auto-Prerendered)
-
-Synchronous code, imports, pure computations - prerendered at build time:
-
-```tsx
-export default function Page() {
- return (
-
-
Our Blog
{/* Static - instant */}
-
-
- )
-}
-```
-
-### 2. Cached (`use cache`)
-
-Async data that doesn't need fresh fetches every request:
-
-```tsx
-async function BlogPosts() {
- 'use cache'
- cacheLife('hours')
-
- const posts = await db.posts.findMany()
- return
-}
-```
-
-### 3. Dynamic (Suspense)
-
-Runtime data that must be fresh - wrap in Suspense:
-
-```tsx
-import { Suspense } from 'react'
-
-export default function Page() {
- return (
- <>
- {/* Cached */}
-
- Loading...}>
- {/* Dynamic - streams in */}
-
- >
- )
-}
-
-async function UserPreferences() {
- const theme = (await cookies()).get('theme')?.value
- return
-}
-```
-
-Key differences:
-- **No manual cache keys** - `use cache` generates keys automatically from function arguments and closures. The `keyParts` array from `unstable_cache` is no longer needed.
-- **Tags** - Replace `options.tags` with `cacheTag()` calls inside the function.
-- **Revalidation** - Replace `options.revalidate` with `cacheLife({ revalidate: N })` or a built-in profile like `cacheLife('minutes')`.
-- **Dynamic data** - `unstable_cache` did not support `cookies()` or `headers()` inside the callback. The same restriction applies to `use cache`, but you can use `'use cache: private'` if needed.
-
----
-
-## Limitations
-
-- **Edge runtime not supported** - requires Node.js
-- **Static export not supported** - needs server
-- **Non-deterministic values** (`Math.random()`, `Date.now()`) execute once at build time inside `use cache`
-
-For request-time randomness outside cache:
-
-```tsx
-import { connection } from 'next/server'
-
-async function DynamicContent() {
- await connection() // Defer to request time
- const id = crypto.randomUUID() // Different per request
- return
{id}
-}
-```
-
-Sources:
-- [Cache Components Guide](https://nextjs.org/docs/app/getting-started/cache-components)
-- [use cache Directive](https://nextjs.org/docs/app/api-reference/directives/use-cache)
-- [unstable_cache (legacy)](https://nextjs.org/docs/app/api-reference/functions/unstable_cache)
diff --git a/skills/next-upgrade/SKILL.md b/skills/next-upgrade/SKILL.md
deleted file mode 100644
index e2ca3ff..0000000
--- a/skills/next-upgrade/SKILL.md
+++ /dev/null
@@ -1,103 +0,0 @@
----
-name: next-upgrade
-description: Upgrade Next.js to the latest version following official migration guides and codemods. Use when upgrading Next.js versions, running codemods, or migrating between major releases.
-metadata:
- priority: 6
- docs:
- - "https://nextjs.org/docs/app/guides/upgrading"
- - "https://nextjs.org/docs/app/guides/upgrading/codemods"
- pathPatterns:
- - 'next.config.*'
- - 'package.json'
- bashPatterns:
- - '\bnpx\s+@next/codemod\b'
- - '\bnpm\s+(install|i|add)\s+[^\n]*\bnext@'
- - '\bpnpm\s+(install|i|add)\s+[^\n]*\bnext@'
- - '\bbun\s+(install|i|add)\s+[^\n]*\bnext@'
- - '\byarn\s+add\s+[^\n]*\bnext@'
- promptSignals:
- phrases:
- - "upgrade next"
- - "upgrade nextjs"
- - "migrate next"
- - "update next.js"
- - "next.js upgrade"
- - "nextjs migration"
- - "next codemod"
- allOf:
- - [upgrade, next]
- - [migrate, next]
- - [update, nextjs]
- anyOf:
- - "breaking changes"
- - "codemod"
- - "migration guide"
- - "version upgrade"
- noneOf: []
- minScore: 6
-retrieval:
- aliases:
- - next upgrade
- - nextjs migration
- - next codemod
- intents:
- - upgrade Next.js to latest version
- - run Next.js codemods
- - migrate between major Next.js versions
- entities:
- - codemod
- - migration
- - upgrade
- - breaking changes
-chainTo:
- -
- pattern: 'getServerSideProps|getStaticProps|next/router|next/head|next/document'
- targetSkill: nextjs
- message: 'Pages Router patterns detected during upgrade — loading Next.js best practices for App Router migration.'
-
----
-
-# Upgrade Next.js
-
-Upgrade the current project to the latest Next.js version following official migration guides.
-
-## Instructions
-
-1. **Detect current version**: Read `package.json` to identify the current Next.js version and related dependencies (React, React DOM, etc.)
-
-2. **Fetch the latest upgrade guide**: Use WebFetch to get the official upgrade documentation:
- - Codemods: https://nextjs.org/docs/app/guides/upgrading/codemods
- - Version-specific guides (adjust version as needed):
- - https://nextjs.org/docs/app/guides/upgrading/version-16
- - https://nextjs.org/docs/app/guides/upgrading/version-15
- - https://nextjs.org/docs/app/guides/upgrading/version-14
-
-3. **Determine upgrade path**: Based on current version, identify which migration steps apply. For major version jumps, upgrade incrementally (e.g., 13 → 14 → 15).
-
-4. **Run codemods first**: Next.js provides codemods to automate breaking changes:
- ```bash
- npx @next/codemod@latest
- ```
- Common transforms:
- - `next-async-request-api` - Updates async Request APIs (v15)
- - `next-request-geo-ip` - Migrates geo/ip properties (v15)
- - `next-dynamic-access-named-export` - Transforms dynamic imports (v15)
-
-5. **Update dependencies**: Upgrade Next.js and peer dependencies together:
- ```bash
- npm install next@latest react@latest react-dom@latest
- ```
-
-6. **Review breaking changes**: Check the upgrade guide for manual changes needed:
- - API changes (e.g., async params in v15)
- - Configuration changes in `next.config.js`
- - Deprecated features being removed
-
-7. **Update TypeScript types** (if applicable):
- ```bash
- npm install @types/react@latest @types/react-dom@latest
- ```
-
-8. **Test the upgrade**:
- - Run `npm run build` to check for build errors
- - Run `npm run dev` and test key functionality
diff --git a/skills/next-upgrade/overlay.yaml b/skills/next-upgrade/overlay.yaml
deleted file mode 100644
index a3d729e..0000000
--- a/skills/next-upgrade/overlay.yaml
+++ /dev/null
@@ -1,56 +0,0 @@
-name: next-upgrade
-description: Upgrade Next.js to the latest version following official migration guides and codemods. Use when upgrading Next.js versions, running codemods, or migrating between major releases.
-metadata:
- priority: 6
- docs:
- - "https://nextjs.org/docs/app/guides/upgrading"
- - "https://nextjs.org/docs/app/guides/upgrading/codemods"
- pathPatterns:
- - 'next.config.*'
- - 'package.json'
- bashPatterns:
- - '\bnpx\s+@next/codemod\b'
- - '\bnpm\s+(install|i|add)\s+[^\n]*\bnext@'
- - '\bpnpm\s+(install|i|add)\s+[^\n]*\bnext@'
- - '\bbun\s+(install|i|add)\s+[^\n]*\bnext@'
- - '\byarn\s+add\s+[^\n]*\bnext@'
- promptSignals:
- phrases:
- - "upgrade next"
- - "upgrade nextjs"
- - "migrate next"
- - "update next.js"
- - "next.js upgrade"
- - "nextjs migration"
- - "next codemod"
- allOf:
- - [upgrade, next]
- - [migrate, next]
- - [update, nextjs]
- anyOf:
- - "breaking changes"
- - "codemod"
- - "migration guide"
- - "version upgrade"
- noneOf: []
- minScore: 6
-retrieval:
- aliases:
- - next upgrade
- - nextjs migration
- - next codemod
- intents:
- - upgrade Next.js to latest version
- - run Next.js codemods
- - migrate between major Next.js versions
- entities:
- - codemod
- - migration
- - upgrade
- - breaking changes
-chainTo:
- -
- pattern: 'getServerSideProps|getStaticProps|next/router|next/head|next/document'
- targetSkill: nextjs
- message: 'Pages Router patterns detected during upgrade — loading Next.js best practices for App Router migration.'
-
diff --git a/skills/next-upgrade/upstream/SKILL.md b/skills/next-upgrade/upstream/SKILL.md
deleted file mode 100644
index a96bf91..0000000
--- a/skills/next-upgrade/upstream/SKILL.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-name: next-upgrade
-description: Upgrade Next.js to the latest version following official migration guides and codemods
-argument-hint: "[target-version]"
----
-
-# Upgrade Next.js
-
-Upgrade the current project to the latest Next.js version following official migration guides.
-
-## Instructions
-
-1. **Detect current version**: Read `package.json` to identify the current Next.js version and related dependencies (React, React DOM, etc.)
-
-2. **Fetch the latest upgrade guide**: Use WebFetch to get the official upgrade documentation:
- - Codemods: https://nextjs.org/docs/app/guides/upgrading/codemods
- - Version-specific guides (adjust version as needed):
- - https://nextjs.org/docs/app/guides/upgrading/version-16
- - https://nextjs.org/docs/app/guides/upgrading/version-15
- - https://nextjs.org/docs/app/guides/upgrading/version-14
-
-3. **Determine upgrade path**: Based on current version, identify which migration steps apply. For major version jumps, upgrade incrementally (e.g., 13 → 14 → 15).
-
-4. **Run codemods first**: Next.js provides codemods to automate breaking changes:
- ```bash
- npx @next/codemod@latest
- ```
- Common transforms:
- - `next-async-request-api` - Updates async Request APIs (v15)
- - `next-request-geo-ip` - Migrates geo/ip properties (v15)
- - `next-dynamic-access-named-export` - Transforms dynamic imports (v15)
-
-5. **Update dependencies**: Upgrade Next.js and peer dependencies together:
- ```bash
- npm install next@latest react@latest react-dom@latest
- ```
-
-6. **Review breaking changes**: Check the upgrade guide for manual changes needed:
- - API changes (e.g., async params in v15)
- - Configuration changes in `next.config.js`
- - Deprecated features being removed
-
-7. **Update TypeScript types** (if applicable):
- ```bash
- npm install @types/react@latest @types/react-dom@latest
- ```
-
-8. **Test the upgrade**:
- - Run `npm run build` to check for build errors
- - Run `npm run dev` and test key functionality
diff --git a/skills/nextjs/SKILL.md b/skills/nextjs/SKILL.md
deleted file mode 100644
index 07fae30..0000000
--- a/skills/nextjs/SKILL.md
+++ /dev/null
@@ -1,434 +0,0 @@
----
-name: nextjs
-description: Next.js App Router expert guidance. Use when building, debugging, or architecting Next.js applications — routing, Server Components, Server Actions, Cache Components, layouts, middleware/proxy, data fetching, rendering strategies, and deployment on Vercel.
-metadata:
- priority: 5
- docs:
- - "https://nextjs.org/docs"
- - "https://nextjs.org/docs/app"
- sitemap: "https://nextjs.org/sitemap.xml"
- pathPatterns:
- - 'next.config.*'
- - 'next-env.d.ts'
- - 'app/**'
- - 'pages/**'
- - 'src/app/**'
- - 'src/pages/**'
- - 'tailwind.config.*'
- - 'postcss.config.*'
- - 'tsconfig.json'
- - 'tsconfig.*.json'
- - 'apps/*/app/**'
- - 'apps/*/pages/**'
- - 'apps/*/src/app/**'
- - 'apps/*/src/pages/**'
- - 'apps/*/next.config.*'
- bashPatterns:
- - '\bnext\s+(dev|build|start|lint)\b'
- - '\bnext\s+experimental-analyze\b'
- - '\bnpx\s+create-next-app\b'
- - '\bbunx\s+create-next-app\b'
- - '\bnpm\s+run\s+(dev|build|start)\b'
- - '\bpnpm\s+(dev|build)\b'
- - '\bbun\s+run\s+(dev|build)\b'
- promptSignals:
- phrases:
- - "next.js"
- - "nextjs"
- - "app router"
- - "server component"
- - "server action"
- allOf:
- - [middleware, next]
- - [layout, route]
- anyOf:
- - "pages router"
- - "getserversideprops"
- - "use server"
- noneOf: []
- minScore: 6
-validate:
- -
- pattern: export.*getServerSideProps
- message: 'getServerSideProps is removed in App Router — use server components or route handlers'
- severity: error
- upgradeToSkill: nextjs
- upgradeWhy: 'Guides migration from Pages Router getServerSideProps to App Router server components with async data fetching.'
- -
- pattern: getServerSideProps
- message: 'getServerSideProps is a Pages Router pattern — migrate to App Router server components'
- severity: warn
- -
- pattern: export.*getStaticProps
- message: 'getStaticProps is removed in App Router — use generateStaticParams + server components instead'
- severity: error
- upgradeToSkill: nextjs
- upgradeWhy: 'Guides migration from Pages Router getStaticProps to App Router generateStaticParams with server components.'
- -
- pattern: getStaticProps
- message: 'getStaticProps is a Pages Router pattern — migrate to App Router generateStaticParams + server components'
- severity: warn
- -
- pattern: from\s+['"]next/router['"]
- message: 'next/router is Pages Router only — use next/navigation for App Router'
- severity: error
- upgradeToSkill: nextjs
- upgradeWhy: 'Guides migration from next/router to next/navigation with useRouter, usePathname, useSearchParams hooks.'
- -
- pattern: (useState|useEffect)
- message: 'React hooks require "use client" directive — add it at the top of client components'
- severity: warn
- skipIfFileContains: "^['\"]use client['\"]"
- -
- pattern: from\s+['"]next/head['"]
- message: 'next/head is Pages Router — use export const metadata or generateMetadata() in App Router. Run Skill(nextjs) for metadata API guidance.'
- severity: error
- upgradeToSkill: nextjs
- upgradeWhy: 'Guides migration from next/head to the App Router metadata API (export const metadata / generateMetadata()).'
- skipIfFileContains: export\s+(const\s+)?metadata|generateMetadata
- -
- pattern: export\s+(default\s+)?function\s+middleware
- message: 'middleware() is renamed to proxy() in Next.js 16 — rename the function and the file to proxy.ts. Run Skill(routing-middleware) for proxy.ts migration guidance.'
- severity: recommended
- upgradeToSkill: routing-middleware
- upgradeWhy: 'Guides migration from middleware.ts to proxy.ts with correct file placement, runtime config, and request interception patterns.'
- -
- pattern: revalidateTag\(\s*['"][^'"]+['"]\s*\)
- message: 'Single-arg revalidateTag(tag) is deprecated in Next.js 16 — pass a cacheLife profile: revalidateTag(tag, "max")'
- severity: recommended
- upgradeToSkill: nextjs
- upgradeWhy: 'Guides migration from single-arg revalidateTag to the Next.js 16 two-arg API with cacheLife profiles.'
- -
- pattern: '\bcacheHandler\s*:'
- message: 'Singular cacheHandler is deprecated in Next.js 16 — use cacheHandlers (plural) with per-type handlers'
- severity: recommended
- upgradeToSkill: nextjs
- upgradeWhy: 'Guides migration from singular cacheHandler to Next.js 16 cacheHandlers (plural) with per-type handler config.'
- -
- pattern: useRef\(\s*\)
- message: 'useRef() requires an initial value in React 19 — use useRef(null) or useRef(0)'
- severity: error
- -
- pattern: next\s+export
- message: 'next export was removed — use output: "export" in next.config.js for static export'
- severity: error
- upgradeToSkill: nextjs
- upgradeWhy: 'Guides migration from next export CLI command to output: "export" in next.config for static site generation.'
- -
- pattern: (?]*fonts\.googleapis'
- message: 'External font loader detected. Use next/font for zero-CLS, self-hosted font loading with automatic optimization.'
- severity: recommended
- upgradeToSkill: nextjs
- upgradeWhy: 'Guides migration from external font loaders to next/font with Geist Sans/Mono for zero-CLS font optimization.'
- skipIfFileContains: 'next/font'
-chainTo:
- -
- pattern: 'export\s+(default\s+)?function\s+middleware'
- targetSkill: routing-middleware
- message: 'middleware() is renamed to proxy() in Next.js 16 — loading Routing Middleware guidance for proxy.ts migration.'
- -
- pattern: "from\\s+['\"]@vercel/(postgres|kv)['\"]"
- targetSkill: vercel-storage
- message: 'Sunset storage package detected — loading Vercel Storage guidance for Neon/Upstash migration.'
- -
- pattern: "from\\s+['\"]@ai-sdk/(anthropic|openai)['\"]"
- targetSkill: ai-gateway
- message: 'Direct AI provider SDK import — loading AI Gateway guidance for unified model routing with failover and cost tracking.'
- -
- pattern: 'from\s+[''""](next-auth|@auth/core)[''""]|NextAuth\(|getServerSession\('
- targetSkill: auth
- message: 'Legacy auth pattern detected — loading managed authentication guidance (Clerk, Descope, Auth0).'
- -
- pattern: 'NextApiRequest|NextApiResponse|export\s+default\s+function\s+handler'
- targetSkill: vercel-functions
- message: 'Pages Router API handler detected — loading Vercel Functions guidance for App Router migration.'
- -
- pattern: 'from\s+[''""](lru-cache|node-cache|memory-cache)[''""]|new\s+(LRUCache|NodeCache)\('
- targetSkill: runtime-cache
- message: 'In-process cache detected — loading Runtime Cache guidance for serverless-compatible caching.'
- -
- pattern: 'fetch\s*\(\s*[''""](https?://)?(api\.openai\.com|api\.anthropic\.com|api\.cohere\.ai)'
- targetSkill: ai-gateway
- message: 'Raw AI provider fetch URL detected — loading AI Gateway guidance for unified routing, failover, and OIDC auth.'
- skipIfFileContains: '@ai-sdk/|from\s+[''""](ai)[''""]|ai-gateway|gateway\('
- -
- pattern: 'jwt\.(sign|verify|decode)\(|from\s+[''""](jsonwebtoken)[''""]|new\s+SignJWT\(|jwtVerify\('
- targetSkill: auth
- message: 'Manual JWT token handling detected — loading Auth guidance for managed authentication (Clerk, Descope, Auth0).'
- skipIfFileContains: 'clerkMiddleware|@clerk/|@auth0/|@descope/|from\s+[''""](next-auth)[''""]'
- -
- pattern: 'from\s+[''"]@/components/ui/|from\s+[''"]@/components/ui[''""]'
- targetSkill: shadcn
- message: 'shadcn/ui component imports detected — loading shadcn guidance for component composition, theming, and registry patterns.'
- skipIfFileContains: 'shadcn|components\.json'
- -
- pattern: 'from\s+[''""](styled-components|@emotion/(react|styled)|@mui/material)[''""]'
- targetSkill: shadcn
- message: 'CSS-in-JS library detected — loading shadcn/ui guidance for Tailwind CSS + Radix UI component patterns (Vercel recommended).'
- skipIfFileContains: '@/components/ui|shadcn'
- -
- pattern: 'getInitialProps'
- targetSkill: nextjs
- message: 'getInitialProps is a legacy Pages Router pattern — loading Next.js guidance for App Router migration with server components and async data fetching.'
- skipIfFileContains: 'app/.*page\.|generateStaticParams|use cache'
- -
- pattern: 'export.*getServerSideProps|getServerSideProps\s*\('
- targetSkill: nextjs
- message: 'getServerSideProps is a Pages Router pattern — loading Next.js guidance for App Router migration with server components and async data fetching.'
- skipIfFileContains: 'generateStaticParams|use cache|app/.*page\.'
- -
- pattern: 'export.*getStaticProps|getStaticProps\s*\('
- targetSkill: nextjs
- message: 'getStaticProps is a Pages Router pattern — loading Next.js guidance for App Router migration with generateStaticParams and server components.'
- skipIfFileContains: 'generateStaticParams|use cache|app/.*page\.'
- -
- pattern: '_app\.(tsx?|jsx?)'
- targetSkill: nextjs
- message: '_app.tsx is a Pages Router pattern — loading Next.js guidance for App Router layout.tsx migration.'
- skipIfFileContains: 'app/layout\.|app/.*layout\.'
- -
- pattern: '_document\.(tsx?|jsx?)'
- targetSkill: nextjs
- message: '_document.tsx is a Pages Router pattern — loading Next.js guidance for App Router layout.tsx with metadata API migration.'
- skipIfFileContains: 'app/layout\.|app/.*layout\.'
- -
- pattern: "from\\s+['\"]next/document['\"]"
- targetSkill: nextjs
- message: 'next/document is Pages Router only — loading Next.js guidance for App Router layout.tsx with html/body structure.'
- skipIfFileContains: 'app/layout\.|app/.*layout\.'
- -
- pattern: 'pages/api/'
- targetSkill: vercel-functions
- message: 'Pages Router API route (pages/api/) detected — loading Vercel Functions guidance for App Router route handlers with named HTTP exports.'
- skipIfFileContains: 'export\s+(async\s+)?function\s+(GET|POST|PUT|PATCH|DELETE)'
-retrieval:
- aliases:
- - next.js
- - nextjs app
- - react framework
- - app router
- intents:
- - set up routing and layouts in a Next.js app
- - choose between server and client components for a feature
- - configure data fetching or caching in App Router
- - add middleware or proxy logic to handle requests
- - set up server rendering for React pages
- - add a new page with dynamic route segments
- entities:
- - App Router
- - Server Components
- - Server Actions
- - generateMetadata
- - layout
- - proxy
- - next.config
- examples:
- - add a new page with dynamic routing
- - should this be a server or client component
- - set up middleware for auth redirects
- - configure caching for this data fetch
- - set up server rendering for my pages
-
----
-
-# Next.js Best Practices
-
-Apply these rules when writing or reviewing Next.js code.
-
-## File Conventions
-
-See [file-conventions.md](./file-conventions.md) for:
-- Project structure and special files
-- Route segments (dynamic, catch-all, groups)
-- Parallel and intercepting routes
-- Middleware rename in v16 (middleware → proxy)
-
-## RSC Boundaries
-
-Detect invalid React Server Component patterns.
-
-See [rsc-boundaries.md](./rsc-boundaries.md) for:
-- Async client component detection (invalid)
-- Non-serializable props detection
-- Server Action exceptions
-
-## Async Patterns
-
-Next.js 15+ async API changes.
-
-See [async-patterns.md](./async-patterns.md) for:
-- Async `params` and `searchParams`
-- Async `cookies()` and `headers()`
-- Migration codemod
-
-## Runtime Selection
-
-See [runtime-selection.md](./runtime-selection.md) for:
-- Default to Node.js runtime
-- When Edge runtime is appropriate
-
-## Directives
-
-See [directives.md](./directives.md) for:
-- `'use client'`, `'use server'` (React)
-- `'use cache'` (Next.js)
-
-## Functions
-
-See [functions.md](./functions.md) for:
-- Navigation hooks: `useRouter`, `usePathname`, `useSearchParams`, `useParams`
-- Server functions: `cookies`, `headers`, `draftMode`, `after`
-- Generate functions: `generateStaticParams`, `generateMetadata`
-
-## Error Handling
-
-See [error-handling.md](./error-handling.md) for:
-- `error.tsx`, `global-error.tsx`, `not-found.tsx`
-- `redirect`, `permanentRedirect`, `notFound`
-- `forbidden`, `unauthorized` (auth errors)
-- `unstable_rethrow` for catch blocks
-
-## Data Patterns
-
-See [data-patterns.md](./data-patterns.md) for:
-- Server Components vs Server Actions vs Route Handlers
-- Avoiding data waterfalls (`Promise.all`, Suspense, preload)
-- Client component data fetching
-
-## Route Handlers
-
-See [route-handlers.md](./route-handlers.md) for:
-- `route.ts` basics
-- GET handler conflicts with `page.tsx`
-- Environment behavior (no React DOM)
-- When to use vs Server Actions
-
-## Metadata & OG Images
-
-See [metadata.md](./metadata.md) for:
-- Static and dynamic metadata
-- `generateMetadata` function
-- OG image generation with `next/og`
-- File-based metadata conventions
-
-## Image Optimization
-
-See [image.md](./image.md) for:
-- Always use `next/image` over ``
-- Remote images configuration
-- Responsive `sizes` attribute
-- Blur placeholders
-- Priority loading for LCP
-
-## Font Optimization
-
-See [font.md](./font.md) for:
-- `next/font` setup
-- Google Fonts, local fonts
-- Tailwind CSS integration
-- Preloading subsets
-
-## Bundling
-
-See [bundling.md](./bundling.md) for:
-- Server-incompatible packages
-- CSS imports (not link tags)
-- Polyfills (already included)
-- ESM/CommonJS issues
-- Bundle analysis
-
-## Scripts
-
-See [scripts.md](./scripts.md) for:
-- `next/script` vs native script tags
-- Inline scripts need `id`
-- Loading strategies
-- Google Analytics with `@next/third-parties`
-
-## Hydration Errors
-
-See [hydration-error.md](./hydration-error.md) for:
-- Common causes (browser APIs, dates, invalid HTML)
-- Debugging with error overlay
-- Fixes for each cause
-
-## Suspense Boundaries
-
-See [suspense-boundaries.md](./suspense-boundaries.md) for:
-- CSR bailout with `useSearchParams` and `usePathname`
-- Which hooks require Suspense boundaries
-
-## Parallel & Intercepting Routes
-
-See [parallel-routes.md](./parallel-routes.md) for:
-- Modal patterns with `@slot` and `(.)` interceptors
-- `default.tsx` for fallbacks
-- Closing modals correctly with `router.back()`
-
-## Self-Hosting
-
-See [self-hosting.md](./self-hosting.md) for:
-- `output: 'standalone'` for Docker
-- Cache handlers for multi-instance ISR
-- What works vs needs extra setup
-
-## Debug Tricks
-
-See [debug-tricks.md](./debug-tricks.md) for:
-- MCP endpoint for AI-assisted debugging
-- Rebuild specific routes with `--debug-build-paths`
-
diff --git a/skills/nextjs/overlay.yaml b/skills/nextjs/overlay.yaml
deleted file mode 100644
index a049e11..0000000
--- a/skills/nextjs/overlay.yaml
+++ /dev/null
@@ -1,284 +0,0 @@
-name: nextjs
-description: Next.js App Router expert guidance. Use when building, debugging, or architecting Next.js applications — routing, Server Components, Server Actions, Cache Components, layouts, middleware/proxy, data fetching, rendering strategies, and deployment on Vercel.
-metadata:
- priority: 5
- docs:
- - "https://nextjs.org/docs"
- - "https://nextjs.org/docs/app"
- sitemap: "https://nextjs.org/sitemap.xml"
- pathPatterns:
- - 'next.config.*'
- - 'next-env.d.ts'
- - 'app/**'
- - 'pages/**'
- - 'src/app/**'
- - 'src/pages/**'
- - 'tailwind.config.*'
- - 'postcss.config.*'
- - 'tsconfig.json'
- - 'tsconfig.*.json'
- - 'apps/*/app/**'
- - 'apps/*/pages/**'
- - 'apps/*/src/app/**'
- - 'apps/*/src/pages/**'
- - 'apps/*/next.config.*'
- bashPatterns:
- - '\bnext\s+(dev|build|start|lint)\b'
- - '\bnext\s+experimental-analyze\b'
- - '\bnpx\s+create-next-app\b'
- - '\bbunx\s+create-next-app\b'
- - '\bnpm\s+run\s+(dev|build|start)\b'
- - '\bpnpm\s+(dev|build)\b'
- - '\bbun\s+run\s+(dev|build)\b'
- promptSignals:
- phrases:
- - "next.js"
- - "nextjs"
- - "app router"
- - "server component"
- - "server action"
- allOf:
- - [middleware, next]
- - [layout, route]
- anyOf:
- - "pages router"
- - "getserversideprops"
- - "use server"
- noneOf: []
- minScore: 6
-validate:
- -
- pattern: export.*getServerSideProps
- message: 'getServerSideProps is removed in App Router — use server components or route handlers'
- severity: error
- upgradeToSkill: nextjs
- upgradeWhy: 'Guides migration from Pages Router getServerSideProps to App Router server components with async data fetching.'
- -
- pattern: getServerSideProps
- message: 'getServerSideProps is a Pages Router pattern — migrate to App Router server components'
- severity: warn
- -
- pattern: export.*getStaticProps
- message: 'getStaticProps is removed in App Router — use generateStaticParams + server components instead'
- severity: error
- upgradeToSkill: nextjs
- upgradeWhy: 'Guides migration from Pages Router getStaticProps to App Router generateStaticParams with server components.'
- -
- pattern: getStaticProps
- message: 'getStaticProps is a Pages Router pattern — migrate to App Router generateStaticParams + server components'
- severity: warn
- -
- pattern: from\s+['"]next/router['"]
- message: 'next/router is Pages Router only — use next/navigation for App Router'
- severity: error
- upgradeToSkill: nextjs
- upgradeWhy: 'Guides migration from next/router to next/navigation with useRouter, usePathname, useSearchParams hooks.'
- -
- pattern: (useState|useEffect)
- message: 'React hooks require "use client" directive — add it at the top of client components'
- severity: warn
- skipIfFileContains: "^['\"]use client['\"]"
- -
- pattern: from\s+['"]next/head['"]
- message: 'next/head is Pages Router — use export const metadata or generateMetadata() in App Router. Run Skill(nextjs) for metadata API guidance.'
- severity: error
- upgradeToSkill: nextjs
- upgradeWhy: 'Guides migration from next/head to the App Router metadata API (export const metadata / generateMetadata()).'
- skipIfFileContains: export\s+(const\s+)?metadata|generateMetadata
- -
- pattern: export\s+(default\s+)?function\s+middleware
- message: 'middleware() is renamed to proxy() in Next.js 16 — rename the function and the file to proxy.ts. Run Skill(routing-middleware) for proxy.ts migration guidance.'
- severity: recommended
- upgradeToSkill: routing-middleware
- upgradeWhy: 'Guides migration from middleware.ts to proxy.ts with correct file placement, runtime config, and request interception patterns.'
- -
- pattern: revalidateTag\(\s*['"][^'"]+['"]\s*\)
- message: 'Single-arg revalidateTag(tag) is deprecated in Next.js 16 — pass a cacheLife profile: revalidateTag(tag, "max")'
- severity: recommended
- upgradeToSkill: nextjs
- upgradeWhy: 'Guides migration from single-arg revalidateTag to the Next.js 16 two-arg API with cacheLife profiles.'
- -
- pattern: '\bcacheHandler\s*:'
- message: 'Singular cacheHandler is deprecated in Next.js 16 — use cacheHandlers (plural) with per-type handlers'
- severity: recommended
- upgradeToSkill: nextjs
- upgradeWhy: 'Guides migration from singular cacheHandler to Next.js 16 cacheHandlers (plural) with per-type handler config.'
- -
- pattern: useRef\(\s*\)
- message: 'useRef() requires an initial value in React 19 — use useRef(null) or useRef(0)'
- severity: error
- -
- pattern: next\s+export
- message: 'next export was removed — use output: "export" in next.config.js for static export'
- severity: error
- upgradeToSkill: nextjs
- upgradeWhy: 'Guides migration from next export CLI command to output: "export" in next.config for static site generation.'
- -
- pattern: (?]*fonts\.googleapis'
- message: 'External font loader detected. Use next/font for zero-CLS, self-hosted font loading with automatic optimization.'
- severity: recommended
- upgradeToSkill: nextjs
- upgradeWhy: 'Guides migration from external font loaders to next/font with Geist Sans/Mono for zero-CLS font optimization.'
- skipIfFileContains: 'next/font'
-chainTo:
- -
- pattern: 'export\s+(default\s+)?function\s+middleware'
- targetSkill: routing-middleware
- message: 'middleware() is renamed to proxy() in Next.js 16 — loading Routing Middleware guidance for proxy.ts migration.'
- -
- pattern: "from\\s+['\"]@vercel/(postgres|kv)['\"]"
- targetSkill: vercel-storage
- message: 'Sunset storage package detected — loading Vercel Storage guidance for Neon/Upstash migration.'
- -
- pattern: "from\\s+['\"]@ai-sdk/(anthropic|openai)['\"]"
- targetSkill: ai-gateway
- message: 'Direct AI provider SDK import — loading AI Gateway guidance for unified model routing with failover and cost tracking.'
- -
- pattern: 'from\s+[''""](next-auth|@auth/core)[''""]|NextAuth\(|getServerSession\('
- targetSkill: auth
- message: 'Legacy auth pattern detected — loading managed authentication guidance (Clerk, Descope, Auth0).'
- -
- pattern: 'NextApiRequest|NextApiResponse|export\s+default\s+function\s+handler'
- targetSkill: vercel-functions
- message: 'Pages Router API handler detected — loading Vercel Functions guidance for App Router migration.'
- -
- pattern: 'from\s+[''""](lru-cache|node-cache|memory-cache)[''""]|new\s+(LRUCache|NodeCache)\('
- targetSkill: runtime-cache
- message: 'In-process cache detected — loading Runtime Cache guidance for serverless-compatible caching.'
- -
- pattern: 'fetch\s*\(\s*[''""](https?://)?(api\.openai\.com|api\.anthropic\.com|api\.cohere\.ai)'
- targetSkill: ai-gateway
- message: 'Raw AI provider fetch URL detected — loading AI Gateway guidance for unified routing, failover, and OIDC auth.'
- skipIfFileContains: '@ai-sdk/|from\s+[''""](ai)[''""]|ai-gateway|gateway\('
- -
- pattern: 'jwt\.(sign|verify|decode)\(|from\s+[''""](jsonwebtoken)[''""]|new\s+SignJWT\(|jwtVerify\('
- targetSkill: auth
- message: 'Manual JWT token handling detected — loading Auth guidance for managed authentication (Clerk, Descope, Auth0).'
- skipIfFileContains: 'clerkMiddleware|@clerk/|@auth0/|@descope/|from\s+[''""](next-auth)[''""]'
- -
- pattern: 'from\s+[''"]@/components/ui/|from\s+[''"]@/components/ui[''""]'
- targetSkill: shadcn
- message: 'shadcn/ui component imports detected — loading shadcn guidance for component composition, theming, and registry patterns.'
- skipIfFileContains: 'shadcn|components\.json'
- -
- pattern: 'from\s+[''""](styled-components|@emotion/(react|styled)|@mui/material)[''""]'
- targetSkill: shadcn
- message: 'CSS-in-JS library detected — loading shadcn/ui guidance for Tailwind CSS + Radix UI component patterns (Vercel recommended).'
- skipIfFileContains: '@/components/ui|shadcn'
- -
- pattern: 'getInitialProps'
- targetSkill: nextjs
- message: 'getInitialProps is a legacy Pages Router pattern — loading Next.js guidance for App Router migration with server components and async data fetching.'
- skipIfFileContains: 'app/.*page\.|generateStaticParams|use cache'
- -
- pattern: 'export.*getServerSideProps|getServerSideProps\s*\('
- targetSkill: nextjs
- message: 'getServerSideProps is a Pages Router pattern — loading Next.js guidance for App Router migration with server components and async data fetching.'
- skipIfFileContains: 'generateStaticParams|use cache|app/.*page\.'
- -
- pattern: 'export.*getStaticProps|getStaticProps\s*\('
- targetSkill: nextjs
- message: 'getStaticProps is a Pages Router pattern — loading Next.js guidance for App Router migration with generateStaticParams and server components.'
- skipIfFileContains: 'generateStaticParams|use cache|app/.*page\.'
- -
- pattern: '_app\.(tsx?|jsx?)'
- targetSkill: nextjs
- message: '_app.tsx is a Pages Router pattern — loading Next.js guidance for App Router layout.tsx migration.'
- skipIfFileContains: 'app/layout\.|app/.*layout\.'
- -
- pattern: '_document\.(tsx?|jsx?)'
- targetSkill: nextjs
- message: '_document.tsx is a Pages Router pattern — loading Next.js guidance for App Router layout.tsx with metadata API migration.'
- skipIfFileContains: 'app/layout\.|app/.*layout\.'
- -
- pattern: "from\\s+['\"]next/document['\"]"
- targetSkill: nextjs
- message: 'next/document is Pages Router only — loading Next.js guidance for App Router layout.tsx with html/body structure.'
- skipIfFileContains: 'app/layout\.|app/.*layout\.'
- -
- pattern: 'pages/api/'
- targetSkill: vercel-functions
- message: 'Pages Router API route (pages/api/) detected — loading Vercel Functions guidance for App Router route handlers with named HTTP exports.'
- skipIfFileContains: 'export\s+(async\s+)?function\s+(GET|POST|PUT|PATCH|DELETE)'
-retrieval:
- aliases:
- - next.js
- - nextjs app
- - react framework
- - app router
- intents:
- - set up routing and layouts in a Next.js app
- - choose between server and client components for a feature
- - configure data fetching or caching in App Router
- - add middleware or proxy logic to handle requests
- - set up server rendering for React pages
- - add a new page with dynamic route segments
- entities:
- - App Router
- - Server Components
- - Server Actions
- - generateMetadata
- - layout
- - proxy
- - next.config
- examples:
- - add a new page with dynamic routing
- - should this be a server or client component
- - set up middleware for auth redirects
- - configure caching for this data fetch
- - set up server rendering for my pages
-
diff --git a/skills/nextjs/references/app-router-files.md b/skills/nextjs/references/app-router-files.md
deleted file mode 100644
index 0061932..0000000
--- a/skills/nextjs/references/app-router-files.md
+++ /dev/null
@@ -1,94 +0,0 @@
-# Next.js App Router — File Convention Reference
-
-## Special Files
-
-| File | Purpose | Server/Client |
-|------|---------|---------------|
-| `layout.tsx` | Shared UI wrapper, preserves state | Server (default) |
-| `page.tsx` | Unique route UI | Server (default) |
-| `loading.tsx` | Suspense fallback | Server (default) |
-| `error.tsx` | Error boundary | Client (required) |
-| `not-found.tsx` | 404 UI | Server (default) |
-| `route.ts` | API endpoint (Route Handler) | Server only |
-| `template.tsx` | Layout that remounts on navigation | Server (default) |
-| `default.tsx` | Parallel route fallback | Server (default) |
-| `proxy.ts` | Network proxy (replaces middleware) | Server (Node.js) |
-| `opengraph-image.tsx` | Auto-generated OG image for route | Server (Edge) |
-| `twitter-image.tsx` | Auto-generated Twitter card image | Server (Edge) |
-
-## Route Segments
-
-| Pattern | Example | Matches |
-|---------|---------|---------|
-| `[id]` | `app/users/[id]/page.tsx` | `/users/123` |
-| `[...slug]` | `app/docs/[...slug]/page.tsx` | `/docs/a/b/c` |
-| `[[...slug]]` | `app/shop/[[...slug]]/page.tsx` | `/shop` or `/shop/a/b` |
-| `(group)` | `app/(marketing)/page.tsx` | `/` (group ignored in URL) |
-| `@slot` | `app/@sidebar/page.tsx` | Parallel route slot |
-
-## Data Fetching Patterns
-
-### Server Component (Default)
-```tsx
-export default async function Page() {
- const data = await fetch('https://api.example.com/data')
- return
{data}
-}
-```
-
-### With Params (Async in Next.js 16)
-```tsx
-export default async function Page({
- params,
-}: {
- params: Promise<{ id: string }>
-}) {
- const { id } = await params
- const user = await getUser(id)
- return
-}
-```
-
-### With Search Params (Async in Next.js 16)
-```tsx
-export default async function Page({
- searchParams,
-}: {
- searchParams: Promise<{ q?: string }>
-}) {
- const { q } = await searchParams
- const results = await search(q)
- return
-}
-```
-
-### generateStaticParams (SSG)
-```tsx
-export async function generateStaticParams() {
- const posts = await getPosts()
- return posts.map((post) => ({ slug: post.slug }))
-}
-
-export default async function Page({
- params,
-}: {
- params: Promise<{ slug: string }>
-}) {
- const { slug } = await params
- const post = await getPost(slug)
- return
-}
-```
-
-### generateMetadata
-```tsx
-export async function generateMetadata({
- params,
-}: {
- params: Promise<{ id: string }>
-}) {
- const { id } = await params
- const product = await getProduct(id)
- return { title: product.name, description: product.description }
-}
-```
diff --git a/skills/nextjs/references/async-patterns.md b/skills/nextjs/references/async-patterns.md
deleted file mode 100644
index dce8d8c..0000000
--- a/skills/nextjs/references/async-patterns.md
+++ /dev/null
@@ -1,87 +0,0 @@
-# Async Patterns
-
-In Next.js 15+, `params`, `searchParams`, `cookies()`, and `headers()` are asynchronous.
-
-## Async Params and SearchParams
-
-Always type them as `Promise<...>` and await them.
-
-### Pages and Layouts
-
-```tsx
-type Props = { params: Promise<{ slug: string }> }
-
-export default async function Page({ params }: Props) {
- const { slug } = await params
-}
-```
-
-### Route Handlers
-
-```tsx
-export async function GET(
- request: Request,
- { params }: { params: Promise<{ id: string }> }
-) {
- const { id } = await params
-}
-```
-
-### SearchParams
-
-```tsx
-type Props = {
- params: Promise<{ slug: string }>
- searchParams: Promise<{ query?: string }>
-}
-
-export default async function Page({ params, searchParams }: Props) {
- const { slug } = await params
- const { query } = await searchParams
-}
-```
-
-### Synchronous Components
-
-Use `React.use()` for non-async components:
-
-```tsx
-import { use } from 'react'
-
-type Props = { params: Promise<{ slug: string }> }
-
-export default function Page({ params }: Props) {
- const { slug } = use(params)
-}
-```
-
-### generateMetadata
-
-```tsx
-type Props = { params: Promise<{ slug: string }> }
-
-export async function generateMetadata({ params }: Props): Promise {
- const { slug } = await params
- return { title: slug }
-}
-```
-
-## Async Cookies and Headers
-
-```tsx
-import { cookies, headers } from 'next/headers'
-
-export default async function Page() {
- const cookieStore = await cookies()
- const headersList = await headers()
-
- const theme = cookieStore.get('theme')
- const userAgent = headersList.get('user-agent')
-}
-```
-
-## Migration Codemod
-
-```bash
-npx @next/codemod@latest next-async-request-api .
-```
diff --git a/skills/nextjs/references/bundling.md b/skills/nextjs/references/bundling.md
deleted file mode 100644
index ac5e814..0000000
--- a/skills/nextjs/references/bundling.md
+++ /dev/null
@@ -1,180 +0,0 @@
-# Bundling
-
-Fix common bundling issues with third-party packages.
-
-## Server-Incompatible Packages
-
-Some packages use browser APIs (`window`, `document`, `localStorage`) and fail in Server Components.
-
-### Error Signs
-
-```
-ReferenceError: window is not defined
-ReferenceError: document is not defined
-ReferenceError: localStorage is not defined
-Module not found: Can't resolve 'fs'
-```
-
-### Solution 1: Mark as Client-Only
-
-If the package is only needed on client:
-
-```tsx
-// Bad: Fails - package uses window
-import SomeChart from 'some-chart-library'
-
-export default function Page() {
- return
-}
-
-// Good: Use dynamic import with ssr: false
-import dynamic from 'next/dynamic'
-
-const SomeChart = dynamic(() => import('some-chart-library'), {
- ssr: false,
-})
-
-export default function Page() {
- return
-}
-```
-
-### Solution 2: Externalize from Server Bundle
-
-For packages that should run on server but have bundling issues:
-
-```js
-// next.config.js
-module.exports = {
- serverExternalPackages: ['problematic-package'],
-}
-```
-
-Use this for:
-- Packages with native bindings (sharp, bcrypt)
-- Packages that don't bundle well (some ORMs)
-- Packages with circular dependencies
-
-### Solution 3: Client Component Wrapper
-
-Wrap the entire usage in a client component:
-
-```tsx
-// components/ChartWrapper.tsx
-'use client'
-
-import { Chart } from 'chart-library'
-
-export function ChartWrapper(props) {
- return
-}
-
-// app/page.tsx (server component)
-import { ChartWrapper } from '@/components/ChartWrapper'
-
-export default function Page() {
- return
-}
-```
-
-## CSS Imports
-
-Import CSS files instead of using `` tags. Next.js handles bundling and optimization.
-
-```tsx
-// Bad: Manual link tag
-
-
-// Good: Import CSS
-import './styles.css'
-
-// Good: CSS Modules
-import styles from './Button.module.css'
-```
-
-## Polyfills
-
-Next.js includes common polyfills automatically. Don't load redundant ones from polyfill.io or similar CDNs.
-
-Already included: `Array.from`, `Object.assign`, `Promise`, `fetch`, `Map`, `Set`, `Symbol`, `URLSearchParams`, and 50+ others.
-
-```tsx
-// Bad: Redundant polyfills
-
-
-// Good: Next.js includes these automatically
-```
-
-## ESM/CommonJS Issues
-
-### Error Signs
-
-```
-SyntaxError: Cannot use import statement outside a module
-Error: require() of ES Module
-Module not found: ESM packages need to be imported
-```
-
-### Solution: Transpile Package
-
-```js
-// next.config.js
-module.exports = {
- transpilePackages: ['some-esm-package', 'another-package'],
-}
-```
-
-## Common Problematic Packages
-
-| Package | Issue | Solution |
-|---------|-------|----------|
-| `sharp` | Native bindings | `serverExternalPackages: ['sharp']` |
-| `bcrypt` | Native bindings | `serverExternalPackages: ['bcrypt']` or use `bcryptjs` |
-| `canvas` | Native bindings | `serverExternalPackages: ['canvas']` |
-| `recharts` | Uses window | `dynamic(() => import('recharts'), { ssr: false })` |
-| `react-quill` | Uses document | `dynamic(() => import('react-quill'), { ssr: false })` |
-| `mapbox-gl` | Uses window | `dynamic(() => import('mapbox-gl'), { ssr: false })` |
-| `monaco-editor` | Uses window | `dynamic(() => import('@monaco-editor/react'), { ssr: false })` |
-| `lottie-web` | Uses document | `dynamic(() => import('lottie-react'), { ssr: false })` |
-
-## Bundle Analysis
-
-Analyze bundle size with the built-in analyzer (Next.js 16.1+):
-
-```bash
-next experimental-analyze
-```
-
-This opens an interactive UI to:
-- Filter by route, environment (client/server), and type
-- Inspect module sizes and import chains
-- View treemap visualization
-
-Save output for comparison:
-
-```bash
-next experimental-analyze --output
-# Output saved to .next/diagnostics/analyze
-```
-
-Reference: https://nextjs.org/docs/app/guides/package-bundling
-
-## Migrating from Webpack to Turbopack
-
-Turbopack is the default bundler in Next.js 15+. If you have custom webpack config, migrate to Turbopack-compatible alternatives:
-
-```js
-// next.config.js
-module.exports = {
- // Good: Works with Turbopack
- serverExternalPackages: ['package'],
- transpilePackages: ['package'],
-
- // Bad: Webpack-only - migrate away from this
- webpack: (config) => {
- // custom webpack config
- },
-}
-```
-
-Reference: https://nextjs.org/docs/app/building-your-application/upgrading/from-webpack-to-turbopack
diff --git a/skills/nextjs/references/data-patterns.md b/skills/nextjs/references/data-patterns.md
deleted file mode 100644
index 8fc17f1..0000000
--- a/skills/nextjs/references/data-patterns.md
+++ /dev/null
@@ -1,297 +0,0 @@
-# Data Patterns
-
-Choose the right data fetching pattern for each use case.
-
-## Decision Tree
-
-```
-Need to fetch data?
-├── From a Server Component?
-│ └── Use: Fetch directly (no API needed)
-│
-├── From a Client Component?
-│ ├── Is it a mutation (POST/PUT/DELETE)?
-│ │ └── Use: Server Action
-│ └── Is it a read (GET)?
-│ └── Use: Route Handler OR pass from Server Component
-│
-├── Need external API access (webhooks, third parties)?
-│ └── Use: Route Handler
-│
-└── Need REST API for mobile app / external clients?
- └── Use: Route Handler
-```
-
-## Pattern 1: Server Components (Preferred for Reads)
-
-Fetch data directly in Server Components - no API layer needed.
-
-```tsx
-// app/users/page.tsx
-async function UsersPage() {
- // Direct database access - no API round-trip
- const users = await db.user.findMany();
-
- // Or fetch from external API
- const posts = await fetch('https://api.example.com/posts').then(r => r.json());
-
- return (
-
- {users.map(user =>
{user.name}
)}
-
- );
-}
-```
-
-**Benefits**:
-- No API to maintain
-- No client-server waterfall
-- Secrets stay on server
-- Direct database access
-
-## Pattern 2: Server Actions (Preferred for Mutations)
-
-Server Actions are the recommended way to handle mutations.
-
-```tsx
-// app/actions.ts
-'use server';
-
-import { revalidatePath } from 'next/cache';
-
-export async function createPost(formData: FormData) {
- const title = formData.get('title') as string;
-
- await db.post.create({ data: { title } });
-
- revalidatePath('/posts');
-}
-
-export async function deletePost(id: string) {
- await db.post.delete({ where: { id } });
-
- revalidateTag('posts');
-}
-```
-
-```tsx
-// app/posts/new/page.tsx
-import { createPost } from '@/app/actions';
-
-export default function NewPost() {
- return (
-
- );
-}
-```
-
-**Benefits**:
-- End-to-end type safety
-- Progressive enhancement (works without JS)
-- Automatic request handling
-- Integrated with React transitions
-
-**Constraints**:
-- POST only (no GET caching semantics)
-- Internal use only (no external access)
-- Cannot return non-serializable data
-
-## Pattern 3: Route Handlers (APIs)
-
-Use Route Handlers when you need a REST API.
-
-```tsx
-// app/api/posts/route.ts
-import { NextRequest, NextResponse } from 'next/server';
-
-// GET is cacheable
-export async function GET(request: NextRequest) {
- const posts = await db.post.findMany();
- return NextResponse.json(posts);
-}
-
-// POST for mutations
-export async function POST(request: NextRequest) {
- const body = await request.json();
- const post = await db.post.create({ data: body });
- return NextResponse.json(post, { status: 201 });
-}
-```
-
-**When to use**:
-- External API access (mobile apps, third parties)
-- Webhooks from external services
-- GET endpoints that need HTTP caching
-- OpenAPI/Swagger documentation needed
-
-**When NOT to use**:
-- Internal data fetching (use Server Components)
-- Mutations from your UI (use Server Actions)
-
-## Avoiding Data Waterfalls
-
-### Problem: Sequential Fetches
-
-```tsx
-// Bad: Sequential waterfalls
-async function Dashboard() {
- const user = await getUser(); // Wait...
- const posts = await getPosts(); // Then wait...
- const comments = await getComments(); // Then wait...
-
- return
;
-}
-```
-
-### Option 3: Server Action for Reads (Works But Not Ideal)
-
-Server Actions can be called from Client Components for reads, but this is not their intended purpose:
-
-```tsx
-'use client';
-import { getData } from './actions';
-import { useEffect, useState } from 'react';
-
-function ClientComponent() {
- const [data, setData] = useState(null);
-
- useEffect(() => {
- getData().then(setData);
- }, []);
-
- return
{data?.value}
;
-}
-```
-
-**Note**: Server Actions always use POST, so no HTTP caching. Prefer Route Handlers for cacheable reads.
-
-## Quick Reference
-
-| Pattern | Use Case | HTTP Method | Caching |
-|---------|----------|-------------|---------|
-| Server Component fetch | Internal reads | Any | Full Next.js caching |
-| Server Action | Mutations, form submissions | POST only | No |
-| Route Handler | External APIs, webhooks | Any | GET can be cached |
-| Client fetch to API | Client-side reads | Any | HTTP cache headers |
diff --git a/skills/nextjs/references/debug-tricks.md b/skills/nextjs/references/debug-tricks.md
deleted file mode 100644
index 9151ce6..0000000
--- a/skills/nextjs/references/debug-tricks.md
+++ /dev/null
@@ -1,105 +0,0 @@
-# Debug Tricks
-
-Tricks to speed up debugging Next.js applications.
-
-## MCP Endpoint (Dev Server)
-
-Next.js exposes a `/_next/mcp` endpoint in development for AI-assisted debugging via MCP (Model Context Protocol).
-
-- **Next.js 16+**: Enabled by default, use `next-devtools-mcp`
-- **Next.js < 16**: Requires `experimental.mcpServer: true` in next.config.js
-
-Reference: https://nextjs.org/docs/app/guides/mcp
-
-**Important**: Find the actual port of the running Next.js dev server (check terminal output or `package.json` scripts). Don't assume port 3000.
-
-### Request Format
-
-The endpoint uses JSON-RPC 2.0 over HTTP POST:
-
-```bash
-curl -X POST http://localhost:/_next/mcp \
- -H "Content-Type: application/json" \
- -H "Accept: application/json, text/event-stream" \
- -d '{
- "jsonrpc": "2.0",
- "id": "1",
- "method": "tools/call",
- "params": {
- "name": "",
- "arguments": {}
- }
- }'
-```
-
-### Available Tools
-
-#### `get_errors`
-Get current errors from dev server (build errors, runtime errors with source-mapped stacks):
-```json
-{ "name": "get_errors", "arguments": {} }
-```
-
-#### `get_routes`
-Discover all routes by scanning filesystem:
-```json
-{ "name": "get_routes", "arguments": {} }
-// Optional: { "name": "get_routes", "arguments": { "routerType": "app" } }
-```
-Returns: `{ "appRouter": ["/", "/api/users/[id]", ...], "pagesRouter": [...] }`
-
-#### `get_project_metadata`
-Get project path and dev server URL:
-```json
-{ "name": "get_project_metadata", "arguments": {} }
-```
-Returns: `{ "projectPath": "/path/to/project", "devServerUrl": "http://localhost:3000" }`
-
-#### `get_page_metadata`
-Get runtime metadata about current page render (requires active browser session):
-```json
-{ "name": "get_page_metadata", "arguments": {} }
-```
-Returns segment trie data showing layouts, boundaries, and page components.
-
-#### `get_logs`
-Get path to Next.js development log file:
-```json
-{ "name": "get_logs", "arguments": {} }
-```
-Returns path to `/logs/next-development.log`
-
-#### `get_server_action_by_id`
-Locate a Server Action by ID:
-```json
-{ "name": "get_server_action_by_id", "arguments": { "actionId": "" } }
-```
-
-### Example: Get Errors
-
-```bash
-curl -X POST http://localhost:/_next/mcp \
- -H "Content-Type: application/json" \
- -H "Accept: application/json, text/event-stream" \
- -d '{"jsonrpc":"2.0","id":"1","method":"tools/call","params":{"name":"get_errors","arguments":{}}}'
-```
-
-## Rebuild Specific Routes (Next.js 16+)
-
-Use `--debug-build-paths` to rebuild only specific routes instead of the entire app:
-
-```bash
-# Rebuild a specific route
-next build --debug-build-paths "/dashboard"
-
-# Rebuild routes matching a glob
-next build --debug-build-paths "/api/*"
-
-# Dynamic routes
-next build --debug-build-paths "/blog/[slug]"
-```
-
-Use this to:
-- Quickly verify a build fix without full rebuild
-- Debug static generation issues for specific pages
-- Iterate faster on build errors
diff --git a/skills/nextjs/references/directives.md b/skills/nextjs/references/directives.md
deleted file mode 100644
index 1ea1637..0000000
--- a/skills/nextjs/references/directives.md
+++ /dev/null
@@ -1,73 +0,0 @@
-# Directives
-
-## React Directives
-
-These are React directives, not Next.js specific.
-
-### `'use client'`
-
-Marks a component as a Client Component. Required for:
-- React hooks (`useState`, `useEffect`, etc.)
-- Event handlers (`onClick`, `onChange`)
-- Browser APIs (`window`, `localStorage`)
-
-```tsx
-'use client'
-
-import { useState } from 'react'
-
-export function Counter() {
- const [count, setCount] = useState(0)
- return
-}
-```
-
-Reference: https://react.dev/reference/rsc/use-client
-
-### `'use server'`
-
-Marks a function as a Server Action. Can be passed to Client Components.
-
-```tsx
-'use server'
-
-export async function submitForm(formData: FormData) {
- // Runs on server
-}
-```
-
-Or inline within a Server Component:
-
-```tsx
-export default function Page() {
- async function submit() {
- 'use server'
- // Runs on server
- }
- return
-}
-```
-
-Reference: https://react.dev/reference/rsc/use-server
-
----
-
-## Next.js Directive
-
-### `'use cache'`
-
-Marks a function or component for caching. Part of Next.js Cache Components.
-
-```tsx
-'use cache'
-
-export async function getCachedData() {
- return await fetchData()
-}
-```
-
-Requires `cacheComponents: true` in `next.config.ts`.
-
-For detailed usage including cache profiles, `cacheLife()`, `cacheTag()`, and `updateTag()`, see the `next-cache-components` skill.
-
-Reference: https://nextjs.org/docs/app/api-reference/directives/use-cache
diff --git a/skills/nextjs/references/error-handling.md b/skills/nextjs/references/error-handling.md
deleted file mode 100644
index 663e37b..0000000
--- a/skills/nextjs/references/error-handling.md
+++ /dev/null
@@ -1,227 +0,0 @@
-# Error Handling
-
-Handle errors gracefully in Next.js applications.
-
-Reference: https://nextjs.org/docs/app/getting-started/error-handling
-
-## Error Boundaries
-
-### `error.tsx`
-
-Catches errors in a route segment and its children:
-
-```tsx
-'use client'
-
-export default function Error({
- error,
- reset,
-}: {
- error: Error & { digest?: string }
- reset: () => void
-}) {
- return (
-