UI Interaction

What problem does it solve?

This skill guides developers in implementing the client-side interactivity layer for Next.js applications, covering when to use the "use client" directive, how to manage local state, and how to integrate robust form validation with Zod and React Hook Form.

Core Features & Use Cases

• Client-side interactivity guidance: event handling, local state management, and browser API usage within Next.js apps.
• Form validation patterns: using Zod schemas shared between client and server for consistent data validation.
• Server vs. client boundaries: best practices for preferring Server Components by default and converting to Client Components only where interactivity is required.
• Optimistic UI updates and accessible interactive patterns to enhance UX.
• Use Cases: building a responsive form with client-side validation, adding interactive widgets, or adding client behavior to existing server components.

Quick Start

Use this skill to design a client-interactive component for a Next.js page. Start by adding the "use client" directive to the component that requires interactivity, wire up event handlers, and apply Zod validation with React Hook Form for a robust user experience.