This skill should be used when the user asks to "update documentation for my changes", "check docs for this PR", "what docs need updating", "sync docs with code", "scaffold docs for this feature", "document this feature", "review docs completeness", "add docs for this change", "what documentation is affected", "docs impact", or mentions "docs/", "docs/01-app", "docs/02-pages", "MDX", "documentation update", "API reference", ".mdx files". Provides guided workflow for updating Next.js documentation based on code changes.
Use the skills CLI to install this skill with one command. Auto-detects all installed AI assistants.
Method 1 - skills CLI
npx skills i vercel/next.js/.claude/skills/update-docsMethod 2 - openskills (supports sync & update)
npx openskills install vercel/next.jsAuto-detects Claude Code, Cursor, Codex CLI, Gemini CLI, and more. One install, works everywhere.
Installation Path
Download and extract to one of the following locations:
No setup needed. Let our cloud agents run this skill for you.
Select Provider
Select Model
Best for coding tasks
Environment setup included
Guides you through updating Next.js documentation based on code changes on the active branch. Designed for maintainers reviewing PRs for documentation completeness.
git diff canary...HEAD --stat to see what files changedpnpm lint to check formatting# See all changed files on this branch
git diff canary...HEAD --stat
# See changes in specific areas
git diff canary...HEAD -- packages/next/src/Look for changes in these areas:
| Source Path | Likely Doc Impact |
|---|---|
packages/next/src/client/components/ | Component API reference |
packages/next/src/server/ | Function API reference |
packages/next/src/shared/lib/ | Varies by export |
packages/next/src/build/ | Configuration or build docs |
packages/next/src/lib/ | Various features |
Use the code-to-docs mapping in references/CODE-TO-DOCS-MAPPING.md to find corresponding documentation files.
Example mappings:
src/client/components/image.tsx → docs/01-app/03-api-reference/02-components/image.mdxsrc/server/config-shared.ts → docs/01-app/03-api-reference/05-config/Before making changes, read the existing doc to understand:
<AppOnly> / <PagesOnly> for router-specific contentCommon updates include:
For each change:
If the doc uses the source field pattern (common for Pages Router docs), the source file is the one to edit. Example:
# docs/02-pages/... file with shared content
---
source: app/building-your-application/optimizing/images
---Edit the App Router source, not the Pages Router file.
pnpm lint # Check formatting
pnpm prettier-fix # Auto-fix formatting issuesUse this when adding documentation for entirely new features.
| Feature Type | Doc Location | Template |
|---|---|---|
| New component | docs/01-app/03-api-reference/02-components/ | API Reference |
| New function | docs/01-app/03-api-reference/04-functions/ | API Reference |
| New config option | docs/01-app/03-api-reference/05-config/ | Config Reference |
| New concept/guide | docs/01-app/02-guides/ | Guide |
| New file convention |
my-new-feature.mdx05-my-new-feature.mdxAPI Reference Template:
---
title: Feature Name
description: Brief description of what this feature does.
---
{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
Brief introduction to the feature.
## Reference
### Props
<div style
Guide Template:
---
title: How to do X in Next.js
nav_title: X
description: Learn how to implement X in your Next.js application.
---
Introduction explaining why this guide is useful.
## Prerequisites
What the reader needs to know before starting.
## Step 1: First Step
Explanation and code example.
\`\`\`tsx filename="app/example.tsx" switcher
// Code example
\`\`\`
## Step 2: Second Step
Update frontmatter with related documentation:
related:
title: Next Steps
description: Learn more about related features.
links:
- app/api-reference/functions/related-function
- app/guides/related-guideSee references/DOC-CONVENTIONS.md for complete formatting rules.
Frontmatter (required):
---
title: Page Title (2-3 words)
description: One or two sentences describing the page.
---Code blocks:
\`\`\`tsx filename="app/page.tsx" switcher
// TypeScript first
\`\`\`
\`\`\`jsx filename="app/page.js" switcher
// JavaScript second
\`\`\`
Router-specific content:
<AppOnly>Content only for App Router docs.</AppOnly>
<PagesOnly>Content only for Pages Router docs.</PagesOnly>Notes:
> **Good to know**: Single line note.
> **Good to know**:
>
> - Multi-line note point 1
> - Multi-line note point 2Before committing documentation changes:
title and descriptionfilename attributeswitcher with JS variantpnpm lint passesreferences/DOC-CONVENTIONS.md - Complete frontmatter and formatting rulesreferences/CODE-TO-DOCS-MAPPING.md - Source code to documentation mappingdocs/01-app/03-api-reference/03-file-conventions/| File Convention |