Official Verified

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 needs to answer how a component is used in this admin UI, draft a list/form/detail/dashboard/empty-state page, or bootstrap/update a minimal `webui/admin-ui` preview project.

skill-install — Terminal

Install via CLI (Recommended)

clawhub install openclaw/skills/skills/arisefx/admin-ui-prototype

Download Source Code (.zip)

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

Read knowledge/components/README.md.
Open the matching component docs under knowledge/components/.
Open knowledge/ui-conventions.md if layout or page-level context matters.
Answer with project conventions and concrete patterns from the bundled docs, not generic framework advice.
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

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
If missing details would materially change the layout or data model, ask a short clarifying question. Otherwise make reasonable assumptions.
Read knowledge/ui-conventions.md.
Read knowledge/page-templates.md.
Read only the component docs required for the page type:

Page type	Required docs
List	`table.md`, `form.md`, `button.md`, `modal.md`, `tag.md`, `space.md`, `grid.md`
Form	`form.md`, `input.md`, `select.md`, `date-picker.md`, `checkbox.md`, `radio.md`, `divider.md`
Detail	`descriptions.md`, `card.md`, `tag.md`, `button.md`
Dashboard	`statistic.md`, `card.md`, `grid.md`
Modal form	`modal.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

Read Full Documentation on GitHub

Metadata

Author@arisefx

Stars4473

Updated2026-05-01

View Author Profile

AI Skill Finder

Not sure this is the right skill?

Describe what you want to build — we'll match you to the best skill from 16,000+ options.

Find the right skill

Add to Configuration

Paste this into your clawhub.json to enable this plugin.

{
  "plugins": {
    "official-arisefx-admin-ui-prototype": {
      "enabled": true,
      "auto_update": true
    }
  }
}

Safety NoteClawKit audits metadata but not runtime behavior. Use with caution.

Related Skills

flight-requirement-review

机票产品需求评审 Agent。对前端、后端、运营类机票需求文档进行结构化评审打分，含独立的流程图治理评审（去If化、卫语句、决策表、FSM、泳道图、分层建模）。输入需求文档（markdown/图片/HTML），输出分项评分、评语和改进建议。使用场景：用户说"评审需求"、"审需求文档"、"给需求打分"、"需求评审"、"评审流程图"、"检查流程图"、"流程图打分"时触发。

arisefx 4473

flight-search

Search one-way flight lists from the Variflight ticket API by departure IATA city code, arrival IATA city code, and departure date.

arisefx 4473

variflight-global-flight-fares

Variflight Global Flight Fares searches one-way flight fares from the Variflight ticket API by departure IATA city code, arrival IATA city code, and departure date.

arisefx 4473