Next.js + Sanity Blog (Claude Code skill)
An opinionated, batteries-included spec for adding a blog to a Next.js website backed by Sanity CMS. Built as a Claude Code skill: install it, say "add a blog", and the agent walks 40 intake questions, scans your project, drafts a one-page plan for your approval, and then implements against a ~1100-line technical spec that already covers SEO, i18n, performance, accessibility, AI hero image generation, and a pass/fail checklist.
Aimed at corporate blogs. Organic-search-first. Optional AI authoring with human review inside Sanity Studio.
What you actually get
- A 40-question intake that covers every fork that meaningfully changes the spec: locales, author model, category count, CMS workflow, analytics, consent, AI imagery, comments, search, sharing, dark mode, scheduled publishing, and the rest.
- A one-page plan template the agent fills from your answers and stops at, waiting for explicit sign-off before any code change.
- A 20-section technical spec to implement against: Sanity schema, URL structure, smart 404 for missing-locale slugs, hreflang rules, BlogPosting and FAQPage JSON-LD, OG, Atom feeds, sitemap, performance budgets tighter than Google's "good" baseline, WCAG 2.2 AA targets, font and motion rules, deletion webhook handling.
- A working TypeScript generator for AI hero images via Gemini 3 Pro Image (Nano Banana Pro), with locale-keyed slugs, idempotent re-runs, and a per-project style guide template.
- A pass/fail checklist that is the definition of done.
Install
Two ways.
As a Claude Code plugin (recommended):
/plugin marketplace add BuildShipGrowRepeat/nextjs-sanity-blog-skill
/plugin install building-blog@nextjs-sanity-blog
Manual:
Clone the repo and drop the skill folder into your local Claude skills directory.
git clone https://github.com/BuildShipGrowRepeat/nextjs-sanity-blog-skill.git
cp -R nextjs-sanity-blog-skill/skills/building-blog ~/.claude/skills/
How to use it
Once installed, say one of:
- "add a blog to this project"
- "set up a blog with Sanity"
- "build the blog section"
Claude will:
- Scan your project (
package.json, next.config.*, message files, design tokens, CLAUDE.md, existing Sanity studio folder if any) and pre-fill anything it can detect.
- Walk the 40 intake questions, showing recommended defaults so you can move quickly. The agent groups related questions and uses interactive picks where the host environment supports them.
- Hand you a one-page implementation plan and wait for your sign-off.
- Build against the spec, phase by phase, finishing on the pass/fail checklist.
What's in the spec
Three files, each readable on its own:
skills/building-blog/SKILL.md — the orchestrator. Workflow, scan checklist, fallbacks for non-interactive environments.skills/building-blog/blog-technical-requirements.md — the engineering spec. §0 holds the intake questionnaire, §1 is the per-project profile filled from the answers, §2 to §20 is the universal spec that reads from §1, §21 is the pass/fail checklist.skills/building-blog/blog-image-style-guide.md — a brand-tailorable template for AI-generated hero images. The intake sits on top, and the agent helps you populate the topic table and worked examples for your domain.
Stack assumptions
- Next.js, App Router. Tested against 14 and 15; Next.js 16 gotchas are documented inline (async
params, uncached fetch, Turbopack, stega outside draft mode).
- Sanity v3. Studio either hosted at
*.sanity.studio or embedded under /studio.
next-intl for i18n on multilingual projects. Single-locale projects skip the i18n section entirely.- Tailwind is assumed but not strictly required. The spec locks Tailwind-style classes in a handful of typography rules only.
If your stack is meaningfully different (Contentful, Payload, MDX-only, Astro, Remix), this skill is the wrong tool for direct execution. The questionnaire structure and the SEO section still work as a checklist. The rest does not transfer cleanly.
What this is not
- Not a docs site generator. Use Nextra, Docusaurus, or Starlight.
- Not for high-velocity news publishers, where sitemap chunking and editorial workflow become primary concerns and this spec gets thin.
- Not a marketing landing page builder dressed up as a blog.
- Not a UI library or design system. It assumes you already have one.
Why this exists
Every time you ask an AI to "add a blog to my Next.js site", you get a slightly different answer. Some answers ship without alt text on hero images. Some include tags by default even though tags will fragment a small archive into thin pages Google ignores. Some forget hreflang on listing pages. Some over-engineer with @sanity/document-internationalization when the site's articles don't even share topics across locales.
