frontend-crud

Name: frontend-crud
Availability: InStock
Author: mfish

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

Ready to run

npx skills add https://github.com/mfish-qf/mfish-nocode --skill frontend-crud

💬 Prompt for ChatGPT / Claude Chat▼

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.