Stats
Actions
Tags
From building-blog
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.
How this skill is triggered — by the user, by Claude, or both
Slash command
/building-blog:building-blogThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
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.
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.
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.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-motionnext.config.{ts,js,mjs} — existing images.formats, i18n configsrc/messages/**, src/i18n/**, messages/** — current locale setsrc/app/[locale]/** or app/[locale]/** — routing patterntailwind.config.*, globals.css, design-system files — tokens, fontsCLAUDE.md, AGENTS.md, GEMINI.md — project conventions and approved overridessanity-studio/ or studio/ folderapp/layout.{tsx,jsx} — fonts, analytics, motion configpublic/brand/**, public/logo* — publisher logositemap.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.
Spec opinions can drift from upstream reality. Before implementing, pull current docs for the libraries you will actually use on this project. Do not skip this — the spec was last audited at a fixed point in time, and Next.js / Sanity / next-intl ship breaking changes more often than this skill is updated.
Use context7 if it is available in the environment (it is the fastest way to read current library docs); otherwise fall back to the library's official docs site via WebFetch. Cross-check against the spec when you reach the matching section.
Minimum docs to read for any blog build:
generateStaticParams, generateMetadata, dynamic params (sync vs Promise in 15/16), image config, revalidateTag, unstable_cache deprecation status@sanity/client, next-sanity) — client.fetch options, draft mode + stega rules, defineQuery, GROQ projection patterns, image URL buildergetTranslations, getMessages, setRequestLocale, hreflang patternsauto=formatAlso check, just-in-time, when you hit the matching spec section:
responseModalitiesweb.dev Core Web Vitals page for current LCP/INP/CLS "good" cutoffsIf the docs contradict the spec, the docs win. Note the contradiction in the project profile (§1) and proceed against the docs.
Open blog-technical-requirements.md and walk through §0.
AskUserQuestion. Group related questions into single calls (max 4 per call). Pre-fill recommended answers from the scan.Write the answers into §1 "Project Profile" (in a project-local copy under docs/blog/, not in the universal source).
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.
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.
frontend-design — if the visual identity is unclear or the site is mid-greenfield, brainstorm direction firstsuperpowers:brainstorming — for scope conversations beyond what §0 capturessuperpowers:writing-plans — to expand the high-level plan into a per-phase implementation plan before codingCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub buildshipgrowrepeat/nextjs-sanity-blog-skill --plugin building-blog