菜单
Form handling with useFormBuilder and native forms. Use when creating forms, handling validation errors, managing form state, or building form-based slideovers and modals.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | nuxt-forms |
| description | Form handling with useFormBuilder and native forms. Use when creating forms, handling validation errors, managing form state, or building form-based slideovers and modals. |
Form handling with useFormBuilder composable and native form elements.
forms.md - useFormBuilder, native forms, validation patterns
<script lang="ts" setup>
import { Input } from '~/components/ui/input'
import { Button } from '~/components/ui/button'
import { Label } from '~/components/ui/label'
import { Loader2 } from 'lucide-vue-next'
const form = useFormBuilder<CreatePostData>()
.post('/api/posts')
.data({ title: '' })
.waiting('posts.creating')
.success(() => emits('close', true))
.error(({ error }) => { /* handle */ })
.build()
</script>
<template>
<form @submit.prevent="form.submit()">
<div class="flex flex-col gap-2">
<Label>Title</Label>
<Input v-model="form.data.title" />
<p v-if="form.errors.has('title')" class="text-sm text-destructive">
{{ form.errors.first('title') }}
</p>
</div>
<div class="flex justify-end gap-2 mt-4">
<Button type="submit" :disabled="form.processing">
<Loader2 v-if="form.processing" data-icon="inline-start" class="animate-spin" />
Create
</Button>
</div>
</form>
</template>
const formData = ref<CreatePostData>({
title: '',
content: '',
authorId: '',
isDraft: true,
})
const onSubmit = async (data: CreatePostData) => {
await createPostAction(data)
}
const onSuccess = () => {
emits('close', true)
}
// 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 -->
<div class="flex flex-col gap-2">
<Label>Title</Label>
<Input v-model="formData.title" />
<p v-if="form?.errors.has('title')" class="text-sm text-destructive">
{{ form?.errors.first('title') }}
</p>
</div>
Opinionated architecture decisions, patterns, and project structure for AdonisJS v6 API kit applications. Use when the user asks about architecture decisions, project structure, pattern selection, separation of concerns, service layers, repository patterns, domain-driven design, or mentions how to organize, which pattern to use, best practices, or architecture. Also trigger when the user is creating controllers, services, repositories, actions, DTOs, validators, events, listeners, state machines, or any domain logic classes in an AdonisJS v6 project. Also trigger for observability, telemetry, tracing, metrics, OpenTelemetry, OTEL, Prometheus, prom-client, distributed tracing, spans, instrumentation, monitoring, or setting up a /metrics endpoint. Even if the user doesn't explicitly say "architecture," use this skill whenever structural or organizational decisions are being made in an AdonisJS v6 codebase.
Foundational architecture for Nuxt 4 + Vue 3 + shadcn-nuxt applications. Use when starting new projects, understanding project structure, or making architectural decisions about directory organization, technology choices, and pattern selection.
Authentication with Keycloak and permission-based authorization. Use when implementing login/logout, protecting pages with permissions, checking permissions in components, or understanding the auth flow.
Vue component patterns with Composition API and script setup. Use when creating components, understanding script setup order convention, organizing component directories, or implementing component patterns like slideovers, modals, and tables.
Creating custom Vue composables with proper patterns. Use when building reusable stateful logic, shared state management, or encapsulating feature-specific behavior.
Nuxt and app configuration files. Use when configuring nuxt.config.ts, app.config.ts, environment variables, runtime config, or understanding how configuration flows through the application.