shadcn-impl-rsc-vs-client-boundaries

What problem does it solve?

This Skill prevents Next.js App Router crashes and broken hydration when using shadcn ui components by teaching the correct placement of the "use client" directive and the server/client boundary rules.

Core Features & Use Cases

• Per-primitive RSC compatibility matrix: determines which shadcn components are RSC-safe versus client-required (Radix state, hooks, and browser APIs).
• Directive placement rule: ensures "use client" is applied at the file level as the first non-comment line, and only on the smallest client island instead of page/layout modules.
• Boundary-safe composition patterns: covers server shell + client islands, Provider wrapper files (next-themes, TanStack Query, jotai, zustand), and correct data serialization across the boundary.
• Anti-pattern detection: addresses common failure modes like Dialog/Select missing directives, next-themes imported into server layouts, function props crossing server-to-client, and conditional/template-literal directives that are ignored.

Quick Start

Use the skill to decide whether a specific shadcn component (for example, Dialog or Card) can be rendered inside a Next.js App Router server component and where to put "use client" to avoid hydration errors.