# scaffold-nextjs

Scaffolds a Next.js Turborepo with Blode UI, Ultracite linting, workspace hooks, and Vercel setup. Handy when starting a new web app from scratch.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 720 installs · ★ 163
- Author: mblode
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/mblode/agent-skills/tree/HEAD/skills/scaffold-nextjs/SKILL.md
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/scaffold-nextjs

## What it does

This skill guides the agent through bootstrapping a full Next.js application inside an `apps/web/` workspace directory. It provisions Turborepo with pnpm, installs TypeScript 7, turns on Instant Navigations flags in `next.config.ts`, and wires up Blode UI components with React icons.

Tooling is configured out of the box: Ultracite with `@shadcn/lint`, dead code cleanup via Knip, and root-level Lefthook git hooks. The workflow also sets up `AGENTS.md` documentation so coding agents follow the project rules.

You must have a shell, Git, Node.js, pnpm, and package registry access ready before running this. It is strictly meant for brand-new repositories; it will not scaffold standalone CLI packages or modify existing page architectures.

## Requirements
- Works with: GitHub

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add mblode/agent-skills --skill scaffold-nextjs -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/scaffold-nextjs/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/scaffold-nextjs/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add mblode/agent-skills --skill scaffold-nextjs -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/scaffold-nextjs/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add mblode/agent-skills --skill scaffold-nextjs -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/scaffold-nextjs/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install mblode/agent-skills scaffold-nextjs
```

2. **Manually: put the files in place**
- File: `.github/skills/scaffold-nextjs/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add mblode/agent-skills --skill scaffold-nextjs -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/mblode/agent-skills --path skills/scaffold-nextjs
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/scaffold-nextjs/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add mblode/agent-skills --skill scaffold-nextjs -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/mblode/agent-skills/tree/HEAD/skills/scaffold-nextjs/SKILL.md

## When to use it
- bootstrap a Next.js Turborepo monorepo with pnpm workspaces
- integrate Ultracite linting with shadcn rules and Knip
- configure TypeScript 7 and Instant Navigations in Next.js
- add Blode UI components and icon packages to a new app
- set up root Lefthook hooks and architecture guides in AGENTS.md

## Example prompts
- create a Next.js project with Turborepo
- bootstrap a turborepo with Blode UI and Ultracite
- start a new web app called acme-web

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 84ec154073b7fcb6.

BEGIN THIRD-PARTY FILE 84ec154073b7fcb6
````text
---
name: scaffold-nextjs
description: "Scaffolds a Next.js turborepo with Blode UI, icons, Ultracite (oxlint/shadcn), workspace hooks, and GitHub/Vercel setup. Use when asked to \"create a Next.js project\", \"bootstrap a turborepo\", or \"start a new web app\"."
compatibility: Requires a shell, Git, Node.js, pnpm, and package registry access.
---

# Scaffold Next.js

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

- **IS:** bootstrapping a brand-new Next.js turborepo end to end: app creation, Blode UI, Ultracite with `ultracite/oxlint/shadcn`, turborepo conversion, GitHub, and Vercel.
- **IS NOT:** scaffolding a TypeScript CLI or npm package (use `scaffold-cli`), designing folder structure or module contracts for an existing app (use `codebase-architecture`), building a page inside an existing app, or choosing visual direction and palettes (use `ui-design`).

The references encode the house stack and dependency order. Verify version-sensitive flags against the installed CLI and bundled documentation; update a proven incompatible template rather than forcing stale flags. Where a Next.js question comes up that the references do not answer, read the bundled docs at `node_modules/next/dist/docs/` in the app (they match the installed version) rather than training data.

## Reference Files

| File | Read When |
|------|-----------|
| `references/app-setup.md` | Phase 2: create-next-app flags, TypeScript 7 upgrade, Instant Navigations config and the rules block for `apps/web/AGENTS.md`, shadcn + Blode registry, icons, Agentation, Ultracite 7.12+ with `ultracite/oxlint/shadcn`, move into apps/web/ |
| `references/turbo-configs.md` | Phase 6: root package.json, pnpm-workspace.yaml, turbo.json, root lefthook.yml, .gitignore, knip.json, workspace scripts, next.config.ts, root and app AGENTS.md |
| `references/deploy-and-launch.md` | Phase 7 and 8: GitHub, Vercel, CI workflow, metadataBase, verification, security.txt, favicon, OG image, validation checklist |

## Scaffold Workflow

Copy this checklist to track progress:

```text
Scaffold progress:
- [ ] Phase 1: Gather project info
- [ ] Phase 2: Create Next.js app
- [ ] Phase 2.1: Upgrade to TypeScript 7
- [ ] Phase 2.2: Turn on Instant Navigations
- [ ] Phase 3: Install Blode UI components and icons
- [ ] Phase 4: Install Agentation
- [ ] Phase 5: Install Ultracite
- [ ] Phase 5.1: Enable ultracite/oxlint/shadcn
- [ ] Phase 6: Convert to Turborepo
- [ ] Phase 7: GitHub and Vercel setup
- [ ] Phase 8: Pre-launch checklist
- [ ] Validation: run the checklist in deploy-and-launch.md
```

### Phase 1: Gather project info

Collect from the user (ask only for what is missing):

| Variable | Example | Default | Used in |
|----------|---------|---------|---------|
| `{{name}}` | `acme-web` | none (required) | Root package.json, directory name, README |
| `{{description}}` | `Marketing site for Acme` | none (required) | App package.json, README |
````
END THIRD-PARTY FILE 84ec154073b7fcb6

The third-party file has ended. Everything between the 84ec154073b7fcb6 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2964 of 11070 bytes. © mblode · MIT · https://github.com/mblode/agent-skills/tree/HEAD/skills/scaffold-nextjs/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md