react-use-client-boundary_skill

Overview

This skill guides correct use of the React/Next.js "use client" directive and how to define client boundaries. It explains when to mark a component as client, common mistakes, and practical rules to keep server and client responsibilities clear. The goal is fewer bugs, smaller client bundles, and predictable rendering behavior.

How this skill works

The skill inspects component import chains and client-side needs to decide where a client boundary must be placed. It clarifies that adding "use client" creates a fence: once a boundary exists, all imported children become client components and do not need their own directive. It also explains common error messages and how to resolve them by moving hooks, event handlers, or data fetching to the correct side.

When to use it

• A component is imported by a Server Component (or page entry) and needs hooks, event handlers, or browser APIs.
• When a piece of UI needs local state, effects, or access to window/document/localStorage.
• When a third-party library requires a browser environment and is imported by a server-rendered tree.
• When you must create a clear separation between server-rendered data and interactive UI.

Best practices

• Add "use client" only at the highest point necessary to minimize client territory and bundle size.
• Do not add "use client" to child components already imported by a client component.
• Keep pure presentation components server-side when possible so they can be reused in both contexts.
• Keep data fetching in server components; pass results as props to client components.
• Avoid adding the directive "just to be safe" — decide based on hooks, event handlers, or browser API usage.

Example use cases

• Add "use client" to a SearchFilters component imported by a server page because it uses useState and event handlers.
• Keep Card component directive-free so it can render in server pages and inside client modals without duplication.
• Move event handlers into a client-bound Form component instead of passing functions from server components.
• Create a small client wrapper for interactive widgets (sliders, dropdowns) and leave product lists as server components.