Agent Skills › victorgarciaesgi/regle › regle-migrate-vuelidate

regle-migrate-vuelidate

GitHub

将 Vue 表单从 Vuelidate 迁移至 Regle，涵盖导入、状态、规则及绑定转换。

skills/regle-migrate-vuelidate/SKILL.md victorgarciaesgi/regle

触发场景

需要将 Vuelidate 验证逻辑重构为 Regle 处理 @vuelidate/core 到 useRegle 的迁移

安装

npx skills add victorgarciaesgi/regle --skill regle-migrate-vuelidate -g -y

更多选项

不安装直接使用

npx skills use victorgarciaesgi/regle@regle-migrate-vuelidate

指定 Agent (Claude Code)

npx skills add victorgarciaesgi/regle --skill regle-migrate-vuelidate -a claude-code -g -y

安装 repo 全部 skill

npx skills add victorgarciaesgi/regle --all -g -y

预览 repo 内 skill

npx skills add victorgarciaesgi/regle --list

SKILL.md

Frontmatter

{
    "name": "regle-migrate-vuelidate",
    "license": "MIT",
    "metadata": {
        "author": "Victor Garcia",
        "source": "https:\/\/reglejs.dev\/introduction\/migrate-from-vuelidate",
        "version": "1.27.0"
    },
    "description": "Migrate Vuelidate form validation to Regle. Use when porting forms that import from `@vuelidate\/core`\/`@vuelidate\/validators` or call `useVuelidate` over to `useRegle`\/`useScopedRegle`, including rules, validation properties, `v-model` bindings, nested\/scoped validation, and parent-child form propagation.",
    "compatibility": "Requires Vue 3.3+, TypeScript 5.1+, `@regle\/core`, and `@regle\/rules`. Works with any agent supporting the Agent Skills spec."
}

Migrate Vuelidate to Regle

Convert form validations built with Vuelidate to Regle. Take every form, rule, and validation property into account.

Knowledge sources

Use these for API details, patterns, and TypeScript typing (in priority order):

Regle MCP server (if available): search for "Migrate from Vuelidate" and other topics. If it is not active, ask the user to enable it or enable it yourself.
Sibling Regle skills:
- regle — useRegle, validation properties ($error, $errors, $validate, $reset), modifiers, displaying errors.
- regle-rules — built-in rules, createRule, wrappers (withMessage), operators (requiredIf, applyIf, assignIf).
- regle-advanced — scoped validation (useScopedRegle, useCollectScope), collections, async rules, server errors, $self.
- regle-schemas — schema-based validation (Zod, Valibot, ArkType) when a form uses a schema.
- regle-typescript — inferRules, typing rules and props (RegleRoot, InferRegleRoot, SuperCompatibleRegleRoot).
Docs / LLM-friendly references: https://reglejs.dev/introduction/migrate-from-vuelidate, https://reglejs.dev/llms.txt (glossary), https://reglejs.dev/llms-full.txt (full docs).

Global rules

$autoDirty is true by default in Regle — do not set it, and remove manual $touch() calls.
Keep the variable name when renaming the composable result: a Vuelidate v$ (or any other name) becomes r$ with the same identifier.
Bind form values to the *.$value properties from Regle.
Do not use r$.$fields.xxx; access fields directly as r$.xxx.
Before writing a custom rule, check for an equivalent built-in rule first.
If a specific case is unclear, ask the user or leave it unchanged rather than guessing.

Workflow

Copy this checklist and track progress:

- [ ] 1. Identify the Vuelidate form
- [ ] 2. Replace the imports
- [ ] 3. Replace the state
- [ ] 4. Replace the validation rules
- [ ] 5. Replace the validation properties
- [ ] 6. Replace binding events
- [ ] 7. Replace nested-component validation (scoped)
- [ ] 8. Inspect form propagation (parent <-> child)
- [ ] 9. Self-review and run typecheck + lint

Follow the detailed step-by-step instructions in migration-steps.