React Zmage Integration
Caldis/react-zmage
A skill your agent uses when adding the react-zmage React image viewer to an existing React, Next.js, MDX, CMS, markdown, or rich text image surface.
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"…
$ npx skills add vercel/next.js --skill update-docs -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install vercel/next.js update-docs --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/vercel/next.js.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/update-docs .claude/skills/update-docs && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "update-docs" agent skill from https://github.com/vercel/next.js/tree/canary/.agents/skills/update-docs into .claude/skills/update-docs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "update-docs", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/vercel/next.js/tree/canary/.agents/skills/update-docsType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add vercel/next.js --skill update-docs -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install vercel/next.js update-docs --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/vercel/next.js.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/update-docs .agents/skills/update-docs && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "update-docs" agent skill from https://github.com/vercel/next.js/tree/canary/.agents/skills/update-docs into .agents/skills/update-docs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "update-docs", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add vercel/next.js --skill update-docs -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install vercel/next.js update-docs --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/vercel/next.js.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/update-docs .cursor/skills/update-docs && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "update-docs" agent skill from https://github.com/vercel/next.js/tree/canary/.agents/skills/update-docs into .cursor/skills/update-docs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "update-docs", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/vercel/next.js.git --path .agents/skills/update-docs--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add vercel/next.js --skill update-docs -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install vercel/next.js update-docs --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/vercel/next.js.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/update-docs .gemini/skills/update-docs && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "update-docs" agent skill from https://github.com/vercel/next.js/tree/canary/.agents/skills/update-docs into .gemini/skills/update-docs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "update-docs", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install vercel/next.js update-docsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add vercel/next.js --skill update-docs -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/vercel/next.js.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/update-docs .github/skills/update-docs && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "update-docs" agent skill from https://github.com/vercel/next.js/tree/canary/.agents/skills/update-docs into .github/skills/update-docs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "update-docs", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add vercel/next.js --skill update-docs -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install vercel/next.js update-docs --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/vercel/next.js.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/update-docs .opencode/skills/update-docs && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "update-docs" agent skill from https://github.com/vercel/next.js/tree/canary/.agents/skills/update-docs into .opencode/skills/update-docs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "update-docs", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
update-docsThis 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"…
Update Docs is an agent skill from vercel/next.js, published by the product's own GitHub organization. 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…
Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including reference files (for example `references/CODE-TO-DOCS-MAPPING.md` and `references/DOC-CONVENTIONS.md`).
It sits in Documents & Office, covering Markdown. It works with Next.js. The licence is MIT.
12 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit a32ddfd. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Shell commands in SKILL.md call:
pnpmgitFrom the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md. Its commands use pnpm and git, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Update Docs loads about 1.9k tokens when it runs, and up to ~5.3k if it reads all its reference files. Until then it costs about 134 tokens; SKILL.md has 468 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from vercel/next.js at commit a32ddfd, republished under its MIT licence (© vercel). 468 words, ~1,894 tokens.
.claude/skills/update-docs/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.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 | docs/01-app/03-api-reference/03-file-conventions/ | 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={{ overflowX: 'auto', width: '100%' }}>
| Prop | Example | Type | Status |
| ----------------------- | ------------------ | ------ | -------- |
| [`propName`](#propname) | `propName="value"` | String | Required |
</div>
#### `propName`
Description of the prop.
\`\`\`tsx filename="app/example.tsx" switcher
// TypeScript example
\`\`\`
\`\`\`jsx filename="app/example.js" switcher
// JavaScript example
\`\`\`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
Continue with more steps...
## Next Steps
Related topics to explore.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 mapping© vercel, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 2 other files (references) in .agents/skills/update-docs of vercel/next.js.
Open the folder on GitHubat commit a32ddfd
Update Docs next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Update Docs this skillvercel/next.js | 143k | — | ~1.9k | Automated safety check: Pass | MIT | |
| React Zmage IntegrationCaldis/react-zmage | 946 | — | ~370 | Automated safety check: Pass | MIT | |
| Live Previewvicoa-ai/vicoa | 496 | — | ~755 | Automated safety check: Notes | AGPL-3.0 | |
| Writing Docsc15t/c15t | 1.9k | — | ~872 | Automated safety check: Pass | Apache-2.0 | |
| Markdown Article FormatterJimLiu/baoyu-skills | 26k | 7 repos | ~3.5k | Automated safety check: Pass | MIT | |
| MarkitdownImCa0/just-laws | 781 | 14 repos | ~3.2k | Automated safety check: Notes | MIT |
Caldis/react-zmage
A skill your agent uses when adding the react-zmage React image viewer to an existing React, Next.js, MDX, CMS, markdown, or rich text image surface.
vicoa-ai/vicoa
Start a local app in the current user project, expose it through a tunnel, and return preview details in structured Markdown.
c15t/c15t
Author or edit c15t documentation in docs//.mdx — the source for both the c15t.com site and the docs bundled into published packages.
JimLiu/baoyu-skills
Reformats plain text or Markdown articles with frontmatter, a title, a summary, headings, bold, lists and code blocks, and saves a separate formatted copy.
ImCa0/just-laws
Convert files and office documents to Markdown. An agent skill from ImCa0/just-laws.
Atmosphere/atmosphere
Create and edit Obsidian Flavored Markdown with wikilinks, embeds, callouts, properties, and other Obsidian-specific syntax.
vercel/next.js
Manages stacked PRs and splits multi-part work into reviewable branches with gh-stack.
vercel/next.js
Benchmark React or Next.js changes on Vercel Sandbox VMs with paired A/B statistics: react PR/commit vs base, or Next.js PR/commit vs base, measured end-to-end through the bench/render-pipeline app…
vercel/next.js
Verify Next.js runtime behavior after editing app code. An agent skill from vercel/next.js.
vercel/next.js
Draw diagrams for the Next.js docs in the style of the ones already published there: the light/dark PNGs an mdx references with <Image srcLight="/docs/light/<name.png" srcDark="/docs/dark/<name.png".
vercel/next.js
Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces.
vercel/next.js
Build local React changes in the bundle variants consumed by Next.js, sync them into a local Next.js checkout, and test the resulting integration.
Works with
Categories
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"…. js, published by the product's own GitHub organization.mdx files".
Update Docs fits situations like: asks to update documentation for my changes; check docs for this PR; what docs need updating; sync docs with code.
Run `npx skills add vercel/next.js --skill update-docs -a claude-code`. Or copy the skill folder (.agents/skills/update-docs in vercel/next.js) into .claude/skills/update-docs in your project. Claude Code loads it when a task matches its description.
Run `npx skills add vercel/next.js --skill update-docs -a codex`. Or copy the skill folder (.agents/skills/update-docs in vercel/next.js) into .agents/skills/update-docs in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add vercel/next.js --skill update-docs -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/update-docs, .gemini/skills/update-docs, .github/skills/update-docs and .opencode/skills/update-docs in your project.
Going by SKILL.md and its folder, Update Docs needs the command-line tools its instructions call (pnpm and git).
SKILL.md contains no URLs. Its commands use git, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
Update Docs is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 1.9k tokens (SKILL.md is roughly 7.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 3.4k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Update Docs: React Zmage Integration (Caldis/react-zmage, 946 stars), Live Preview (vicoa-ai/vicoa, 496 stars), Writing Docs (c15t/c15t, 1.9k stars) and Markdown Article Formatter (JimLiu/baoyu-skills, 26k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
vercel (a GitHub organization, an official publisher) maintains it in vercel/next.js, which has 143,241 GitHub stars. The repository holds 27 skills in this directory. The repository was last updated on October 8, 2026.
Source: vercel/next.js on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.