skills.rest
mfish-qf
mfish-qfCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-crud

Generate Vue 3 + TypeScript CRUD scaffolds with a six-file structure.

741|135|Updated Oct 24, 2021
Search Tags:#typescript#frontend#scaffolding#crud#vue3#generate#code-generation
One-click install
npx skills add https://github.com/mfish-qf/mfish-nocode --skill frontend-crud
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-crud
Source: https://github.com/mfish-qf/mfish-nocode/tree/main/.qoder/skills/frontend-crud
Command: npx skills add https://github.com/mfish-qf/mfish-nocode --skill frontend-crud

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The frontend development for CRUD interfaces is repetitive and error-prone; this skill automates creation of standardized Vue3 + TypeScript CRUD pages to save time and ensure consistency.

Core Features & Use Cases

  • Generates a complete CRUD scaffold including Model, API, data configurations, index.vue, and two modal components for create/edit and details view.
  • Provides a consistent project structure to accelerate onboarding and collaboration across frontend teams.
  • Use cases include rapid admin panel creation, feature scaffolding for new entities, and repeatable UI generation with minimal hand-coding.

Quick Start

Provide the module name, class name, Chinese name, and field definitions to auto-generate Vue 3 + TS CRUD pages.

Frequently Asked Questions about frontend-crud

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

FAQPage Schema
How do I auto-generate Vue3 TypeScript CRUD pages from a data model?▼

To auto-generate Vue3 TypeScript CRUD pages, provide the module name, class name, Chinese name, and field definitions. The Skill outputs a consistent six-file scaffold including Model, API, data configurations, index.vue, and two modal components for create/edit and detail views.

What is the best way to scaffold a consistent admin panel frontend with Vue3?▼

Scaffolding a consistent admin panel frontend with Vue3 is done by automating CRUD page creation. This Skill generates a standardized project structure including Model, API, data, index.vue, and modal components to accelerate onboarding and ensure UI consistency across new entities.

What files are included in a Vue3 TypeScript CRUD scaffold?▼

A Vue3 TypeScript CRUD scaffold includes a standardized six-file structure: a Model file for TypeScript interfaces, an API file for backend calls, a data configuration file, an index.vue main page, a Modal component for create/edit, and a ViewModal component for detail views.

Can I use this code generation tool for projects outside of mfish-nocode?▼

This code generation tool is specifically designed to generate standardized Vue 3 + TypeScript CRUD frontends for mfish-nocode projects. It applies a tailored six-file scaffold structure, meaning it may not be directly suitable for other project architectures without modification.

Do I need to manually code API and modal components when scaffolding CRUD interfaces?▼

You do not need to manually code API and modal components when scaffolding CRUD interfaces. By providing the module name and field definitions, the Skill automatically generates the API file, create/edit Modal, and ViewModal components alongside the index.vue page.

Related Skills

Explore More Software Engineering Skills→
mfish-qfmfish-qf
741

crud-generator

Generate six-layer CRUD scaffolding with MyBatis-Plus and Swagger annotations.

Community
Advanced
notquenotque
415

perses-plugin-pipeline

Orchestrate Perses plugin development from scaffold to deploy with percli.

Community
Advanced
okgoogle13okgoogle13
1

frontend-backend-mapper

Map frontend TypeScript API calls to Python backend endpoints and generate integration reports.

Community
Intermediate
mfish-qfmfish-qf
203

add-screen-component

Create and register custom Vue components in Mfish Nocode自助大屏.

Community
Intermediate