mcpField
R
react-forms

react-forms

github.com/josiahsiegelDevelopment5974 installsUpdated 19w ago
Repository

About react-forms

A skill offering implementation and debugging guidance for React forms, from basic inputs to complex multi-step flows. It emphasizes validation, accessibility, uploads, and production considerations.

Key features

  1. 01Controlled inputs and React Hook Form
  2. 02Zod schema validation
  3. 03Dynamic and conditional fields
  4. 04Server Actions and optimistic updates
  5. 05File uploads and drag-and-drop
  6. 06Accessible multi-step forms

Use cases

  1. 01Choose a form model for a React feature
  2. 02Debug validation and server error handling
  3. 03Build forms with dynamic field arrays
  4. 04Implement multi-step forms or file uploads

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/josiahsiegel/claude-plugin-marketplace --skill react-forms

After installing, type/react-formsin Claude Code to confirm it loaded.

Bundled filesreferences/react-forms-complete-guide.md

Details

From the project README

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

  • Do not mix controlled and uncontrolled patterns on the same input without a deliberate bridge component.
  • Disable submit while pending to prevent duplicate submissions.
  • Always surface server-side validation errors, even when client validation exists.
  • File previews can leak memory if object URLs are not revoked; Data URLs can be large for big files.
  • In Server Actions, keep progressive enhancement and pending/error states visible to the user.

Reference Map

  • references/react-forms-complete-guide.md - Full original guide covering controlled forms, validation, React Hook Form, Zod, field arrays, conditional fields, Server Actions, optimistic updates, custom components, uploads, drag-and-drop, multi-step forms, and best practices.

Response Guidance

  • Preserve the user's existing framework, library, and tooling choices unless there is a clear compatibility or performance reason to suggest an alternative.
  • Give copy-pasteable code only for the exact task at hand; otherwise point to the relevant reference section.
  • Call out tradeoffs, failure modes, and verification steps for production workflows.
  • Prefer accessible, maintainable, measurable solutions over clever micro-optimizations.

Comments

Markdown supported