全部技能 分类浏览
← 返回
未分类 中文

Admin UI Prototype

Query project-specific Arco Design usage patterns and generate Vue 3 admin page prototypes with mock data, scaffold files, and route snippets. Use when Codex...
在Codex环境下查询项目特定的Arco Design使用模式，生成Vue 3管理页面原型，包含模拟数据、脚手架文件和路由片段。
arisefx
未分类 clawhub v1.0.0 1 版本 100000 Key: 无需
★ 1
Stars
📥 437
下载
💾 0
安装
1
版本
#latest

概述

Admin UI Prototype

Use this skill for two tasks:

  • Look up how Arco Design components are used in this admin UI.
  • Generate a runnable Vue 3 admin page prototype with realistic mock data.

Load only what is needed

  • Read knowledge/components/README.md first to locate component docs.
  • Read only the component docs needed for the request.
  • Read knowledge/ui-conventions.md for page structure, naming, and styling rules.
  • Read knowledge/page-templates.md for ready-made page and route templates.
  • Read knowledge/scaffold.md only when webui/admin-ui needs to be initialized.

Answer component-usage questions

  1. Read knowledge/components/README.md.
  2. Open the matching component docs under knowledge/components/.
  3. Open knowledge/ui-conventions.md if layout or page-level context matters.
  4. Answer with project conventions and concrete patterns from the bundled docs, not generic framework advice.
  5. If a new pattern is discovered from real project code, append it to the relevant component doc and update the component index when a new component is added. Never store secrets.

Generate a page prototype

  1. Parse the request into:
    • page type
    • business entity
    • fields to show or edit
    • filters and table actions
    • special interactions such as batch actions, tabs, charts, or nested forms
  2. If missing details would materially change the layout or data model, ask a short clarifying question. Otherwise make reasonable assumptions.
  3. Read knowledge/ui-conventions.md.
  4. Read knowledge/page-templates.md.
  5. Read only the component docs required for the page type:
Page typeRequired docs
------
Listtable.md, form.md, button.md, modal.md, tag.md, space.md, grid.md
Formform.md, input.md, select.md, date-picker.md, checkbox.md, radio.md, divider.md
Detaildescriptions.md, card.md, tag.md, button.md
Dashboardstatistic.md, card.md, grid.md
Modal formmodal.md, form.md, input.md, select.md, spin.md, feedback-api.md

Initialize or update the preview project

  • If webui/admin-ui/package.json does not exist:
  • follow knowledge/scaffold.md
  • create the scaffold files under webui/admin-ui
  • replace {{pageTitle}}, {{viewImportPath}}, and {{ViewComponent}}
  • run pnpm install in webui/admin-ui
  • If the preview project already exists:
  • update webui/admin-ui/src/App.vue
  • update webui/admin-ui/index.html

Output requirements

  • Create the main page at webui/admin-ui/src/views/{kebab-case-module}/index.vue.
  • Create child components under webui/admin-ui/src/views/{kebab-case-module}/components/ when the page benefits from splitting dialogs or sections.
  • Provide the route snippet from knowledge/page-templates.md.
  • Keep the output runnable with mock data unless the user explicitly asks for API wiring only.

Generation rules

  1. Use

    Skill工具集 © 2026