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...

Security Scan

The skill's files and runtime instructions are consistent with its stated purpose (generating Arco/Vue admin UI prototypes); it does not request credentials or unrelated system access, but it will create/update local project files and asks the agent to run package installation commands which fetch code from the network.

Purpose & Capability

Name/description (generate Vue 3 admin prototypes using Arco Design) match the provided artifacts: many component docs, page templates, and a scaffold manifest. There are no unrelated env vars, binaries, or unexpected permissions requested.

Instruction Scope

SKILL.md confines actions to reading the bundled knowledge files and creating/updating files under webui/admin-ui. It explicitly instructs how to scaffold, where to place generated files, and to add TODO placeholders for real APIs. This is expected for a code-generation/prototyping skill, but it does direct the agent to modify the workspace (append/update docs and create project files) and to run pnpm commands if initialization/validation is needed.

Install Mechanism

There is no formal install spec in the registry (instruction-only), which is lower risk. However, the runtime instructions tell the agent to run `pnpm install` (and optionally `pnpm dev`) in the generated project. That will fetch packages from the public registry (network access and supply-chain risk). This behavior is coherent with the purpose but worth noting to users.

Credentials

The skill requires no environment variables, credentials, or config paths. It also instructs 'Never store secrets.' There is no disproportionate request for sensitive data.

Persistence & Privilege

Registry flags: always:false and normal model invocation. The skill will create/update files under its own intended path (webui/admin-ui) and the bundled knowledge docs; it does not request system-wide persistence or attempt to modify other skills' configuration.

Assessment

This skill appears coherent for generating Arco/Vue admin prototypes, but before installing or allowing the agent to run it consider: 1) The skill will create and modify files under webui/admin-ui and may append to the bundled docs—review generated files before running them. 2) It asks the agent to run `pnpm install`/`pnpm dev` which will download packages from npm (network activity and supply-chain risk). Prefer to run package installs manually in a sandboxed environment. 3) The skill does not request credentials or read unrelated system files, which is good. 4) If you want to avoid network installs or automatic execution, deny/confirm any runtime commands and ask the agent to only output scaffolding files for you to review and run locally.

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 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

1. Use <script setup lang="ts">.
2. Include runnable mock data with at least 5 records when the page type needs a dataset.
3. Wrap mock loading in mockFetch with a 300 ms timeout for list-like data flows.
4. Add // TODO: 替换为真实 API 调用 at each mock or placeholder API call.
5. Use Arco Design Vue components for interaction controls.
6. Use CSS variables such as var(--color-*) instead of hard-coded colors.
7. Use scoped LESS styles.
8. Use snake_case in DTO fields to stay aligned with backend APIs, and camelCase for frontend variables.
9. Keep UI copy in Chinese unless the user asks for another language.
10. Default the page file to src/views/{kebab-case-module}/index.vue.

Final response

• List the generated files.
• Mention whether the scaffold was created or reused.
• Include the route registration snippet.
• Call out the remaining // TODO placeholders.
• Start pnpm dev and share the local URL only when the user asks for a preview or when local validation is required.