nuxt-components

Name: nuxt-components
Availability: InStock
Author: ArtisanCloud

Generate Nuxt UI form components with UModal and valibot validation.

357|65|Updated Jul 29, 2022

Search Tags:#ui #plugin #form #modal #nuxt #umodal #ufield

Ready to run

npx skills add https://github.com/ArtisanCloud/PowerX --skill nuxt-components

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: nuxt-components
Source: https://github.com/ArtisanCloud/PowerX/tree/main/.codex/skills/frontend/nuxt/components
Command: npx skills add https://github.com/ArtisanCloud/PowerX --skill nuxt-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Many PowerX frontend plugins need consistent Nuxt UI form components, but developers often spend time manually wiring UModal, UFormField, and validation schemas, leading to duplicated effort and UI inconsistencies.

Core Features & Use Cases

Template Generation: Auto‑creates Vue component files for forms, selects, and modals based on a declarative YAML ruleset.
Nuxt UI Alignment: Enforces Nuxt UI 3.3.2 standards such as color palettes, portal handling, and component slots.
Validation Integration: Embeds valibot schema validation and standardized button layouts.
Use Case Example: A plugin that manages product records can instantly obtain a ready‑to‑use TemplateForm.vue with fields for name, description, and content, fully wrapped in a UModal dialog.

Quick Start

Use the nuxt-components skill to generate a Nuxt UI form with UModal for creating new products.

Frequently Asked Questions about nuxt-components

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

FAQPage Schema

How do I generate Nuxt UI form components with UModal support automatically?▼

Generate Nuxt UI form components with UModal support automatically by using a declarative YAML ruleset. This auto-creates Vue component files for forms, selects, and modals, wrapping fields like name and content directly inside a UModal dialog.

How do I add valibot schema validation to Nuxt UI form fields?▼

Add valibot schema validation to Nuxt UI form fields by generating components with built-in UFormField support. This embeds validation schemas and standardized button layouts directly into the Vue template files for consistent form CRUD interfaces.

Can I use this to build PowerX frontend plugin CRUD interfaces with Nuxt UI?▼

Yes, you can build PowerX frontend plugin CRUD interfaces with Nuxt UI. It automates template generation for forms, selects, and modals, ensuring compliance with design standards like color palettes and portal handling.

Does this enforce Nuxt UI 3.3.2 design standards for modals and form fields?▼

Yes, it enforces Nuxt UI 3.3.2 design standards for modals and form fields. Template generation ensures compliance with color palettes, portal handling, component slots, and valibot schema validation across all generated Vue components.

What is the best way to create consistent Vue modal dialogs for Nuxt applications?▼

Create consistent Vue modal dialogs for Nuxt applications by defining a declarative YAML ruleset. This approach auto-generates ready-to-use TemplateForm.vue files wrapped in UModal, eliminating manual wiring and duplicated effort.