Skill

scaffold-nextjs

Scaffolds a production-ready Next.js turborepo with TypeScript, Tailwind CSS, the shadcn/ui CLI, Blode UI components from the ui.blode.co registry, blode-icons-react, Oxlint, Oxfmt, Ultracite, and Vercel deployment. Use when creating a new Next.js app, bootstrapping a turborepo, scaffolding a web project, starting a new website, or asking "create a Next.js project."

Install

npx claudepluginhub joshuarweaver/cascade-code-general-misc-4 --plugin mblode-agent-skills

Tool Access

This skill uses the workspace's default tool permissions.

Preview

Scaffold a Next.js turborepo with full tooling, GitHub, and Vercel deployment.

Supporting Assets

references/app-setup.mdreferences/deploy-and-launch.mdreferences/turbo-configs.md

SKILL.md

Similar Skills

cache-components

Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.

cache-components

139.2k

mcp-builder

9 files

Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).

anthropics-skills-13

124.2k

canvas-design

20 files

Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.

anthropics-skills-13

124.2k

Stats

Stars32

Forks2

Last CommitMar 15, 2026

Actions

View Source View Plugin View on GitHub View README

Scaffold Next.js

Scaffold a Next.js turborepo with full tooling, GitHub, and Vercel deployment.

Reference Files

File	Read When
`references/app-setup.md`	Default: create-next-app flags, shadcn + Blode registry setup, Agentation, Ultracite commands and code patches
`references/turbo-configs.md`	Default: root package.json, turbo.json, .gitignore, knip.json, next.config.ts
`references/deploy-and-launch.md`	After Phase 6: GitHub setup, Vercel deployment, favicon, OG images, pre-launch checklist

Scaffold Workflow

Copy this checklist to track progress:

Scaffold progress:
- [ ] Phase 1: Gather project info
- [ ] Phase 2: Create Next.js app
- [ ] Phase 3: Install Blode UI components
- [ ] Phase 4: Install Agentation
- [ ] Phase 5: Install Ultracite
- [ ] Phase 6: Convert to Turborepo
- [ ] Phase 7: GitHub and Vercel setup
- [ ] Phase 8: Pre-launch checklist

Phase 1: Gather project info

Collect from the user (ask only what was not provided):

Variable	Example	Default	Used in
`{{name}}`	`acme-web`	-- (required)	Root package.json, directory name, README
`{{description}}`	`Marketing site for Acme`	-- (required)	App package.json, README
`{{repo}}`	`acme-corp/acme-web`	— (required)	GitHub remote URL
`{{domain}}`	`acme.com`	— (ask if not provided)	Vercel custom domain, metadataBase
`{{author}}`	`Your Name`	— (required)	package.json author
`{{year}}`	`2026`	current year	LICENSE

Phase 2: Create Next.js app

Load references/app-setup.md.

npx create-next-app@latest {{name}} --typescript --tailwind --app --no-src-dir --no-eslint --import-alias "@/*"

Follow the remaining setup in references/app-setup.md. Confirm the app runs with npm run dev.

Phase 3: Install Blode UI components

Load references/app-setup.md.

Initialize shadcn/ui and register the Blode UI component library from ui.blode.co as described in the reference. Always use blode-icons-react for icon imports (never lucide-react).

Phase 4: Install Agentation

Load references/app-setup.md.

Install the package and patch app/layout.tsx with the dev-only <Agentation /> component as described in the reference. Optionally add Google Analytics using @next/third-parties.

Phase 5: Install Ultracite

Load references/app-setup.md.

Remove the default biome config and initialize Ultracite as described in the reference.

Phase 6: Convert to Turborepo

Load references/turbo-configs.md.

Create root directory structure and move the app into apps/web/.
Generate root package.json, turbo.json.
Generate knip.json.
Generate root .gitignore.
Ensure apps/web/package.json has these scripts:
- "lint": "oxlint ."
- "lint:fix": "oxlint --fix ."
- "format": "oxfmt --write ."
- "format:check": "oxfmt ."
- "check-types": "tsc --noEmit"
- "test": "vitest run"
- "test:watch": "vitest"
Verify apps/web/next.config.ts has reactCompiler: true.
Run npm install from root.
Verify npm run dev works from root (turbo runs apps/web).

Phase 7: GitHub and Vercel setup

Load references/deploy-and-launch.md.

Follow the GitHub and Vercel setup steps in the reference.

Phase 8: Pre-launch checklist

Load references/deploy-and-launch.md.

Generate a favicon package using RealFaviconGenerator, add OG images, then hand off to other skills.

Placeholder Reference

All templates use {{variable}} syntax. Do a final sweep to catch missed placeholders.

Placeholder	Source
`{{name}}`	Project name (kebab-case)
`{{description}}`	One-line project description
`{{repo}}`	GitHub owner/repo
`{{domain}}`	Custom domain for Vercel
`{{author}}`	Author name
`{{year}}`	Current year

Anti-patterns

Do not use src/ directory -- create-next-app flag disables it
Do not use ESLint -- Oxlint via Ultracite replaces it
Do not call oxlint or oxfmt directly -- use ultracite fix or ultracite check
Do not configure git hooks manually -- Ultracite sets up lefthook automatically
Do not put app dependencies in root package.json -- only devDependencies (turbo, ultracite)
Do not skip the Blode registry setup step (see references/app-setup.md) before adding Blode components
Do not use lucide-react in scaffolded UI code -- use blode-icons-react
Do not create apps/web manually -- create-next-app first, then move

Skill Handoffs

When	Run
After deployment, optimise SEO	`optimise-seo`
Before launch, audit UI quality	`ui-audit`
Before launch, add motion and animation	`ui-animation`