How do I install the Vue Forms skill?

Run npx skillmds@latest add kimjinwoo4/vue-forms in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Vue Forms safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Vue Forms?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Vue Forms free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Vue Forms?

KIMJINWOO4 (@kimjinwoo4) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Vue Forms by kimjinwoo4 — Agent Skill

Name: Vue Forms
Author: KIMJINWOO4

Vue Forms

Forms and validation in Vue 3. v-model/defineModel patterns, custom form controls, schema validation with VeeValidate 4 + Zod, async validation, multi-step wizards, submission states, unsaved-changes guards, accessible error messaging. Use when building or reviewing forms, inputs, validation, or file uploads in Vue.

KIMJINWOO4 aa9895f 4 files · 13.5 KB Updated Sep 17, 2026

File contents

Vue Forms Skill

Baseline 2026-07: Vue 3.5+ (defineModel), VeeValidate 4.x + Zod 4 for schema-driven forms. FormKit and @tanstack/vue-form are valid alternatives — follow whatever the project already uses.

Decision Table

Form	Approach
1-3 fields, trivial rules (login, search)	Native `v-model` + a small validation composable — no library
Business forms, schema shared with API	VeeValidate + Zod (`toTypedSchema`) — one schema for client + server
Highly dynamic/config-driven forms	FormKit (schema rendering) or hand-rolled renderer over VeeValidate
Custom input components	`defineModel()` — never mutate props, never `watch`-sync manually

Core Rules

Validate with the same schema on client and server; client validation is UX, not security.
Errors show on blur or first submit — not on every keystroke while typing a fresh field ("reward early, punish late").
Disable the submit button only while submitting — not while invalid (users need the click to reveal what's missing).
Every error must be programmatically tied to its input (aria-describedby) — see vue-a11y skill for details.
Guard unsaved changes with onBeforeRouteLeave + dirty state.

Reference Map

Topic	Description	Path
Native patterns	v-model, defineModel, custom controls, DIY validation composable	native-form-patterns
VeeValidate + Zod	Typed schemas, useForm/useField, field arrays, async rules	vee-validate-zod
Form UX patterns	Multi-step wizards, submit states, dirty guards, file upload	form-ux-patterns

---name: vue-formsdescription: Forms and validation in Vue 3. v-model/defineModel patterns, custom form controls, schema validation with VeeValidate 4 + Zod, async validation, multi-step wizards, submission states, unsaved-changes guards, accessible error messaging. Use when building or reviewing forms, inputs, validation, or file uploads in Vue.---# Vue Forms Skill> Baseline 2026-07: Vue 3.5+ (`defineModel`), VeeValidate 4.x + Zod 4 for schema-driven forms. FormKit and @tanstack/vue-form are valid alternatives — follow whatever the project already uses.## Decision Table| Form | Approach ||------|----------|| 1-3 fields, trivial rules (login, search) | Native `v-model` + a small validation composable — no library || Business forms, schema shared with API | **VeeValidate + Zod** (`toTypedSchema`) — one schema for client + server || Highly dynamic/config-driven forms | FormKit (schema rendering) or hand-rolled renderer over VeeValidate || Custom input components | `defineModel()` — never mutate props, never `watch`-sync manually |## Core Rules- Validate with the same schema on client **and** server; client validation is UX, not security.- Errors show on `blur` or first submit — not on every keystroke while typing a fresh field ("reward early, punish late").- Disable the submit button only while submitting — not while invalid (users need the click to reveal what's missing).- Every error must be programmatically tied to its input (`aria-describedby`) — see `vue-a11y` skill for details.- Guard unsaved changes with `onBeforeRouteLeave` + dirty state.## Reference Map| Topic | Description | Path ||------|-------------|------|| **Native patterns** | v-model, defineModel, custom controls, DIY validation composable | [native-form-patterns](references/native-form-patterns.md) || **VeeValidate + Zod** | Typed schemas, useForm/useField, field arrays, async rules | [vee-validate-zod](references/vee-validate-zod.md) || **Form UX patterns** | Multi-step wizards, submit states, dirty guards, file upload | [form-ux-patterns](references/form-ux-patterns.md) |

Frequently asked questions