24 skills · 112 min
Skills
Skill 13 of 24
Produces API reference documentation for Next.js APIs: functions, components, file conventions, directives, and config options.
1 minute · 252 words · 8 sections
Install
npx skills add vercel/next.js --skill write-api-referencenpx skills add vercel/next.js/plugin marketplace add vercel/next.jsThe first command installs just this skill, by the name in its SKILL.md; the second installs the whole repository.
Produce an API reference page that documents a single API surface (function, component, file convention, directive, or config option). The page should be concise, scannable, and example-driven.
Each page documents one API. If the API has sub-methods (like cookies.set()), document them on the same page. If two APIs are independent, they get separate pages.
Identify which category the API belongs to, then follow the corresponding template.
cookies, fetch, generateStaticParams): signature, params/returns, methods table, examplesLink, Image, Script): props summary table, individual prop docs, examplespage, layout, route): definition, code showing the convention, props, behavior, examplesuse client, use cache): definition, usage, serialization/boundary rules, referencebasePath, images, etc.): definition, config code, behavioral sections---
title: {API name}
description: {API Reference for the {API name} {function|component|file convention|directive|config option}.}
---
{One sentence defining what it does and where it's used.}
```tsx filename="path/to/file.tsx" switcher
// Minimal working usage
Category-specific notes:
await if async. Document methods in a table if the return value has methods (like cookies). Document options in a separate table if applicable.| Prop | Example | Type | Required |). Then document each prop under #### propName with description, code example, and value table where useful.params, searchParams, etc.) under #### propName with a route/URL/value example table.## Reference section. Use ## Usage instead, showing correct placement. Document serialization constraints and boundary rules.next.config.ts snippet. Use subsections for each behavioral aspect.## Reference.switcher for tsx/jsx pairs. Always include both. Always include filename="path/to/file.ext".highlight={n} for key lines. Highlight the line that demonstrates the API being documented.#### subsection.> **Good to know**:or## Good to know. Use the blockquote format for brief notes (1-3 bullets). Use the heading format for longer sections. Not “Note:” or “Warning:”.### Example Name subsections. Each example solves one specific use case./docs/app/... format.| Don’t | Do |
|---|---|
| “This powerful function lets you easily manage cookies” | “cookies is an async function that reads HTTP request cookies in Server Components” |
| “You can conveniently access…” | “Returns an object containing…” |
| “The best way to handle navigation” | “<Link> extends the HTML <a> element to provide prefetching and client-side navigation” |
description and once in prose. Example: description: "Use Dynamic Segments to read URL parameters and generate routes from dynamic data." mentions “URL parameters” alongside “Dynamic Segments”. One synonym, folded into natural prose. No separate “Synonyms” or “Also known as” section, no keyword stuffing. Goal: preserve discoverability for users still searching the old vocabulary even when the framework has moved on.| Don’t | Do |
|---|---|
| “Learn how to use Route Handlers” | “Build API endpoints with Route Handlers, the App Router replacement for API Routes” |
| “Configure dynamic route segments” | “Read URL parameters from dynamic route segments” |
test/ for tests exercising the API to find real usage patterns, edge cases, and expected behavior.switcher/filename usage, tables vs subsections, “Good to know” format, no em dashes, mechanical language.Read these pages in docs/01-app/03-api-reference/ before writing. They demonstrate the patterns above.
04-functions/cookies.mdx - Function with methods table, options table, and behavior notes03-file-conventions/page.mdx - File convention with props subsections and route/URL/value tables02-components/link.mdx - Component with props summary table and detailed per-prop docs01-directives/use-client.mdx - Directive with usage section and serialization rules04-functions/fetch.mdx - Function with troubleshooting section and version historyProduces API reference documentation for Next.js APIs: functions, components, file conventions, directives, and config options. **Auto-activation:** User asks to write, create, or draft an API reference page. Also triggers on paths like `docs/01-app/03-api-reference/`, or keywords like "API reference", "props", "parameters", "returns", "signature". **Input sources:** Next.js source code, existing API reference pages, or user-provided specifications. **Output type:** A markdown (.mdx) API reference page with YAML frontmatter, usage example, reference section, behavior notes, and examples.
The verbatim description from this skill’s front matter — the string an agent matches on to decide whether to load it.
canary, last pushed 28 August 2026.SKILL.md, not by matching a directory convention. 2 distinct layouts observed: .agents/skills/*/SKILL.md, skills/*/SKILL.md.h1 and no skipped levels:.claude-plugin/marketplace.json by Vercel, declaring 1 plugin. It is read for editorial metadata only — never as the skill index, which is always the repository tree./vercel/next.js.md, and each skill at its own .md URL.