React Forms Skill

Use this skill for robust React forms: controlled inputs, React Hook Form, Zod validation, dynamic arrays, Server Actions, optimistic updates, reusable fields, file uploads, drag-and-drop, and multi-step wizards.

When to Use This Skill

Use when the user asks for tasks covered by the frontmatter triggers, especially implementation guidance, debugging, architecture choices, production hardening, or performance-sensitive decisions in this domain. Start from this orchestrator, then load the focused reference file that matches the requested detail level.

Core Workflow

1. Choose the form model: controlled state for simple forms, React Hook Form for complex client forms, or Server Actions for framework-native submissions.
2. Define validation near the data contract; prefer schema validation such as Zod when the shape is shared or complex.
3. Wire accessibility from the start with labels, aria-invalid, aria-describedby, error text near fields, and disabled/loading submit states.
4. For dynamic fields, use stable field IDs from useFieldArray and preserve validation paths as items are added, removed, or moved.
5. For file uploads, validate type/size, generate previews only when appropriate, and submit via FormData.
6. For multi-step forms, validate only the current step before advancing and keep one form context across steps when data must persist.

Key Gotchas