Agent skill
nuxt-forms
Form handling with XForm component and useFormBuilder. Use when creating forms, handling validation errors, managing form state, or building form-based slideovers and modals.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/nuxt-forms
SKILL.md
Nuxt Forms
Form handling with XForm component and validation error display.
Core Concepts
forms.md - XForm, useFormBuilder, validation patterns
XForm Component
<XForm
ref="formRef"
url="/api/posts"
method="POST"
:data="formData"
:waiting="waitingFor.posts.creating"
@submit="onSubmit"
@success="onSuccess"
@error="onError"
>
<UFormField label="Title" name="title" :error="form?.errors.first('title')">
<UInput v-model="formData.title" />
</UFormField>
<template #actions>
<UButton type="submit" label="Create" :loading="form?.processing" />
</template>
</XForm>
Form Data Pattern
const formData = ref<CreatePostData>({
title: '',
content: '',
authorId: '',
isDraft: true,
})
const onSubmit = async (data: CreatePostData) => {
await createPostAction(data)
}
const onSuccess = () => {
emits('close', true)
}
Validation Errors
// Access errors
form.errors.has('title') // boolean
form.errors.first('title') // string | undefined
form.errors.get('title') // string[] | undefined
form.errors.any() // boolean
// Display in template
<UFormField label="Title" name="title" :error="form?.errors.first('title')">
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?