Building a Blog (Next.js + Sanity)
Overview
Universal workflow for adding a blog to a Next.js site backed by Sanity CMS. Targets a corporate blog: SEO-first, i18n-ready, performance-budgeted, accessibility-compliant.
SKILL.md is the orchestrator. The spec lives in the two reference files.
Files
blog-technical-requirements.md — §0 intake questionnaire (30+ questions) → §1 Project Profile → §2–§20 universal spec → checklist. Edit only §0 answers and §1 per project.
blog-image-style-guide.md — universal template for AI-generated hero imagery via Gemini 3 Pro Image (Nano Banana Pro). Intake questions on top, aesthetic skeleton in the middle, three example slots at the bottom.
Workflow
Step 1 — Scan the host project (before asking anything)
Read what's already there. Pre-filling answers from detected values is much better than asking the user. Look for:
package.json — Next.js version, next-intl, Sanity packages, Tailwind, framer-motion
next.config.{ts,js,mjs} — existing images.formats, i18n config
src/messages/**, src/i18n/**, messages/** — current locale set
src/app/[locale]/** or app/[locale]/** — routing pattern
tailwind.config.*, globals.css, design-system files — tokens, fonts
CLAUDE.md, AGENTS.md, GEMINI.md — project conventions and approved overrides
- Existing
sanity-studio/ or studio/ folder
app/layout.{tsx,jsx} — fonts, analytics, motion config
public/brand/**, public/logo* — publisher logo
sitemap.ts, robots.ts — existing routes
.env* files — names of already-set env vars (do not log secret values)
Record findings as a brief "Detected" list before the questionnaire.
Step 2 — Run the intake questionnaire
Open blog-technical-requirements.md and walk through §0.
- Claude Code: use
AskUserQuestion. Group related questions into single calls (max 4 per call). Pre-fill recommended answers from the scan.
- Codex / CLIs without an interactive picker: list questions numerically in plain text, ask the user to answer in batches of 5–10. Show recommended answers from the scan.
- Headless / non-interactive: apply universal defaults to whatever the prompt did not explicitly cover; list every assumption.
Write the answers into §1 "Project Profile" (in a project-local copy under docs/blog/, not in the universal source).
Step 3 — Produce the high-level plan
Use the plan template at the end of §0. One page. Phases, locked-in scope, out-of-scope items, open decisions. Wait for explicit user approval. Do not start coding.
Step 4 — Implement against the spec
Follow §2–§20 in order. §19 (Pass/Fail Checklist) is the definition of done. The image style guide drives §20 if AI-generated hero images are in scope.
When NOT to use this skill
- Static / MDX-only blogs (no CMS) — different stack, different patterns
- High-velocity news publishers — sitemap chunking and editor tooling become primary concerns
- Documentation sites — use a docs framework instead
- Marketing landing pages that aren't really a blog
Source
Maintained at BuildShipGrowRepeat/nextjs-sanity-blog-skill. MIT licensed.
1---2name: building-blog3description: Use when adding a blog to a Next.js + Sanity site, building a blog section from scratch, integrating Sanity CMS for editorial content, or setting up an SEO-optimized article surface. Triggers on phrases like 'add a blog', 'build the blog', 'create blog section', 'set up blog with Sanity', 'integrate Sanity CMS', 'blog architecture', or any new-blog scoping conversation on a Next.js project.4---5
6# Building a Blog (Next.js + Sanity)
7
8## Overview
9
10Universal workflow for adding a blog to a Next.js site backed by Sanity CMS. Targets a corporate blog: SEO-first, i18n-ready, performance-budgeted, accessibility-compliant.
11
12**SKILL.md is the orchestrator. The spec lives in the two reference files.**
13
14## Files
15
16- `blog-technical-requirements.md` — §0 intake questionnaire (30+ questions) → §1 Project Profile → §2–§20 universal spec → checklist. Edit only §0 answers and §1 per project.
17- `blog-image-style-guide.md` — universal template for AI-generated hero imagery via Gemini 3 Pro Image (Nano Banana Pro). Intake questions on top, aesthetic skeleton in the middle, three example slots at the bottom.
18
19## Workflow
20
21### Step 1 — Scan the host project (before asking anything)
22
23Read what's already there. Pre-filling answers from detected values is much better than asking the user. Look for:
24
25- `package.json` — Next.js version, `next-intl`, Sanity packages, Tailwind, `framer-motion`
26- `next.config.{ts,js,mjs}` — existing `images.formats`, i18n config
27- `src/messages/**`, `src/i18n/**`, `messages/**` — current locale set
28- `src/app/[locale]/**` or `app/[locale]/**` — routing pattern
29- `tailwind.config.*`, `globals.css`, design-system files — tokens, fonts
30- `CLAUDE.md`, `AGENTS.md`, `GEMINI.md` — project conventions and approved overrides
31- Existing `sanity-studio/` or `studio/` folder
32- `app/layout.{tsx,jsx}` — fonts, analytics, motion config
33- `public/brand/**`, `public/logo*` — publisher logo
34- `sitemap.ts`, `robots.ts` — existing routes
35- `.env*` files — names of already-set env vars (do not log secret values)
36
37Record findings as a brief "Detected" list before the questionnaire.
38
39### Step 2 — Run the intake questionnaire
40
41Open `blog-technical-requirements.md` and walk through §0.
42
43- **Claude Code:** use `AskUserQuestion`. Group related questions into single calls (max 4 per call). Pre-fill recommended answers from the scan.
44- **Codex / CLIs without an interactive picker:** list questions numerically in plain text, ask the user to answer in batches of 5–10. Show recommended answers from the scan.
45- **Headless / non-interactive:** apply universal defaults to whatever the prompt did not explicitly cover; list every assumption.
46
47Write the answers into §1 "Project Profile" (in a project-local copy under `docs/blog/`, not in the universal source).
48
49### Step 3 — Produce the high-level plan
50
51Use the plan template at the end of §0. One page. Phases, locked-in scope, out-of-scope items, open decisions. **Wait for explicit user approval. Do not start coding.**
52
53### Step 4 — Implement against the spec
54
55Follow §2–§20 in order. §19 (Pass/Fail Checklist) is the definition of done. The image style guide drives §20 if AI-generated hero images are in scope.
56
57## When NOT to use this skill
58
59- Static / MDX-only blogs (no CMS) — different stack, different patterns
60- High-velocity news publishers — sitemap chunking and editor tooling become primary concerns
61- Documentation sites — use a docs framework instead
62- Marketing landing pages that aren't really a blog
63
64## Source
65
66Maintained at [BuildShipGrowRepeat/nextjs-sanity-blog-skill](https://github.com/BuildShipGrowRepeat/nextjs-sanity-blog-skill). MIT licensed.