Official agent skill

Write Guide

by vercel in vercel/next.js

Generates technical guides that teach real-world use cases through progressive examples.

OfficialMITAuto-check passedDevelopment

Install Write Guide

skills CLI
$ npx skills add vercel/next.js --skill write-guide -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install vercel/next.js write-guide --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ 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-src

Use ~/.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/

Facts

Skill name
write-guide
GitHub stars
143k
Token cost
~1.6k tokens
SKILL.md length
552 words
Files
1
Skills in repo
27
Repo updated
First seen
Licence
MIT

At a glance

Generates technical guides that teach real-world use cases through progressive examples.

  • Works in 4 steps: Research: Check available skills for… → Plan: Outline sections. Verify scope… → Write: Follow the template above. Apply… → …
  • Converting feature documentation
  • SKILL.md covers Goal, Structure, Rules and References
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

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.

When your agent uses it

  • Converting feature documentation
  • Skill knowledge into step-by-step learning content

Example prompts

  • “Use the write-guide skill to generate technical guides that teach real-world use cases through progressive examples”
  • “/write-guide”

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Research: Check available skills for relevant features. Read existing docs for context and linking opportunities.
  2. Plan: Outline sections. Verify scope (one problem, 2-4 steps). Each step needs a friction point and resolution.
  3. Write: Follow the template above. Apply the rules below.
  4. Review: Re-read the rules, verify, then present.

What it can do on your machine

Read from SKILL.md and the folder at commit a32ddfd. It shows what the files ask for, not the result of running them.

  • Tool permissions

    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.

  • Runs code

    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.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

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.

Always · name and description, kept in context so the agent knows when to use it
~133
When it runs · the whole SKILL.md, loaded when a task matches
~1.6k

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.

Safety

Auto-check passed

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.

SKILL.md

The full file from vercel/next.js at commit a32ddfd, republished under its MIT licence (© vercel). 552 words, ~1,578 tokens.

Download SKILL.mdSave it as .claude/skills/write-guide/SKILL.md (or your agent's skills folder).
name
write-guide
description
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.
agent
Plan
context
fork
metadata.internal
true

Writing Guides

Goal

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.

Structure

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.

Template
markdown
---
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]()
Workflow
  1. Research: Check available skills for relevant features. Read existing docs for context and linking opportunities.
  2. Plan: Outline sections. Verify scope (one problem, 2-4 steps). Each step needs a friction point and resolution.
  3. Write: Follow the template above. Apply the rules below.
  4. Review: Re-read the rules, verify, then present.

Rules

  1. Progressive disclosure. Start with the smallest working example. Introduce complexity only when the example breaks. Name concepts at the moment of resolution, after the reader has felt the problem. Full loop: working → new requirement → something breaks → explain why → name the fix → apply → verify with proof → move on.
  2. Show problems visually. Console errors, terminal output, build warnings, slow-loading pages. "If we refresh the page, we can see the component blocks the response."
  3. Verify resolutions with observable proof. Before/after comparisons, browser reloads, terminal output. "If we refresh the page again, we can see it loads instantly."
  4. One friction point per step. If a step has multiple friction points, split it.
  5. Minimal code blocks. Only the code needed for the current step. Collapse unchanged functions with function Header() {}.
  6. No em dashes. Use periods, commas, or parentheses instead.
  7. Mechanical, observable language. Describe what happens, not how it feels.
  8. No selling, justifying, or comparing. No "the best way," no historical context, no framework comparisons.
Show full SKILL.md (211 more words)Show less
Don'tDo
"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."
  1. Bridge new framework terms with legacy or generic vocabulary in 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'tDo
"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"

References

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

Files

Just SKILL.md in .agents/skills/write-guide of vercel/next.js.

Open the folder on GitHubat commit a32ddfd

Compare with similar skills

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.

Write Guide compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Write Guide this skillvercel/next.js143k—~1.6kAutomated safety check: PassMIT
Diagram Designcathrynlavery/diagram-design45k1 repos~7.5kAutomated safety check: PassMIT
Simple Englishmoeru-ai/airi50k2 repos~4.6kAutomated safety check: PassMIT
Get API Docs with chubandrewyng/context-hub14k2 repos~775Automated safety check: PassMIT
Doc SyncJetBrains/ideavim10k2 repos~2.6kAutomated safety check: PassMIT
Mailspring App ScreenshotsFoundry376/Mailspring18k—~1.5kAutomated safety check: PassGPL-3.0

Similar skills

  • 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.

    45k GitHub starsUsed in 1 repo~7.5k tokens
    DevelopmentAuto-check passed
  • Simple English

    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.

    50k GitHub starsUsed in 2 repos~4.6k tokens
    DevelopmentAuto-check passed
  • Get API Docs with chub

    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.

    14k GitHub starsUsed in 2 repos~775 tokens
    DevelopmentAuto-check passed
  • Doc Sync

    JetBrains/ideavim

    Official

    Keeps IdeaVim documentation in sync with code changes. An agent skill from JetBrains/ideavim.

    10k GitHub starsUsed in 2 repos~2.6k tokens
    DevelopmentAuto-check passed
  • Mailspring App Screenshots

    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.

    18k GitHub stars~1.5k tokensUpdated today
    DevelopmentAuto-check passed
  • Draw.io Diagram Studio

    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.

    10k GitHub stars~2.4k tokensUpdated 5 days ago
    DevelopmentAuto-check: notes

More from vercel/next.js

All 27 skills in this repo
  • Gh Stack

    vercel/next.js

    Official

    Manages stacked PRs and splits multi-part work into reviewable branches with gh-stack.

    143k GitHub starsUsed in 7 repos~2.3k tokens
    Auto-check passed
  • Sandbox Bench

    vercel/next.js

    Official

    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…

    143k GitHub stars~4.1k tokensUpdated today
    Auto-check passed
  • Next Dev Loop

    vercel/next.js

    Official

    Verify Next.js runtime behavior after editing app code. An agent skill from vercel/next.js.

    143k GitHub starsUsed in 9 repos~2.3k tokens
    Auto-check passed
  • Docs Diagrams

    vercel/next.js

    Official

    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".

    143k GitHub stars~2.9k tokensUpdated today
    Auto-check passed
  • Official

    Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces.

    143k GitHub starsUsed in 6 repos~8.3k tokens
    Auto-check passed
  • React Sync

    vercel/next.js

    Official

    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.

    143k GitHub stars~486 tokensUpdated today
    Auto-check passed

Categories

Questions about Write Guide

What does Write Guide do?

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.

When should I use Write Guide?

Write Guide fits situations like: converting feature documentation; skill knowledge into step-by-step learning content.

How do I install Write Guide in Claude Code?

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.

How do I install Write Guide in Codex?

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.

Can I use Write Guide in Cursor, Gemini CLI or GitHub Copilot?

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.

What does Write Guide need to run?

SKILL.md names no scripts, command-line tools or credentials: Write Guide is instructions for the agent only.

Does Write Guide access the network?

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.

Is Write Guide safe to install?

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.

What licence does Write Guide use?

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.

How many tokens does Write Guide use?

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.

What are the alternatives to Write Guide?

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.

Who maintains Write Guide?

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.