vue

Convert JSON UI specifications into Vue 3 component trees with data binding and event actions.

Updated Apr 9, 2026
One-click install
npx skills add https://github.com/Tomasxwav/retailers-frontend --skill vue-tomasxwav
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue
Source: https://github.com/Tomasxwav/retailers-frontend/tree/main/.agents/skills/vue
Command: npx skills add https://github.com/Tomasxwav/retailers-frontend --skill vue-tomasxwav

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Render complex UI definitions expressed as JSON into interactive Vue 3 component trees so designers, generative models, or backend services can describe interfaces declaratively rather than writing component code.

Core Features & Use Cases

  • Schema-driven rendering: Convert JSON element trees into Vue components with a typed schema and zod validation.
  • State and action integration: Wire StateProvider, ActionProvider, VisibilityProvider, and ValidationProvider to enable two-way binding, conditional rendering, and built-in actions.
  • Registry and extensibility: Define component registries using render functions and reuse BaseComponentProps for catalog-agnostic components.
  • Use Case: Render AI-generated UI specs into a working Vue interface, bind form fields to a central state store, and handle user events via ActionProvider.

Quick Start

Provide a component registry and render the JSON spec with Renderer inside StateProvider and ActionProvider to see the UI.

Frequently Asked Questions about vue

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render JSON UI specifications into Vue 3 components?▼

You can render JSON UI specifications into Vue 3 components by using this Skill to convert JSON element trees into interactive component hierarchies with data binding, visibility rules, and event actions, integrating with @json-render/core and zod schemas.

How does schema-driven rendering work with zod validation in Vue?▼

Schema-driven rendering with zod validation converts typed JSON element trees into Vue components, ensuring AI-generated or programmatic JSON specs match the expected schema before transforming them into interactive component hierarchies.

Do I need Vue 3.5 to use JSON schema rendering with StateProvider and ActionProvider?▼

Yes, Vue 3.5 or later is required to use this JSON schema rendering approach, as it wires StateProvider, ActionProvider, VisibilityProvider, and ValidationProvider for two-way binding, conditional rendering, and built-in actions within your application.

Can I bind form fields to a central state store when rendering JSON specs in Vue?▼

Yes, you can bind form fields to a central state store when rendering JSON specs in Vue by wiring StateProvider and ActionProvider, which enables two-way data binding and handles user events for your interactive component hierarchies.

How do I define a component registry for JSON rendering in Vue 3?▼

Define a component registry for JSON rendering in Vue 3 by using render functions and reusing BaseComponentProps for catalog-agnostic components, allowing the renderer to map JSON spec elements to their corresponding interactive Vue components.

What are the limitations of rendering AI-generated UI specs as JSON in Vue?▼

Limitations of rendering AI-generated UI specs as JSON in Vue include strict dependencies on Vue 3.5, @json-render/core, and zod schemas, along with the requirement to manually define a component registry to map JSON elements to Vue components.