volverjs

Translate Zod's validation error messages into the active vue-i18n locale in Vue 3 apps, using the @volverjs/zod-vue-i18n error map. Use this skill whenever the user wants Zod validation errors (min/max/email/required/refine, etc.) rendered through vue-i18n — for example errors stuck in English despite a locale switch, multilingual form validation backed by Zod, or any mention of @volverjs/zod-vue-i18n, makeZodI18nMap, makeZodI18nLabel or zDate. It covers choosing the Zod 3 vs Zod 4 entry point, loading the bundled locale JSON, overriding or adding error keys, attaching a custom key to a validation (including without refine), per-field WithPath labels, and pluralized messages. Do not use it for translating general UI, label or placeholder copy with vue-i18n (no Zod involved), for Zod used outside Vue (Node, React, react-hook-form), for vue-i18n $d/$n date and number formatting, or for other validators such as valibot or yup.

Build Vue 3 forms with the @volverjs/form-vue library, which turns a Zod object schema into validated forms rendered with @volverjs/ui-vue components. Use this skill whenever the user works with @volverjs/form-vue or mentions createForm, useForm, VvForm, VvFormField, VvFormFieldsGroup, VvFormWrapper, VvFormTemplate, defaultObjectBySchema, or a "form template schema" with vvName/vvType/vvIf — and also whenever they ask to build, validate, or scaffold a Vue 3 form from a Zod schema (login, signup, settings, nested address, conditional fields, field groups, programmatic submit/reset), even if they don't name the library explicitly. Covers the plugin vs composable setup, the five components and their props/events/slot scopes, schema-driven templates, Zod 3 and Zod 4 support, default-object generation, and validation patterns (continuous validation, superRefine, readonly, scopes).

Use @volverjs/style design system library for CSS/SCSS styling. Covers component markup (BEM classes like vv-button, vv-card, vv-input-text), utility classes (spacing, layout, flexbox, grid, typography), design tokens (colors, spacing, breakpoints), SCSS customization, theming, and CSS custom properties. USE FOR: styling with @volverjs/style, writing HTML with vv-* component classes, using volver utility classes (m-*, p-*, flex-*, grid-*, text-*), customizing design tokens, creating themes, extending components, SCSS configuration with context, responsive design with breakpoints, dark mode, vv-button/vv-card/vv-input-text/vv-alert/vv-dialog markup, CSS custom properties, zero-specificity overrides. DO NOT USE FOR: building @volverjs/ui-vue component logic (use Vue skills), general CSS without @volverjs/style, Tailwind CSS (similar concepts but different implementation).

Build Vue 3 UIs with @volverjs/ui-vue. Covers components, props, slots, composables, plugin setup, BEM modifiers, group patterns, JSON Render, and auto-import. Use when users ask for forms, pages, layouts, dialogs, dropdowns, alerts, navigation, icons, or any Vv-prefixed component (for example VvButton, VvInputText, VvSelect, VvDialog, VvCombobox, VvCard, VvTooltip, VvVirtualScroll). Trigger on @volverjs/ui-vue mentions, Volver components, plugin/defaults configuration, group components, options mapping, and JSON-rendered UI generation.

Integrate OAuth2 / OpenID Connect authentication into a Vue 3 app with @volverjs/auth-vue. Use when adding login/logout, the authorization-code + PKCE flow, token refresh, an access token for API calls, route guards, or reactive auth state (loggedIn/accessToken) to a Vue 3 application.

Build Vue 3 data-fetching and mutation logic with the @volverjs/query-vue library (a Pinia store built on the repository pattern with caching, a normalized item cache, and query tracking). Use this skill whenever the user works with @volverjs/query-vue or mentions defineStoreRepository, a "store repository", or the read()/submit()/remove() composable actions, or the ReadProvider/SubmitProvider/RemoveProvider components — and also when they ask to fetch/create/update/delete data in Vue through a @volverjs/data Repository or RepositoryHttp wired into Pinia, even if they don't name the library explicitly. Covers store scaffolding, the three actions and their options (autoExecute, group, directory, executeWhen, persistence, keepAlive…), the provider components, and caching/error-handling best practices.

Write code that consumes REST APIs with @volverjs/data — the repository-pattern data layer built on a tiny fetch/ky HttpClient. Use this skill whenever the user is building HTTP/API access in a project that depends on @volverjs/data, or mentions HttpClient, RepositoryHttp, UrlBuilder, Hash, or the Vue composables useHttpClient / useRepositoryHttp / createHttpClient. Trigger it for tasks like "fetch users from the API", "create a repository for this resource", "build a URL with query params", "do CRUD against my REST endpoint", "set the bearer token", or "make this request reactive in my Vue component" — even when the library is not named explicitly but the project already uses it.