Step 1 — Research

Use WebFetch and/or WebSearch to gather accurate, up-to-date information. Prefer official documentation over blog posts. Note exact UI labels, button names, and field values — readers will be following along live.

If the tutorial involves a web UI, use Playwright browser tools to capture screenshots of the relevant steps. Save PNGs directly into the tutorial's content folder (Step 3).

Step 2 — Choose a slug

The slug becomes the URL: /tutorials/YOUR-SLUG

Lowercase, hyphenated: deploy-to-vercel, setup-github-actions
3–5 words max, no version numbers unless essential

Step 3 — Create files

Create a new tutorial for the Dev Tutorials site located at the project root.

Tutorial topic: $ARGUMENTS

Step 1 — Research

If the tutorial involves a web UI, use Playwright browser tools to capture screenshots of the relevant steps. Save PNGs directly into the tutorial's content folder (Step 3).

Step 2 — Choose a slug

The slug becomes the URL: /tutorials/YOUR-SLUG

Lowercase, hyphenated: deploy-to-vercel, setup-github-actions
3–5 words max, no version numbers unless essential

Add Tutorial

Step 1 — Research

Step 2 — Choose a slug

Step 3 — Create files

Add Tutorial

Step 1 — Research

Step 2 — Choose a slug

Step 3 — Create files

Step 4 — Frontmatter

My Workflow

Create Instructions

Init

Everything Claude Code Conventions

Codebase Onboarding

Ui Demo