vercel/write-api-reference
|
npx skills add https://github.com/vercel/next.js --skill write-api-reference
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.}
// Minimal working usage
// Same example in JS
## Reference
{For functions: methods/params table, return type.}
{For components: props summary table, then `#### propName` subsections.}
{For file conventions: `### Props` with `#### propName` subsections.}
{For directives: usage rules and serialization constraints.}
{For config: options table or individual option docs.}
### {Subsection name}
{Description + code example + table of values where applicable.}
## Good to know
- {Default behavior or implicit effects.}
- {Caveats, limitations, or version-specific notes.}
- {Edge cases the developer should be aware of.}
## Examples
### {Example name}
{Brief context, 1-2 sentences.}
// Complete working example
// Same example in JS
## Version History
| Version | Changes |
| -------- | --------------- |
| `vX.Y.Z` | {What changed.} |
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.10. Mechanical, observable language. Describe what happens, not how it feels. "Returns an object" not "gives you an object".
11. Link to related docs with relative paths. Use /docs/app/... format.
12. No selling or justifying. No "powerful", "easily", "simply". State what the API does.
| 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" |
13. Bridge new framework terms with legacy or generic vocabulary. When the API renames or differentiates from a prior concept (Pages-era term, generic web term, REST vocabulary), include one such synonym in the frontmatter 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 historyTake vercel/write-api-reference from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.