next.js + cms starter kit
spoke-code is a codebase you download: a Next.js site, content in plain files or Sanity, and a component library, with the rules, tests and Claude Code skills already in place. You describe pages; Claude builds them inside the lines.
> add a testimonials section
/new-block · AGENTS.md loaded
content blocks/testimonials.ts
ui Testimonials + story, test
cms schema + mapper
web renderer case
lint ✓types ✓tests ✓a11y ✓grid ✓
PR opened · preview ready
studio publish → page refreshed
Editors fill the section in Studio. Publishing refreshes just that page, nothing else.
ls themes/
Themes are complete sites with their own look and sample content. Pick one when you create your project; your name, colors, and copy go in through setup.
A console-style product site: a boot sequence, a dithered backdrop that follows the scroll, a reticle that locks onto every control, and a rail of sections. Built for developer tools and software.
npx spoke-code create my-site --theme spokeA radio station site that changes color with the music. It reads the song on air, finds the cover, and recolors every page from it, with a player bar, shows, DJs, a schedule, events and a blog. Built for volunteer-run and community stations.
npx spoke-code create my-station --theme dashclaude --demo
Three sessions, replayed from the kit's own skills. Each one starts with a line of plain language; the rules in the repo do the rest.
~/my-site
/setup
I'll install everything, connect your Sanity project, and check the site runs. I'll explain each step as I go.
Bash(pnpm install)
Packages: +1184
Done in 18.4s
Do you already have a Sanity project? If not, I'll walk you through making one.
yes, the id is k7x2m9pq
Write(apps/web/.env.local)
Wrote 6 lines: project, dataset, read token, secret
Bash(pnpm --filter @spoke-code/cms-sanity seed)
schema deployed
seed: wrote page-home
Bash(pnpm check && pnpm test)
biome ........ ok
typecheck .... ok
Tests 212 passed (212)
Done. Your site runs at localhost:3000 and the editor at /studio. Want it online? Type /deploy.
/new-block testimonials: a quote, a name, a role
A block crosses four layers. I'll start with the content contract so the types drive the rest.
Write(packages/content/src/blocks/testimonial.ts)
Wrote 21 lines
Write(packages/ui/src/blocks/Testimonial/Testimonial.tsx)
Wrote 48 lines, plus a story and a test
Bash(pnpm check)
Testimonial.tsx:3 'sanity' is restricted
ui never imports the CMS
The seam rule caught me reaching for Sanity from a component. The mapper will flatten the quote to plain text instead.
Write(packages/cms-sanity/src/mappers/blocks/testimonial.ts)
Wrote 19 lines, plus a mapper test
Bash(pnpm check && pnpm test)
biome ........ ok
typecheck .... ok
Tests 219 passed (219)
Editors can now add a Testimonial from the page's block list. It's in Storybook under Blocks.
/ship
You're on main, so this goes on its own branch first. Then the gates, then a pull request.
Bash(git switch -c feat/testimonial-block)
Switched to a new branch
Bash(pnpm build && pnpm test:e2e)
24 passed (31.2s)
grid audit: 0 boxes off the 16px grid
Bash(git commit -m "feat(ui): add testimonial block")
9 files changed, 311 insertions(+)
Bash(gh pr create --fill)
github.com/you/my-site/pull/12
Bash(gh pr checks --watch)
ci pass 2m14s
Vercel pass preview ready
Shipped. The preview is live; merging the pull request publishes it. Say the word and I'll merge.
From a fresh download to a running site, no git required.
changelog
Wiring the CMS to the components, taming the cache, teaching the linter and the assistant the rules: in the kit, tested, and versioned. Every release lands in your portal with a note on what moved.
spoke-code releases6 releases · all included
Every release comes with the subscription.
What ships
The rules are in the repo, so the assistant spends its prompts on your pages instead of on architecture.
[ 0.001 ]Rules before prompts
An AGENTS.md and scoped skills load the conventions before the first prompt. Two MCP servers ship in the repo: one reads the running app, one drives a real browser. Type /vibe-check and the assistant audits the code against those rules in plain language.
[ 0.002 ]One contract, two sides
The component library and the CMS adapter share nothing but a set of TypeScript types. A lint rule fails the build on any import across that seam. Swap the CMS and the components never change.
[ 0.003 ]A grid you can measure
Every spacing, size, and line-height sits on a 16px rhythm, and the drawn background grid is the same 16px. A browser test measures real element boxes and fails on a single pixel of drift.
[ 0.004 ]Fresh without a rebuild
Published pages are cached and tagged by slug. Publishing in the CMS invalidates exactly that page, so the next visit is current and every other page stays fast.
ls -R
What you download, folder by folder. Each part does one thing, and the rules in the repo keep it that way, so Claude always knows where a change belongs.
AGENTS.md
the rules Claude reads first
Package roles, the seam rule, the workflow, and the style. Claude Code loads it before every change.
Try a month. Cancel. Keep the code.
Try it for a month with no obligation. If it isn't for you, cancel and keep every file you downloaded, with no license check. Run npx spoke-code create to start, and spoke-code update as releases land. A seat is one machine; free it any time from your portal.
One builder, any number of sites.
$19/ mo
billed monthly
A small team shipping for clients.
$49/ mo
billed monthly
Many builders, many clients.
$149/ mo
billed monthly
For people and teams building with an AI assistant. Prices exclude tax. Students and open-source maintainers: write in for a code.
Read before you download
No. You describe the site in plain language. The assistant does the git, the tests, and the deploys, and the guardrails keep it honest. If you do code, everything is readable TypeScript with no magic.
Start
Subscribe, run one command with your license key, open the folder in Claude Code, and type /setup. The assistant does the rest.
npx spoke-code create my-site