skills.rest
certd
certdOFFICIAL
Explore all skills by this author →
WebsiteGitHub

fast-crud-page-dev

Implements Certd admin CRUD list pages using Fast Crud with Vue 3 and Ant Design Vue.

5.0k|586|Updated Dec 13, 2020
Search Tags:#crud#Frontend#vue 3#Table#ant design vue#admin page#fast-crud
One-click install
npx skills add https://github.com/certd/certd --skill fast-crud-page-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fast-crud-page-dev
Source: https://github.com/certd/certd/tree/main/.trae/skills/fast-crud-page-dev
Command: npx skills add https://github.com/certd/certd --skill fast-crud-page-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @fast-crud/fast-crud, dayjs.

What problem does it solve?

Building consistent admin list, record query, and CRUD table pages in the Certd frontend requires repeated decisions about table configuration, search forms, pagination, action columns, and dialogs. This Skill standardizes that work by enforcing Fast Crud patterns so pages stay uniform and maintainable.

Core Features & Use Cases

  • Standardized page structure: Splits pages into api.ts, crud.tsx, and index.vue, using useFs and createCrudOptions for table, search, form, and toolbar configuration.
  • Built-in CRUD and export: Configures addRequest, editRequest, and delRequest for automatic row actions, plus toolbar export with dataFormatter and columnFilter for Excel-readable output.
  • Dynamic behavior and layout rules: Uses compute for row-dependent button visibility and defines flex height chains so embedded tables render correctly in tabs, dialogs, and split layouts.
  • Use Case: When asked to build an audit record page with search filters, edit dialogs, and CSV export, the Skill produces a Fast Crud implementation matching existing Certd views instead of a hand-written a-table.

Quick Start

Create a new Certd admin list page with search, pagination, edit dialog, and delete confirmation using Fast Crud following the existing views under packages/ui/certd-client/src/views.

Frequently Asked Questions about fast-crud-page-dev

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

FAQPage Schema
How do I build a CRUD table page with Fast Crud in Vue 3?▼

Define createCrudOptions in a crud.tsx file with request, columns, search, form, and rowHandle config, then bind it in index.vue using useFs and fs-crud. Configure addRequest, editRequest, and delRequest so Fast Crud renders edit and delete buttons automatically.

When should I use Fast Crud instead of a hand-written a-table?▼

Use Fast Crud for list management, record query, audit, and standard CRUD table pages. Hand-write a-table only for lightweight read-only displays, highly custom interactions, or complex visualizations, and explain the reason for the exception.

How do I export Fast Crud table data to Excel?▼

Enable the toolbar export button and set dataFrom to search so exports respect current filters. Use columnFilter to include hidden columns and dataFormatter to convert timestamps, enums, arrays, and nested fields into plain text or numbers.

Why does my Fast Crud table have no height inside tabs or dialogs?▼

Fast Crud computes height from its outer container, so embedded tables need a complete flex chain. Set parent containers to display flex with column direction and min-height 0, give content areas flex 1, and keep fixed toolbars at flex none.

How do I show or hide row action buttons based on row data in Fast Crud?▼

Wrap the show or disabled property in the compute function imported from @fast-crud/fast-crud. Passing a plain function directly does not work; compute provides the row context and reactive evaluation needed for per-row button states.

Related Skills

Explore More Software Engineering Skills→
BoykoPetevBoevBoykoPetevBoev

django-rest-api-views

Create Django REST Framework ViewSets with permissions and pagination.

Community
Advanced
gui81gui81
3

new-page

Scaffold a Scorekeeper page with a Vue 3 render-function module and router entry.

Community
Intermediate
vecearvecear

state-ux-flow-builder

Standardize loading, error, empty, and success states for data-fetching views.

Community
Advanced
lazzyfulazzyfu
729

ant-design-vue-ui

Generate and refactor Vue 3 admin interfaces with Ant Design Vue 4.x.

Community
Advanced