Client Components

Client Components Skill

Purpose

This skill provides client-specific React conventions that extend the base react-coding-conventions skill. It covers patterns unique to client components: hooks, interactivity, event handling, and server action consumption.

When to Use This Skill

Use this skill in the following scenarios:

• Creating components with 'use client' directive
• Implementing useState, useEffect, or other hooks
• Adding event handlers (onClick, onChange, etc.)
• Consuming server actions via useServerAction
• Building interactive UI with Radix primitives
• Creating forms with TanStack Form

Important: This skill should activate automatically when client component work is detected.

Prerequisite Skills

This skill REQUIRES loading these skills FIRST:

1. react-coding-conventions - Base React patterns
2. ui-components - UI component patterns

How to Use This Skill

1. Load Prerequisites and Reference

Before creating or modifying client components:

1. Read .claude/skills/react-coding-conventions/references/React-Coding-Conventions.md
2. Read .claude/skills/ui-components/references/UI-Components-Conventions.md
3. Read .claude/skills/client-components/references/Client-Components-Conventions.md

2. Apply Client Component Patterns

'use client' Directive:

• Must be the first line of the file
• Required when using hooks, event handlers, or browser APIs

Hook Organization:

• Follow the 7-step internal organization order
• Use useCallback for memoized event handlers
• Use useMemo for expensive calculations

Event Handling:

• Prefix handlers with handle: handleClick, handleSubmit
• Include e.preventDefault() and e.stopPropagation() where needed
• Support keyboard accessibility

Server Action Consumption:

• Use useServerAction hook from @/hooks/use-server-action
• Use executeAsync with toastMessages for mutations
• Access results via data.data in callbacks

3. Automatic Convention Enforcement

After generating code:

1. Scan for violations against client component patterns
2. Fix automatically without asking permission
3. Verify completeness before presenting to user

4. Reporting

Provide a brief summary of conventions applied:

Client component conventions enforced:
  - Added 'use client' directive
  - Organized hooks in correct order
  - Used useCallback for event handlers
  - Added keyboard accessibility handlers
  - Used useServerAction for server action

File Patterns

This skill handles:

• src/components/ui/**/*.tsx
• src/components/feature/**/*.tsx (with 'use client')
• src/app/**/components/*-client.tsx
• Any .tsx with hooks or event handlers
• NOT page.tsx, layout.tsx, loading.tsx

Workflow Summary

1. Detect client component work (hooks, events, 'use client')
2. Load prerequisites: react-coding-conventions, ui-components
3. Load references/Client-Components-Conventions.md
4. Generate/modify code following ALL conventions
5. Scan for violations
6. Auto-fix violations
7. Report fixes applied