What problem does it solve? Developers working with React Server Components and Next.js often misuse the "use client" directive, adding it redundantly to every component or omitting it where needed, causing build errors like "useState only works in Client Components" and bloated client bundles. ## Core Features & Use Cases - Boundary Placement Guidance: Explains that "use client" marks a boundary, not a per-component label, so child components inside a client boundary never need the directive. - Decision Flowchart: Provides a step-by-step decision tree for determining whether a component needs the directive based on its importer and its use of hooks, event handlers, or browser APIs. - Error Troubleshooting: Covers fixes for common errors such as passing event handlers from Server Components and using async/await in Client Components. - Use Case: When a Next.js page fails to compile because a form component uses useState, apply this skill to place a single "use client" directive at the form entry point and remove redundant directives from its child input and button components. ## Quick Start Review my Next.js components and tell me exactly where to place the "use client" directive and which redundant directives to remove.
