Diagram Design
cathrynlavery/diagram-design
Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.
Generates technical guides that teach real-world use cases through progressive examples.
$ npx skills add vercel/next.js --skill write-guide -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install vercel/next.js write-guide --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/write-guide .claude/skills/write-guide && 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 "write-guide" agent skill from https://github.com/vercel/next.js/tree/canary/.agents/skills/write-guide into .claude/skills/write-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "write-guide", 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/write-guideType 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 write-guide -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install vercel/next.js write-guide --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/write-guide .agents/skills/write-guide && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "write-guide" agent skill from https://github.com/vercel/next.js/tree/canary/.agents/skills/write-guide into .agents/skills/write-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "write-guide", 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 write-guide -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install vercel/next.js write-guide --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/write-guide .cursor/skills/write-guide && 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 "write-guide" agent skill from https://github.com/vercel/next.js/tree/canary/.agents/skills/write-guide into .cursor/skills/write-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "write-guide", 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/write-guide--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 write-guide -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install vercel/next.js write-guide --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/write-guide .gemini/skills/write-guide && 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 "write-guide" agent skill from https://github.com/vercel/next.js/tree/canary/.agents/skills/write-guide into .gemini/skills/write-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "write-guide", 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 write-guideInstalls 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 write-guide -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/write-guide .github/skills/write-guide && 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 "write-guide" agent skill from https://github.com/vercel/next.js/tree/canary/.agents/skills/write-guide into .github/skills/write-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "write-guide", 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 write-guide -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 write-guide --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/write-guide .opencode/skills/write-guide && 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 "write-guide" agent skill from https://github.com/vercel/next.js/tree/canary/.agents/skills/write-guide into .opencode/skills/write-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "write-guide", 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.
write-guideGenerates technical guides that teach real-world use cases through progressive examples.
Write Guide is an agent skill from vercel/next.js, published by the product's own GitHub organization. Generates technical guides that teach real-world use cases through progressive examples. Auto-activation: User asks to write, create, or draft a guide or tutorial. Also use when converting feature documentation, API references, or skill knowledge into step-by-step learning content. Input sources: Feature skills, API documentation, existing code examples, or user-provided specifications. Output type: A markdown guide with YAML frontmatter, introduction, 2-4 progressive steps, and next steps section.
Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Development, covering Technical documentation. The licence is MIT.
4 steps, taken from the first numbered list 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.
No scripts in the folder and no shell commands in SKILL.md (its code samples are markdown).
From the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
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.
Write Guide loads about 1.6k tokens when it runs. Until then it costs about 133 tokens; SKILL.md has 552 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). 552 words, ~1,578 tokens.
.claude/skills/write-guide/SKILL.md (or your agent's skills folder).Produce a technical guide that teaches a real-world use case through progressive examples. Concepts are introduced only when the reader needs them.
Each guide solves one specific problem. Not a category of problems. If the outline has 5+ steps or covers multiple approaches, split it.
Every guide follows this arc: introduction, example setup, 2-5 progressive steps, next steps.
Each step follows this loop: working code → new requirement → friction → explanation → resolution → observable proof.
Sections: introduction (no heading, 2 paragraphs max), ## Example (what we're building + source link), ### Step N (action-oriented titles, 2-4 steps), ## Next steps (summary + related links).
Headings should tell a story on their own. If readers only saw the headings, they'd understand the guide's takeaway.
---
title: {Action-oriented, e.g., "Building X" or "How to Y"}
description: {One sentence}
nav_title: {Short title for navigation}
---
{What the reader will accomplish and why it matters. The friction and how this approach resolves it. 2 paragraphs max.}
## Example
As an example, we'll build {what we're building}.
We'll start with {step 1}, then {step 2}, and {step 3}.
{Source code link.}
### Step 1: {Action-oriented title}
{Brief context, 1-2 sentences.}
```tsx filename="path/to/file.tsx"
// Minimal working code
```
{Explain what happens.}
{Introduce friction: warning, limitation, or constraint.}
{Resolution: explain the choice, apply the fix.}
{Verify the fix with observable proof.}
### Step 2: {Action-oriented title}
{Same pattern: context → code → explain → friction → resolution → proof.}
### Step 3: {Action-oriented title}
{Same pattern.}
## Next steps
You now know how to {summary}.
Next, learn how to:
- [Related guide 1]()
- [Related guide 2]()function Header() {}.| Don't | Do |
|---|---|
| "creates friction in the pipeline" | "blocks the response" |
| "needs dynamic information" | "depends on request-time data" |
| "requires dynamic processing" | "output can't be known ahead of time" |
| "The component blocks the response — causing delays" | "The component blocks the response. This causes delays." |
description and intro. Guides win or lose SERPs on the colloquial query (e.g. "next js form submission", "next js api endpoint", "next js error page"), not on the framework's preferred noun. When the guide covers a renamed or differentiated concept, include one synonym (Pages-era term, REST/web term, or industry-standard label) in the frontmatter description and once in the introduction. Fold into prose. No separate "Synonyms" or "Also known as" section.| Don't | Do |
|---|---|
| "Learn how to use Route Handlers" | "Build API endpoints (formerly API Routes) with Route Handlers" |
| "Learn how to mutate data with Server Functions" | "Submit forms and update data with Server Functions, the App Router approach to form posts and API mutations" |
Read these guides in docs/01-app/02-guides/ before writing. They demonstrate the patterns above.
public-static-pages.mdx — intro → example → 3 progressive steps → next steps. Concepts named at point of resolution. Problems shown with build output.forms.mdx — progressive feature building without explicit "Step" labels. Each section adds one capability.© vercel, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Just SKILL.md in .agents/skills/write-guide of vercel/next.js.
Open the folder on GitHubat commit a32ddfd
Write Guide 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 |
|---|---|---|---|---|---|---|
| Write Guide this skillvercel/next.js | 143k | — | ~1.6k | Automated safety check: Pass | MIT | |
| Diagram Designcathrynlavery/diagram-design | 45k | 1 repos | ~7.5k | Automated safety check: Pass | MIT | |
| Simple Englishmoeru-ai/airi | 50k | 2 repos | ~4.6k | Automated safety check: Pass | MIT | |
| Get API Docs with chubandrewyng/context-hub | 14k | 2 repos | ~775 | Automated safety check: Pass | MIT | |
| Doc SyncJetBrains/ideavim | 10k | 2 repos | ~2.6k | Automated safety check: Pass | MIT | |
| Mailspring App ScreenshotsFoundry376/Mailspring | 18k | — | ~1.5k | Automated safety check: Pass | GPL-3.0 |
cathrynlavery/diagram-design
Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.
moeru-ai/airi
Write or rewrite technical text with the rules of ASD-STE100 Simplified Technical English so it is clear, unambiguous, and free of AI slop.
andrewyng/context-hub
Fetches current documentation for third-party APIs and SDKs with the chub CLI before the agent writes code against them, instead of relying on remembered API shapes.
JetBrains/ideavim
Keeps IdeaVim documentation in sync with code changes. An agent skill from JetBrains/ideavim.
Foundry376/Mailspring
Captures screenshots of the running Mailspring dev app for docs, PRs or visual checks by launching it with a debugging port, driving the UI and clipping to an element.
Agents365-ai/drawio-skill
Creates and edits editable draw.io diagrams from descriptions, code, infrastructure files, SQL and API schemas, with sync, review, test and export tools.
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.
Categories
Generates technical guides that teach real-world use cases through progressive examples. js, published by the product's own GitHub organization. Generates technical guides that teach real-world use cases through progressive examples.
Write Guide fits situations like: converting feature documentation; skill knowledge into step-by-step learning content.
Run `npx skills add vercel/next.js --skill write-guide -a claude-code`. Or copy the skill folder (.agents/skills/write-guide in vercel/next.js) into .claude/skills/write-guide in your project. Claude Code loads it when a task matches its description.
Run `npx skills add vercel/next.js --skill write-guide -a codex`. Or copy the skill folder (.agents/skills/write-guide in vercel/next.js) into .agents/skills/write-guide 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 write-guide -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/write-guide, .gemini/skills/write-guide, .github/skills/write-guide and .opencode/skills/write-guide in your project.
SKILL.md names no scripts, command-line tools or credentials: Write Guide is instructions for the agent only.
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. 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.
Write Guide 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.6k tokens (SKILL.md is roughly 6.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Write Guide: Diagram Design (cathrynlavery/diagram-design, 45k stars), Simple English (moeru-ai/airi, 50k stars), Get API Docs with chub (andrewyng/context-hub, 14k stars) and Doc Sync (JetBrains/ideavim, 10k 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.