From claudient
Adds or fixes form validation with schema-based rules, accessible error display, and submit behavior.
How this command is triggered — by the user, by Claude, or both
Slash command
/claudient:form-validation [file] [library: zod|yup|valibot|native]frontend/Files this command reads when invoked
The summary Claude sees in its command listing — used to decide when to auto-load this command
Implement or repair form validation in: $ARGUMENTS Parse args: first token is the target file; optional library name overrides auto-detection. **Step 1 — Detect existing stack** Scan for imports of: `react-hook-form`, `formik`, `zod`, `yup`, `valibot`, `@conform-to/react`. Use whatever is already installed. If nothing is installed, default to `react-hook-form` + `zod`. Do not install new packages without noting them explicitly. **Step 2 — Define the schema** For each field in the form, derive validation rules from: - Field name semantics (email, phone, url, password, date) - Existing con...
Implement or repair form validation in: $ARGUMENTS
Parse args: first token is the target file; optional library name overrides auto-detection.
Step 1 — Detect existing stack
Scan for imports of: react-hook-form, formik, zod, yup, valibot, @conform-to/react.
Use whatever is already installed. If nothing is installed, default to react-hook-form + zod.
Do not install new packages without noting them explicitly.
Step 2 — Define the schema For each field in the form, derive validation rules from:
required, minLength, pattern, type)Schema rules to apply:
email: .email() with a human-readable messagepassword: min 8 chars, at least one number or symbol — emit the constraint clearly in the messageurl: .url() — allow empty string only if field is optionalphone: E.164 regex or locale-appropriate pattern.min(1, "Field is required") — not just .nonempty().optional() or .nullable() as appropriate — do not leave ambiguousStep 3 — Wire validation to the form For react-hook-form:
resolver with the schema library's resolver adapteronChange validation with register() and formState.errorshandleSubmit — do not manually call preventDefaultFor formik:
validationSchema prop<ErrorMessage> component or formik.errors[field] — not ad hoc string checksStep 4 — Error display Each error message must:
aria-describedby pointing to the error element's idaria-invalid="true" on the input when an error is presentrole="alert" on the error container if it appears after user action (not on initial render)Step 5 — Submit behavior
isSubmitting)setError to the correct fieldsApply all changes to the file. List every field updated and every new validation rule added.
npx claudepluginhub claudient/claudient --plugin claudient-personas