regle-schemas
victorgarciaesgi/regle · skills.sh
Open source Repository Open in the app JSON README (API)
About
Skill publicada por victorgarciaesgi/regle no skills.sh. Instale com: npx skills add victorgarciaesgi/regle@regle-schemas
Details
- Kind
- Agent skills
- Publisher
- victorgarciaesgi
- Origin
- skillssh
- Category
- ferramentas
- Stars
- 506
- Forks
- 22
- Open pull requests
- 6
- Last push
- 2026-09-28T16:51:05Z
- Repository state
- ativo
- Language
- TypeScript
- License
- MIT
- Added
- 2026-10-07 05:41:19
- Updated
- 2026-10-07 05:41:19
- Origin id
victorgarciaesgi/regle/regle-schemas
README
[npm-version-src]: https://img.shields.io/npm/v/@regle/core.svg
[npm-version-href]: https://www.npmjs.com/package/@regle/core
[npm-downloads-src]: https://img.shields.io/npm/dm/@regle/core.svg
[npm-total-downloads-src]: https://img.shields.io/npm/dt/@regle/core.svg
[npm-downloads-href]: https://www.npmjs.com/package/@regle/core
<p align="center">
<img src="https://raw.githubusercontent.com/victorgarciaesgi/regle/master/.github/images/regle-github-banner.png"
alt="regle cover" />
</p>
<p align='center'>
<a href="https://www.npmjs.com/package/@regle/core"><img alt="npm version" src="https://img.shields.io/npm/v/@regle/core.svg"/></a>
<a href="https://codecov.io/github/victorgarciaesgi/regle"><img src="https://codecov.io/github/victorgarciaesgi/regle/graph/badge.svg?token=T5UV4714PB"/></a>
<a href="https://www.npmjs.com/package/@regle/core"><img alt="npm download" src="https://img.shields.io/npm/dm/@regle/core.svg"/></a>
<a href="https://www.npmjs.com/package/@regle/core"><img alt="npm download" src="https://img.shields.io/npm/dt/@regle/core.svg"/></a>
</p>
<p align='center'>
<a href="https://www.buymeacoffee.com/victorgarco" target="_blank"><img height="40" width="150" src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 40px !important;width: 150px !important;" ></a>
</p>
# Regle
Regle \ʁɛɡl\ (French word for 'rule' ) is a headless model-based form validation library for Vue 3.
It's heavily inspired by Vuelidate and aims to replace it in modern apps.
## 📚 Documentation
[](https://reglejs.dev/)
## 🎮 Play with it
| Playground | Simple demo | Advanced Demo |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <a target='_blank' href="https://play.reglejs.dev"><img width="180" src="https://raw.githubusercontent.com/victorgarciaesgi/regle/refs/heads/main/.github/images/regle-playground-button.svg" /></a> | [](https://stackblitz.com/~/github.com/victorgarciaesgi/regle-examples/tree/main/examples/simple-example?file=examples/simple-example/src/App.vue&configPath=examples/simple-example) | [](https://stackblitz.com/~/github.com/victorgarciaesgi/regle-examples/tree/main/examples/advanced-example?file=examples/advanced-example/src/App.vue&configPath=examples/advanced-example) |
## 🤖 AI Integration
### MCP Server
<a href="https://cursor.com/en-US/install-mcp?name=regle&config=eyJjb21tYW5kIjoibnB4IEByZWdsZS9tY3Atc2VydmVyIn0%3D" alt="Install MCP Server">
<picture>
<source media="(prefers-color-scheme: light)" srcset="https://cursor.com/deeplink/mcp-install-dark.svg">
<img alt="fallback alt='Install MCP Server" src="https://cursor.com/deeplink/mcp-install-light.svg">
</picture>
</a>
Or add it manually to your `.cursor/mcp.json` or `.mcp.json`
```json
{
"mcpServers": {
"regle": {
"command": "npx",
"args": ["@regle/mcp-server"]
}
}
}
```
### Agent Skills
Install [Agent Skills](https://skills.sh/) to give your AI coding agent Regle expertise:
```bash
npx skills add victorgarciaesgi/regle
```
## ✨ Features
- 🔌 **Headless**: Plug any UI or markup to the validation.
- 🎯 **Type safe**: Full inference and autocompletion support.
- 🌳 **Model based**: Your validation tree structure matches the data model.
- 🔍 **Devtools**: Built-in Vue devtools extention for easy debugging and testing.
- 🤖 **MCP Server**: MCP server for easy documentation and autocomplete.
- 🧠 **Agent Skills**: [Agent Skills](https://skills.sh/) for AI coding agents.
- 🎨 **Style Agnostic**: Works with any CSS framework or plain CSS.
- 📦 **Modular design**: Expand Regle properties or default validation rules.
- 🔄 **Async validation**: Handle asynchronous validations and pending states with ease.
- 🌐 **i18n Ready**: Works with any i18n library.
- 📕 **Vuelidate like API**: Regle's API mimics Vuelidate's API while improving it on a lot of areas.
- ⚡️ **SSR Ready**: Full support for Server Side Rendering environments. <img src="https://raw.githubusercontent.com/victorgarciaesgi/regle/master/.github/images/icons/nuxt.svg" alt='nuxt'/>
- ✅ **Alternative validation**: [Standard Schema](https://standardschema.dev/) spec validation support.
- 🦸♂️ [Zod](https://zod.dev/)
- 🤖 [Valibot](https://valibot.dev/)
- 🚢 [ArkType](https://arktype.io)
## 🔍 Devtools
Regle comes with a built-in Vue devtools extension for easy debugging and testing.
> 📝 For more details, see the [Devtools documentation](https://reglejs.dev/introduction/devtools).
## Basic example
```vue
<template>
<input v-model="r$.$value.email" :class="{ error: r$.email.$error }" placeholder="Type your email" />
<ul>
<li v-for="error of r$.email.$errors" :key="error">
{{ error }}
</li>
</ul>
</template>
<script setup lang="ts">
import { useRegle } from '@regle/core';
import { required, minLength, email } from '@regle/rules';
const { r$ } = useRegle(
{ email: '' },
{
email: { required, minLength: minLength(4), email },
}
);
</script>
```
## Compatibility:
- <img src="https://raw.githubusercontent.com/victorgarciaesgi/regle/master/.github/images/icons/vue.svg" alt='vue'/> Vue 3.3+
- <img src="https://raw.githubusercontent.com/victorgarciaesgi/regle/master/.github/images/icons/nuxt.svg" alt='nuxt'/> Nuxt 3.1+
- <img src="https://raw.githubusercontent.com/victorgarciaesgi/regle/master/.github/images/icons/pinia.svg" alt='pinia'/> Pinia 2.2.5+
- Standard Schemas
- 🦸♂️ Zod 3.24+
- 🤖 Valibot 1.0+
- 🚢 Arktype 2.0.0+
## ⬇️ Quick install
```bash
pnpm install @regle/core @regle/rules
# or
yarn add @regle/core @regle/rules
# or
npm install @regle/core @regle/rules
```
## 🫶 Credits
- [Johannes Lacourly](https://www.behance.net/johanneslaf7dc) for designing logo and banners 🪄
- [Martins Zeltins](https://github.com/martinszeltins) who helped me identify a lot of bugs, find new features and contributed to docs.
- [Vuelidate](https://vuelidate-next.netlify.app) Which I loved and used for 8 years, and is my main inspiration for creating Regle
## 📑 License
[MIT License](https://github.com/victorgarciaesgi/regle/blob/HEAD/LICENSE)