Full-stack-skills avue-form

Builds configuration-driven dynamic forms with Avue Form, including field types (input, select, date, upload), validation rules, form groups, tabbed layouts, and event handling. Use when the user needs to create forms with Avue in Vue applications, implement form validation, or build dynamic multi-step forms.

install

source · Clone the upstream repo

git clone https://github.com/partme-ai/full-stack-skills

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/partme-ai/full-stack-skills "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/avue-skills/avue-form" ~/.claude/skills/partme-ai-full-stack-skills-avue-form && rm -rf "$T"

manifest: skills/avue-skills/avue-form/SKILL.md

When to use this skill

Use this skill whenever the user wants to:

Create configuration-driven forms with Avue Form
Define form fields with types (input, select, date, checkbox, upload, etc.)
Implement form validation rules
Build dynamic forms, form groups, or tabbed form layouts
Handle form submit, reset, and field change events

How to use this skill

Workflow

Install -
```
npm install @avue/form
```
and register with
```
Vue.use(Avue)
```
Define option - Configure columns with labels, props, types, and rules
Bind v-model - Two-way bind the form data object
Handle events - Listen for @submit, @reset-change, and field-level events

Quick-Start Example: Form with Validation

<template>
  <avue-form :option="option" v-model="form" @submit="handleSubmit" @reset-change="handleReset">
  </avue-form>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      option: {
        submitText: 'Save',
        column: [
          {
            label: 'Name',
            prop: 'name',
            type: 'input',
            span: 12,
            rules: [{ required: true, message: 'Name is required', trigger: 'blur' }]
          },
          {
            label: 'Role',
            prop: 'role',
            type: 'select',
            span: 12,
            dicData: [
              { label: 'Admin', value: 'admin' },
              { label: 'User', value: 'user' }
            ]
          },
          {
            label: 'Start Date',
            prop: 'startDate',
            type: 'date',
            format: 'yyyy-MM-dd'
          }
        ]
      }
    }
  },
  methods: {
    handleSubmit(form, done) {
      console.log('Form data:', form)
      // Call API, then done() to re-enable button
      done()
    },
    handleReset() {
      console.log('Form reset')
    }
  }
}
</script>

Feature Reference

Feature	File
Dynamic form	`examples/features/dynamic-form.md`
Form layout	`examples/features/form-layout.md`
Validation rules	`examples/features/form-rules.md`
Form groups	`examples/features/form-group.md`
Tabbed forms	`examples/features/form-tabs.md`
Custom components	`examples/features/custom-components.md`

API Reference

```
api/form-api.md
```
- Component props, events, and slots
```
api/columns-api.md
```
- Column types and properties
```
api/options-api.md
```
- Form option configuration

Best Practices

Use column types - Set
```
type: 'select'
```
,
```
type: 'date'
```
,
```
type: 'upload'
```
for automatic controls
Call done() after submit - Always call
```
done()
```
in the submit handler to re-enable the button
Use span for layout - Set
```
span: 12
```
for half-width fields (24 = full width grid)
Group related fields - Use
```
group
```
option to organize complex forms into sections
Validate on blur - Set
```
trigger: 'blur'
```
for a less intrusive validation experience

Resources

Official Docs: https://avuejs.com/form/form-doc.html

Keywords

Avue Form, avue-form, Vue form, dynamic form, 表单组件, 表单验证, form validation, form configuration, form columns, form rules