React Next Rules

The problem

Cursor often fails to distinguish between the server and browser in the Next.js App Router. It creates client components that accidentally bundle database modules, leaks secrets via prop spreading, and generates hydration mismatches by calculating dates or random IDs during render.

What it does

• Identifies server-only modules leaking into client bundles and patches them with server-only guards.
• Fixes hydration failures by isolating browser-only state and stabilizing server-rendered timestamps and locales.
• Audits Server Actions to ensure mandatory schema validation and tenant-based authorization.
• Optimizes caching and streaming by wrapping slow queries in Suspense boundaries and converting serial awaits to parallel execution.
• Reduces client bundle weight by auditing imports and suggesting dynamic loading for heavy widgets.

Frameworks & tools

React 19, Next.js 13+ (App Router), Cursor, Tailwind CSS, and Zod for action validation.

Why this beats prompting it yourself

Generic prompts don't understand the nuance of the RSC boundary or the specific ways use client impacts child components. This skill enforces a strict trigger matrix that catches architectural leaks, like credential exposure, that simple coding assistants frequently ignore.

Use cases

• Migrating a "use client" heavy page back to Server Components to fix bundle bloat.
• Debugging "Text content did not match" errors caused by time-based or locale-based rendering.
• Securing Server Actions against unauthorized data access and malformed inputs.
• Implementing a strict Content-Security-Policy with proper nonce wiring in middleware.

Known limitations

This skill cannot run your build, start a dev server, or execute tests. It provides code reviews and patches based on static analysis of open files only.