forms-validation - SKILL.md Agent Skill

name: forms-validation description: Patrones de formularios con Zod + React Hook Form + shadcn/ui Form. Activar ante "formulario", "form", "validación", "input", "crear form", "editar form", "wizard", "multi-step". license: MIT compatibility: Requires react-hook-form, @hookform/resolvers, zod, and shadcn/ui Form components. metadata: author: netxa version: "3.4" model: opus

Formularios — Zod + React Hook Form + shadcn/ui

Estructura de Archivos por Feature

features/[feature]/
├── types/[feature].schemas.ts    ← Schemas Zod + tipos inferidos
├── hooks/useCreate[Feature]Form.ts
├── components/Create[Feature]Form.tsx

Patrón Obligatorio

Schema Zod en types/[feature].schemas.ts
Hook con useForm + zodResolver en hooks/
Componente con <Form> + <FormField> + <FormMessage> de shadcn/ui
SIEMPRE deshabilitar submit durante mutation.isPending
Mensajes de validación en español para UI

Convenciones de Naming

Schema: create[Entity]Schema, update[Entity]Schema
Tipo: Create[Entity]Input, Update[Entity]Input
Hook: useCreate[Entity]Form()
Componente: Create[Entity]Form

Para patrones detallados, código de ejemplo, y validaciones chilenas comunes: ver references/PATTERNS.md

Para formularios multi-step/wizard: ver references/WIZARD.md

Checklist Pre-Commit

Schema Zod con mensajes en español
Tipo inferido exportado
Hook con zodResolver
<FormMessage /> en cada campo
Submit deshabilitado durante isPending
Mobile-first layout
Test: submit válido + inválido