Help us improve
Share bugs, ideas, or general feedback.
From frontend-craft
Guides form implementation with validation, dynamic fields, file upload, multi-step flows, and performance optimization using React Hook Form and Zod.
npx claudepluginhub bovinphang/frontend-craftHow this skill is triggered — by the user, by Claude, or both
Slash command
/frontend-craft:fec-form-handlingThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Manage form status, verification and submission to avoid lags in complex form input.
Implements type-safe React forms with React Hook Form and Zod validation for schemas, field arrays, multi-step forms, nested validation, and error troubleshooting.
Implements form architecture for multi-step wizards, client/server/async validation with Zod, file uploads, and accessible design. For React/Vue/Angular/Svelte apps beyond simple forms.
Implements React forms using controlled components, React Hook Form with Zod validation, dynamic useFieldArray fields, server actions, optimistic updates, file uploads, and multi-step wizards.
Share bugs, ideas, or general feedback.
Manage form status, verification and submission to avoid lags in complex form input.
aria-invalid, aria-describedby and role="alert" for error prompts.import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
const loginSchema = z.object({
email: z.string().email("Please enter a valid email address"),
password: z.string().min(8, "Password must be at least 8 characters"),
});
type LoginForm = z.infer<typeof loginSchema>;
export function LoginFormView() {
const {
register,
handleSubmit,
formState: { errors, isSubmitting },
} = useForm<LoginForm>({
resolver: zodResolver(loginSchema),
defaultValues: { email: "", password: "" },
});
return (
<form onSubmit={handleSubmit((data) => api.login(data))} noValidate>
<label htmlFor="email">Email</label>
<input id="email" {...register("email")} aria-invalid={!!errors.email} />
{errors.email && <span role="alert">{errors.email.message}</span>}
<label htmlFor="password">Password</label>
<input id="password" type="password" {...register("password")} />
{errors.password && <span role="alert">{errors.password.message}</span>}
<button disabled={isSubmitting}>
{isSubmitting ? "Submitting..." : "Submitting"}
</button>
</form>
);
}
When it comes to whether you need a form library, framework selection, Controller, useFieldArray, linkage verification, file upload, multi-step form, asynchronous verification and performance mode, load references/advanced-form-patterns.md.
The output form is type-safe, accessible, and has a clear submission status; complex fields and file uploads have schema constraints, there is no obvious lag in the input process, and server-side errors can be backfilled to a position that the user can understand.