Help us improve
Share bugs, ideas, or general feedback.
From rapid-mvp
This skill provides the default Next.js monorepo tech stack for rapid MVP development. Use when the user asks to "create a Next.js app", "add a new app to the monorepo", "build a dashboard", "scaffold a React page", "set up a new frontend", or when working in any project that uses Next.js with Bun workspaces. Also load when Claude is about to suggest UI libraries, form handling, or styling approaches in a Next.js context — this skill defines the defaults.
npx claudepluginhub kjgarza/marketplace-claude --plugin rapid-mvpHow this skill is triggered — by the user, by Claude, or both
Slash command
/rapid-mvp:nextjs-stackThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Default tech stack and patterns for Next.js-based rapid MVPs. These are opinionated defaults — deviations require explicit discussion (see architecture-decisions skill).
Guides full-stack Next.js project scaffolding with Tailwind v4, shadcn/ui, better-auth, and Vercel deployment via six interactive steps and agent teams.
Guides phased development of React and Next.js 14+ apps with App Router, Server Components, TypeScript, Tailwind CSS, and modern patterns. Use for new projects, component architecture, styling, and data fetching.
Provides patterns for Next.js 14+ App Router including Server Components, streaming, parallel routes, data fetching, and Server Actions.
Share bugs, ideas, or general feedback.
Default tech stack and patterns for Next.js-based rapid MVPs. These are opinionated defaults — deviations require explicit discussion (see architecture-decisions skill).
| Layer | Technology | Version | Notes |
|---|---|---|---|
| Framework | Next.js | 15.x | App Router only, no Pages Router |
| React | React | 19.x | Server Components by default |
| Runtime | Bun | 1.1+ | Package manager AND runtime |
| Monorepo | Bun workspaces | — | Workspace management via bun run --filter |
| Language | TypeScript | 5.6+ | Strict mode always |
| Concern | Default | Details |
|---|---|---|
| CSS framework | Tailwind CSS 4 | With OKLCH color variables |
| Component library | shadcn/ui | New York style, RSC-compatible |
| Primitives | Radix UI | Via shadcn/ui, never install Radix directly |
| Icons | lucide-react | Only icon library; never Font Awesome or Heroicons |
| Theming | next-themes | Class-based dark mode |
| Animations | tailwindcss-animate | Plugin for Tailwind |
| Typography | @tailwindcss/typography | For prose content |
| Variant management | class-variance-authority | For component variants |
| Class merging | tailwind-merge + clsx | Via cn() utility from @repo/utils |
| Toasts | sonner | Never react-hot-toast or react-toastify |
| Charts | recharts | When data visualization needed |
| Concern | Default |
|---|---|
| Form library | React Hook Form |
| Schema validation | Zod |
| Form resolvers | @hookform/resolvers |
| Number inputs | react-number-format |
Never use Formik. Never use Yup. Always pair Zod schemas with React Hook Form via resolvers.
| Concern | Default |
|---|---|
| Auth library | NextAuth (Auth.js) v5 |
| Default provider | Google OAuth |
| Dev mode | Mock user bypass for local development |
Base UI (packages/ui/) — shadcn/ui components built on Radix primitives. These are generic, reusable, and have no business logic. Exported from @repo/ui.
Application components (apps/<name>/src/components/) — Business-specific compositions of Base UI components. Organized in subdirectories by feature (e.g., components/dashboard/, components/invest/).
Pages (apps/<name>/src/app/) — Next.js App Router pages that compose application components. Minimal logic in pages; delegate to components.
components/blocks/)Reusable application-level primitives like metric-card, section-header, currency-input. These sit between Base UI and feature components.
import type for React typesimport * as)"use client" directive only on interactive components@/* maps to ./src/*Next.js projects enforce data/format separation:
src/content/): Content files as TypeScript (.ts) or JSON (.json)
.ts when you need type safety or computed values.json for simple data matching 11ty's _data/ patternsrc/components/ + src/app/): React components and pages — these only define presentationsrc/content/ filesTailwind CSS v4 is a major change from v3. These rules are non-negotiable:
tailwind.config.ts — v4 does not use a JS/TS config file@import "tailwindcss" replaces @tailwind base/components/utilities in globals.css@plugin directives replace the plugins: [] array@theme inline maps CSS custom properties to Tailwind utility classes@source tells Tailwind where to scan for class usage (for monorepo packages/ui/)@tailwindcss/postcss is the PostCSS plugin (replaces tailwindcss + autoprefixer)components.json must NOT have a tailwind.config fieldDefault deployment target is GitHub Pages via static export:
next.config.js uses output: "export", basePath, and assetPrefix driven by NEXT_PUBLIC_REPO_NAMEpublic/opengraph.png (1200x630) for OG images — no dynamic generation (incompatible with static export)images: { unoptimized: true } is required for static exportEvery project must include Open Graph metadata in the root layout:
metadataBase dynamically constructed from NEXT_PUBLIC_REPO_NAME for GitHub Pagesopengraph.png (1200x630) in public/summary_large_imageopengraph-image.tsx or twitter-image.tsx dynamic routes — incompatible with static exportpages/ directory — App Router onlyvar — const preferred, let when neededbasePath helper for GitHub Pages compatibilitytailwind.config.ts — Tailwind v4 configures everything in CSS--webpack flag in dev script — Turbopack is the default in Next.js 15.5+output: "export" — use static imagessrc/content/For complete file templates, configuration examples, and directory structures, read references/nextjs-patterns.md.