skills.rest
dfrabik
dfrabikOFFICIAL
Explore all skills by this author →
GitHub

nextjs-app-router-component-generator

Generate Next.js App Router components with correct 'use client' directives.

1|Updated Jan 21, 2026
Search Tags:#components#nextjs#generate#app-router#server-components#client-components#use-client
One-click install
npx skills add https://github.com/dfrabik/dev-portfolio --skill nextjs-app-router-component-generator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-app-router-component-generator
Source: https://github.com/dfrabik/dev-portfolio/tree/main/.cursor/skills/nextjs-app-router-component-generator
Command: npx skills add https://github.com/dfrabik/dev-portfolio --skill nextjs-app-router-component-generator

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Next.js App Router component generator helps you automatically create components with correct 'use client' directives to align with the server/client boundaries and prevent Turbopack build errors.

Core Features & Use Cases

  • Generate client components with proper 'use client' directives when interactivity is required.
  • Enforce the "Leaves are client, roots are server" rule to optimize rendering and avoid build-time issues.
  • Use cases include creating UI primitives, forms, and interactive widgets within Next.js App Router architecture.

Quick Start

Describe the component you want and specify if it needs interactivity.

Frequently Asked Questions about nextjs-app-router-component-generator

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

FAQPage Schema
Why does my Next.js App Router build fail with Turbopack errors on client components?▼

Next.js App Router build fails when interactive components missing the 'use client' directive breach server-client boundaries. Adding 'use client' at the top of interactive leaves prevents these Turbopack build errors by enforcing proper server-client boundaries.

How do I generate Next.js App Router components with correct 'use client' directives?▼

To generate Next.js App Router components, describe the element and specify if it needs interactivity. This produces ready-to-use code with proper 'use client' directives applied to interactive leaves following the roots-are-server pattern.

When do I need to add the 'use client' directive in Next.js App Router?▼

You need the 'use client' directive in Next.js App Router when creating interactive UI primitives, forms, or widgets. It marks client-side boundaries for components requiring interactivity to render correctly.

Does the Next.js leaves-are-client pattern apply to all generated App Router components?▼

The Next.js leaves-are-client pattern applies specifically to interactive components like forms and UI primitives. Roots remain server components by default to optimize rendering and avoid build-time issues.

Can I fix server-client boundary issues without manually rewriting my Next.js components?▼

You can fix server-client boundary issues by automatically generating replacement Next.js components with correct 'use client' directives. This enforces the leaves-are-client rule without manual rewriting.

Related Skills

Explore More Software Engineering Skills→
LimaTechnologiesLimaTechnologies

shadcn-ui

Implement shadcn/ui components in React and Next.js projects.

Community
Advanced
Aqsagull99Aqsagull99

nextjs-skill

Build Next.js 16+ apps with App Router, server components, and API routes.

Community
Intermediate
darellchua2darellchua2
4

nextjs-unit-test-creator

Generate Next.js 16 unit tests for App Router, components, and API routes.

Community
Advanced
klenklen
5

react-use-client-boundary

Guide proper placement of the "use client" directive in React Server Components.

Community
Intermediate