← ClaudeAtlas

form-validation--schema-builderlisted

Builds robust, type-safe interactive web forms featuring complex validation logic, real-time error feedback, and seamless client-server schema synchronization.
RMAzrim/opencode-artes · ★ 2 · API & Backend · score 76
Install: claude install-skill RMAzrim/opencode-artes
# Form Validation & Schema Builder ## 1. System Architecture & Prerequisites - Runtime: Node.js >= 20.11.0, npm >= 10. - Framework: Next.js 15.1.6 with React 19. - Dependencies: `react-hook-form@^7.54.2`, `@hookform/resolvers@^3.10.0`, `zod@^3.24.1`, `next@15.1.6`, `react@19.0.0`, `react-dom@19.0.0`. - Dev dependencies: `typescript@^5.7.3`, `@types/react@^19.0.7`, `@types/react-dom@^19.0.3`, `@types/node@^22.10.7`. - Architecture rules enforced by this blueprint: - One Zod schema is the single source of truth. React Hook Form binds to it via `zodResolver`; TypeScript types are inferred with `z.infer<typeof schema>` so the client, server, and store cannot diverge. - Validation is progressive: each step of the registration flow is its own Zod schema; navigation gates on `trigger([...stepFields])` before advancing. - A final discriminated-union `safeParse` re-validates the whole bundle on submit, mapping any failure back to its owning step before anything is persisted. - Errors are rendered through one typed generic `<Field>` wrapper with `aria-invalid` and `aria-describedby` wiring. ## 2. Input/Output Data Contracts JSON Schema for the form configuration inputs: ```json { "$schema": "http://json-schema.org/draft-07/schema#", "type": "object", "additionalProperties": false, "properties": { "steps": { "type": "array", "items": { "enum": ["account", "address", "confirm"] }, "default": ["account", "address", "confirm"] }, "validation