avue-design

Generate Avue-based Vue page configurations for CRUD, forms, and trees.

Updated Apr 22, 2026
One-click install
npx skills add https://github.com/tiantien/team-ai-coding-plugin --skill avue-design-tiantien
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: avue-design
Source: https://github.com/tiantien/team-ai-coding-plugin/tree/main/skills/avue-design
Command: npx skills add https://github.com/tiantien/team-ai-coding-plugin --skill avue-design-tiantien

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill removes the friction of memorizing Avue APIs and manually assembling Vue page scaffolding, so teams can quickly build consistent CRUD, form, and tree-based interfaces from requirements.

Core Features & Use Cases

  • Avue CRUD generation: Create table pages with search, pagination, dialogs, permissions, sorting, filtering, export, and audit-friendly workflows.
  • Avue form generation: Build complex forms with validation, dictionaries, nested bindings, uploads, dynamic subforms, and field-level control.
  • Component coverage: Support Avue tree, data display widgets, and other utility components for dashboard and admin-style applications.
  • Use case: When a user asks for a BladeX or Avue admin module, this Skill can turn module names, fields, and behavior rules into ready-to-use Vue implementation guidance.

Quick Start

Generate an Avue Vue3 CRUD page for a user management module with Composition API, using name, status, and created time fields.

Frequently Asked Questions about avue-design

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

FAQPage Schema
How do I generate Avue CRUD pages with Vue3 Composition API?

Generate Avue CRUD pages with Vue3 Composition API by providing module names, fields, and behavior rules to produce table configurations with search, pagination, dialogs, and permissions. The Skill outputs ready-to-use Vue implementation guidance supporting both Composition and Options APIs.

Can I build complex Avue forms with validation and nested bindings?

Build complex Avue forms with validation, dictionaries, nested bindings, uploads, and dynamic subforms by specifying field-level control rules. The Skill translates these requirements into structured Vue page configurations for admin-style applications.

Does this Avue code generator support BladeX full-stack development?

Yes, this Avue code generator supports BladeX full-stack development by turning admin module names and behavior rules into Vue implementation guidance. It applies specifically to BladeX workflows including syncing, auditing, and Git commit tasks.

What is the best way to configure Avue dictionaries and search filters?

Configure Avue dictionaries and search filters by defining field names and desired behaviors within your prompt. The Skill automatically applies dictionary and search configuration logic to generate minimal-change Vue page scaffolding.

Are there limitations when generating Avue tree components for dashboards?

Avue tree component generation focuses on admin-style applications and data display widgets. While it supports tree configurations, complex dashboard logic outside Avue's standard utility components may require manual implementation adjustments.