skills.rest
Scheune10-coding
Scheune10-codingCOMMUNITY
Explore all skills by this author →
GitHub

nextjs-codegen

Generate Next.js 16 app scaffolds with App Router and Tailwind.

Updated Mar 30, 2026
Search Tags:#scaffolding#codegen#nextjs#tailwind#shadcn#app-router
One-click install
npx skills add https://github.com/Scheune10-coding/my-claude-code-skills --skill nextjs-codegen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-codegen
Source: https://github.com/Scheune10-coding/my-claude-code-skills/tree/main/nextjs-codegen
Command: npx skills add https://github.com/Scheune10-coding/my-claude-code-skills --skill nextjs-codegen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building robust Next.js 16 apps with App Router, Server/Client Components, and modern tooling is complex and error-prone; this skill automates scaffolding, patterns, and configurations to accelerate production-grade development.

Core Features & Use Cases

  • App Router conventions with layouts, pages, loading, and error boundaries
  • Server Components by default with client components where needed
  • Proxy.ts workflow instead of middleware.ts for Next.js 16
  • "use cache" driven caching with cacheLife and revalidation patterns
  • Tailwind CSS v4 with CSS-first configuration and OKLCH colors
  • shadcn/ui integration and form patterns with React Hook Form + Zod v4
  • TanStack Query SSR prefetch + Hydration
  • Zustand store pattern for client-side state
  • Project scaffolding and end-to-end code-generation patterns
  • SSR/Streaming and parallel route support

Quick Start

Apply this skill to a Next.js 16 project to generate production-ready scaffolding and patterns.

Frequently Asked Questions about nextjs-codegen

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I scaffold a Next.js 16 app with App Router and server components?▼

Scaffolding a Next.js 16 app with App Router and server components is automated by this skill, which generates production-ready project structures enforcing layouts, pages, loading states, and error boundaries.

Does Next.js 16 use proxy.ts instead of middleware.ts for routing?▼

Next.js 16 uses a proxy.ts workflow instead of middleware.ts, and this skill enforces that specific routing convention to generate robust application scaffolding patterns.

How do I configure Tailwind CSS v4 and shadcn/ui in a Next.js project?▼

Configuring Tailwind CSS v4 with CSS-first configuration, OKLCH colors, and shadcn/ui integration in a Next.js project is handled automatically by this skill's scaffolding patterns.

Can I use React Hook Form with Zod v4 for Next.js server components?▼

React Hook Form with Zod v4 can be used for Next.js server components through the shadcn/ui integration and form patterns generated by this skill.

What is the best way to implement explicit caching with use cache in Next.js 16?▼

The best way to implement explicit caching in Next.js 16 is using the "use cache" directive with cacheLife and revalidation patterns, which this skill automatically scaffolds for your application.

How do you set up TanStack Query SSR prefetch and Zustand stores in Next.js?▼

TanStack Query SSR prefetch with hydration and Zustand store patterns for client-side state are automatically scaffolded in your Next.js project when applying this skill.

Related Skills

Explore More Software Engineering Skills→
GemachDAOGemachDAO
4

gdex-ui-install-setup

Scaffold a React or Next.js project with a GDEX SDK provider.

Official
Intermediate
djnsty23djnsty23
2

deploy

Deploy and configure CI/CD workflows for Vercel, Supabase, and GitHub Actions.

Community
Advanced
cenjiecenjie

tanstack-integration-best-practices

Integrate TanStack Query with TanStack Router for SSR-safe data fetching and caching.

Community
Advanced
VKirillVKirill
15

nextjs

Implement Next.js 16 App Router patterns for routing, caching, and middleware.

Community
Advanced