client-components

What problem does it solve?

This Skill ensures all client-side React components adhere to Head Shakers' specific conventions, covering everything from hook organization and event handling to Radix UI integration and server action consumption, reducing development time and improving maintainability.

Core Features & Use Cases

• Standardized Component Structure: Enforces the 'use client' directive, consistent hook organization, and naming conventions for state and event handlers.
• Accessible UI with Radix: Guides the integration of Radix UI primitives for building accessible and robust interactive elements.
• Seamless Server Action Consumption: Ensures client components correctly consume server actions using the useServerAction hook, managing loading states and toast notifications.
• Use Case: When building an interactive search dropdown, this Skill ensures the component is marked 'use client', uses useState for query, useEffect for debouncing, useCallback for event handlers, and useServerAction for fetching search results, all while adhering to accessibility standards.

Quick Start

Generate a new client-side React component that uses useState and useEffect to manage local state, and consumes a server action via useServerAction for data mutations.