Agent Skills › victorgarciaesgi/regle › regle

regle

GitHub

Vue 3 表单验证技能，提供类型安全的模型驱动验证。涵盖 useRegle 配置、r$ 响应式对象使用、错误展示及修饰符。适用于 Vue 3 项目中表单的创建、编辑、绑定与校验逻辑实现。

skills/regle/SKILL.md victorgarciaesgi/regle

Trigger Scenarios

需要为 Vue 3 组件添加表单验证功能使用 Regle 库进行表单状态管理和错误处理在 Vue 3 项目中集成前端表单校验规则

Install

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

More Options

Use without installing

npx skills use victorgarciaesgi/regle@regle

指定 Agent (Claude Code)

npx skills add victorgarciaesgi/regle --skill regle -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",
    "license": "MIT",
    "metadata": {
        "author": "Victor Garcia",
        "source": "https:\/\/reglejs.dev",
        "version": "1.27.0"
    },
    "description": "Core Regle form validation in Vue 3 — setup with `useRegle`, the reactive `r$` object, validation properties, displaying errors, and modifiers. Use when adding or editing Regle forms, binding `v-model` to `r$.$value`, or reading `$error`\/`$errors`\/`$invalid`\/`$validate`\/`$reset`. For validation rules see regle-rules; for advanced patterns see regle-advanced.",
    "compatibility": "Requires Vue 3.3+ and TypeScript 5.1+. Works with any agent supporting the Agent Skills spec."
}

Regle

Regle is a type-safe, model-based, headless form validation library for Vue 3. It provides full TypeScript inference, reactive validation, and works with any UI framework or design system.

MCP Server

Regle provides an MCP server that can be used to get documentation and autocomplete for Regle. If it's available, use it to get up-to-date information on the API.

{
  "mcpServers": {
    "regle": {
      "command": "npx",
      "args": ["@regle/mcp-server"]
    }
  }
}

## Installation

```sh
# Core + built-in rules
pnpm add @regle/core @regle/rules

# Optional: schema support (Zod, Valibot, ArkType)
pnpm add @regle/schemas

Requires Vue 3.3+ and TypeScript 5.1+.

Quick Start

import { useRegle } from '@regle/core';
import { required, email, minLength } from '@regle/rules';

const { r$ } = useRegle(
  { name: '', email: '' },
  {
    name: { required, minLength: minLength(3) },
    email: { required, email },
  }
);

<template>
  <input v-model="r$.$value.name" placeholder="Name" />
  <ul v-if="r$.$errors.name.length">
    <li v-for="error of r$.$errors.name" :key="error">{{ error }}</li>
  </ul>

  <button @click="r$.$validate()">Submit</button>
</template>

Key Concepts

State: first argument -- raw object, reactive, ref, or single value
Rules: second argument -- mirrors the data structure, each field gets a rules object
r$: returned reactive object with values, errors, dirty state, and validation methods
All rules are optional by default; add required to enforce a field

Core

Topic	Description	Reference
useRegle	State definition, rules declaration, dynamic rules, `r$` object	core-use-regle
Validation Properties	`$invalid`, `$dirty`, `$error`, `$errors`, `$pending`, `$validate`, `$touch`, `$reset`	core-validation-properties
Displaying Errors	Showing errors, custom messages, `getErrors`, `flatErrors`	core-displaying-errors
Modifiers	`autoDirty`, `lazy`, `silent`, `rewardEarly`, `disabled`, `validationGroups`, per-field modifiers	core-modifiers

Related skills

regle-rules — built-in rules, custom rules (createRule), rule wrappers (withMessage, withParams, withAsync), and rule operators (and, or, applyIf, assignIf).
regle-advanced — collections, async, server errors, reset, scoped validation, variants, global config.
regle-schemas — Zod, Valibot, ArkType, and Standard Schema integration.
regle-typescript — type-safe output, typing rules schemas and component props.