Form Validation

Deep form validation workflow—schemas, sync vs async rules, UX patterns, accessibility, and server parity. Use when building complex forms, multi-step wizard...

Security Scan

This is an instruction-only skill that provides high-level guidance for form validation and does not request credentials, install software, or perform actions outside its stated purpose.

Purpose & Capability

Name and description (deep form validation workflow) match the SKILL.md content. References to libraries/frameworks (Zod, Yup, React Hook Form, Formik, JSON Schema) are appropriate for the stated purpose and do not imply unexpected capabilities.

Instruction Scope

The instructions are high-level best-practice guidance (six-stage workflow, checklist). They do not instruct the agent to read files, access environment variables, call external endpoints, or execute commands beyond recommending patterns and tests.

Install Mechanism

No install spec and no code files — nothing will be written to disk or downloaded. This is the lowest-risk installation profile (instruction-only).

Credentials

The skill requests no environment variables, credentials, or config paths. All guidance is framework- and practice-focused; no secrets or external service access are required.

Persistence & Privilege

always is false and the skill is user-invocable; it does not request persistent/system privileges or modify other skills or system-wide settings.

Assessment

This skill is low-risk and purely advisory: it gives design and testing checklists for form validation but contains no executable code. If you plan to act on its recommendations (generate code, share schemas, or persist drafts), review any generated code before running it, and avoid pasting secrets or production credentials into prompts. If you expect the skill to provide runnable code, confirm who authored the code and conduct a normal code review before using it in production.

Validation combines correctness and UX: when errors appear, how they are announced, and how client rules match the server.

When to Offer This Workflow

Trigger conditions:

• Long forms, wizards, or multi-step checkouts
• Accessibility audits flagging unclear errors
• Mismatch between client-side “valid” and API rejection

Initial offer:

Use six stages: (1) model & schema, (2) rule layers, (3) UX timing, (4) accessibility, (5) async & server parity, (6) testing). Confirm framework (React Hook Form, Formik, native, etc.).

---

Stage 1: Model & Schema

Goal: Single schema (Zod, Yup, JSON Schema) as source of truth; share with backend when feasible.

---

Stage 2: Rule Layers

Goal: Separate required/format rules from cross-field rules (e.g., date range); isolate async checks (username available) from fast inline validation.

---

Stage 3: UX Timing

Goal: Choose onBlur vs onSubmit per field; avoid shouting on every keystroke unless real-time feedback is a product requirement.

---

Stage 4: Accessibility

Goal: Associate errors with fields via aria-describedby; move focus to first error on submit; use live regions judiciously.

---

Stage 5: Async & Server Parity

Goal: Map API validation errors to fields; handle race conditions on slow networks; idempotent submit with dedupe if needed.

---

Stage 6: Testing

Goal: Unit-test schema; e2e critical paths including server error mapping.

---

Final Review Checklist

• Schema aligned or shared with server
• Validation timing and copy defined
• Accessible error patterns
• API errors mapped to UI
• Tests for schema and flows

Tips for Effective Guidance

• Server rules always win—document intentional client shortcuts.
• Pair with ux-writing for error microcopy.

Handling Deviations

• Wizards: validate per step and on final submit; persist drafts securely.