skills.rest
arborba100
arborba100COMMUNITY
Explore all skills by this author →
GitHub

forms

Implements validated React forms using react-hook-form and shadcn/ui components.

Updated Mar 26, 2026
Search Tags:#React#shadcn/ui#user input#CMS#form validation#contact form#react-hook-form
One-click install
npx skills add https://github.com/arborba100/command-hub --skill forms-arborba100
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: forms
Source: https://github.com/arborba100/command-hub/tree/main/.emdash/skills/forms
Command: npx skills add https://github.com/arborba100/command-hub --skill forms-arborba100

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react-hook-form.

What problem does it solve? Building forms with proper validation, error handling, and accessible UI components in React requires repetitive boilerplate. This Skill provides ready-to-use patterns for creating forms, validating user input, and submitting data to a CMS without writing everything from scratch. ## Core Features & Use Cases - Form Patterns: Complete examples using react-hook-form with both basic register-based forms and shadcn/ui Form components for better accessibility. - Validation Rules: Built-in patterns for required fields, min/max length, regex patterns (email, phone, URL), custom validators, and conditional validation. - Input Components: Ready-made integrations for text inputs, textareas, selects, checkboxes, radio groups, and switches. - Use Case: Build a contact page that collects name, email, and message, validates each field with inline error messages, and saves submissions to a Wix CMS collection via BaseCrudService. ## Quick Start Create a contact form with name, email, and message fields that validates input and saves submissions to the CMS.

Frequently Asked Questions about forms

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a validated form with react-hook-form?▼

Use the useForm hook to get register, handleSubmit, and formState, then attach validation rules like required, minLength, and pattern directly in register calls. Display errors from formState.errors next to each field and wrap submission in handleSubmit.

How to validate email and phone inputs in React forms?▼

Pass a pattern rule with a regex to register, such as /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2}$/i for email. Each rule includes a custom error message shown when validation fails.

Should I use register or shadcn/ui Form components with react-hook-form?▼

Use register for simple forms with basic inputs. Use the shadcn/ui Form, FormField, and FormItem components for complex forms needing better accessibility, descriptions, and consistent error message rendering.

Can react-hook-form handle conditional validation rules?▼

Yes, use the watch function to observe another field's value and make rules conditional, such as requiring a card number only when the payment method equals card. The validation re-evaluates as watched values change.

How do I submit react-hook-form data to a Wix CMS collection?▼

Call BaseCrudService.create with the collection name and form data inside your onSubmit handler, adding fields like id via crypto.randomUUID and a timestamp. Avoid try-catch so errors bubble up, then call form.reset after success.

Related Skills

Explore More Software Engineering Skills→
Mischio95Mischio95
1

shadcn-ui

Set up shadcn/ui components and forms with React Hook Form and Zod.

Community
Advanced
arkangelaiarkangelai

submit

Validate approvals and fill grant submission forms via browser automation.

Official
Advanced
netlifynetlify
32

netlify-forms

Collect HTML form submissions on static sites via Netlify Forms.

Official
Intermediate
fusenginefusengine
1

astro-actions

Implements type-safe Astro server actions with Zod validation and progressive form enhancement.

Community
Intermediate