A Claude AI skill that turns Claude into a senior Next.js engineer with strong opinions. It enforces architectural consistency from day one — preventing drift, duplication, and rot that accumulates when AI-generated code has no memory of your conventions.
Pick whichever fits your workflow. All three end up with the same intelligence available in your Claude session.
Clone into your Claude skills directory. The skill becomes a slash command available in any project.
git clone https://github.com/sonimanish180/nextjs-skill ~/.claude/skills/nextjs-skill/nextjs-skill build me a SaaS dashboardInstall directly from a local folder. The skill auto-activates when you describe a Next.js task.
git clone https://github.com/sonimanish180/nextjs-skillCopy the contents of SKILL.md from the repo and paste it at the start of any Claude conversation. No install required.
Without an enforced convention system, every AI-generated session drifts. The 10th screen doesn't look like the 1st.
Mixes App Router and Pages Router
App Router only. Pages Router is in slow deprecation — enforced from file one.
Duplicates components across sessions
Registry check mandatory before creating any component. Extend, don't duplicate.
Ignores i18n until it's expensive to retrofit
next-intl wired from day one, even for single-language apps.
No concept of a living spec
.claude/spec.md is created at Bootstrap and updated after every Build session.
Client state and server state get muddled
TanStack Query owns server/async state. Zustand owns client-only global state. No overlap.
Icons imported from anywhere, inconsistently
All icons go through src/icons/index.ts barrel. Direct lucide imports are banned.
The skill detects context and switches modes automatically. You never need to explain your project from scratch.
You have a product brief. The skill runs a 3-question intake, generates a living spec, then scaffolds a full project in one shot — compiles clean, zero TypeScript errors, deploys on first push.
The skill reads your spec and existing component registry before writing a single line. It checks for reusable components, extends them rather than duplicating, then updates the spec after.
Six quality gates that check TypeScript cleanliness, lint errors, dark mode consistency, registry violations, spec coverage, and Lighthouse readiness. Findings ranked by severity.
Fixed for v1. This is the promise — every project scaffolded by this skill uses the same stack, forever. No drift between sessions.
Concrete outcomes for developers building production products — not marketing copy.
The registry concept prevents component duplication. The 20th screen follows the same patterns as the 1st — because the skill checks what exists before creating anything new.
.claude/spec.md is generated at Bootstrap and updated after every Build session. Audit mode uses it to detect drift between what the spec says and what the code actually does.
ESLint flat config, Prettier with Tailwind plugin, Husky v9 pre-commit hooks, and a 5-job GitHub Actions CI pipeline are included in every Bootstrap — never optional, never forgotten.
Vitest config, Testing Library setup, unit tests for the cn utility, component render tests, Playwright config, and two E2E specs are included in every Bootstrap. You ship with a green test suite.
next-intl 3 is wired in every project — even single-language apps. Retrofitting i18n after launch is one of the most expensive refactors a Next.js codebase can face.
The skill never reads .env files, secret directories, or key files. It announces what it plans to scan before scanning. If a file might contain secrets, it asks first.
Targets React 19 with React Compiler enabled. This means memo and useMemo are handled automatically — generated code doesn't pepper manual optimization calls everywhere.
The .github/workflows/ci.yml generated in Bootstrap runs 5 parallel jobs on every push. You don't wire up CI after the fact — it ships with the scaffold and runs immediately.
First contact with an existing project that wasn't scaffolded by the skill triggers Migration submode — a structured path to bring your conventions in line without a full rewrite.
Each system has a unique border-radius scale, background texture, and typography treatment. Not just a color swap.
Dark / Cinematic (Veil-family — runtime switchable)
Cinematic dark — teal/amber, midnight navy, radial glow
Glassmorphism — frosted panels, backdrop-filter
Terminal grid — cyan, sharp edges, 56px grid overlay
Organic warmth — terracotta, grain texture
High energy — coral, diagonal stripe background
Void aesthetic — lime accent, sub-pixel grid
Raw energy — 0px radius, 5px offset shadows
Cyberpunk — pink grid, glow text-shadow on headings
Retrofuture — CRT scan lines, neon pink/cyan glow
Light / Pastel
Soft light — lavender primary, pink accent
Airy light — sky blue, mint accent
Warm light — rose primary, peach accent
Retro / Terminal
Retro green terminal — pure pixel aesthetic
Amber terminal — classic command-line look
Dark neon — yellow primary, deep blue-black
Cyberpunk / Acid
Hot pink + purple — neon dystopia
Lime green + magenta — maximum contrast
Red + cyan — chromatic aberration aesthetic
Non-portfolio / Standalone
Enterprise SaaS — dense, blue, authoritative
Dev & analytics — dark-first, violet, monospace
Premium light — spacious, warm, editorial
For portfolio and showcase sites, the skill includes a runtime layout-switching system. Each section has 6 layout variants, switchable live without a page reload.
Combined with 18 design systems: 839,808 possible portfolio configurations. Every combination renders without a page reload, powered by a Zustand-backed floating ⊞ Layout panel.
The skill is optimized for developers who own the entire stack and don't want to maintain a separate style guide.
None of this is optional. None of it requires a separate setup step. It's all generated in Bootstrap mode.
Every section on this portfolio — the variant switcher, the design systems, the 3D components, the optimistic UI interactions — was scaffolded and extended using this skill.