菜单
Use when working on AUTO-MAS frontend UI, Ant Design Vue components, page layout, forms, tables, modals, drawers, feedback, empty/loading/error states, drag interactions, dark mode, or visual polish.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/AUTO-MAS-Project/AUTO-MAS --skill mas-frontend-ui命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
| name | mas-frontend-ui |
| description | Use when working on AUTO-MAS frontend UI, Ant Design Vue components, page layout, forms, tables, modals, drawers, feedback, empty/loading/error states, drag interactions, dark mode, or visual polish. |
Keep AUTO-MAS UI changes consistent with an Electron desktop business operations platform: dense enough for repeated work, quiet enough for long sessions, and aligned with Ant Design Vue 4.x.
This skill is self-contained for AUTO-MAS UI rules. Nearby existing pages are still the authority for module-specific layout, wording, and visual rhythm when they do not conflict with this skill.
Before editing UI:
@ant-design/icons-vue, not Element Plus, Naive UI, Arco, or Ant Design React.src/style.css and src/composables/useTheme.ts.| Need | Prefer |
|---|---|
| Layout | a-layout, a-menu, a-tabs, a-card, a-space, a-flex, a-row, a-col |
| Form input | a-form, a-form-item, a-input, a-input-number, a-select, a-switch, a-checkbox, a-radio, a-date-picker |
| Data display | a-table, a-tag, a-empty, a-statistic, a-typography |
| Feedback | a-modal, Modal.confirm, message, a-spin, a-progress, a-alert |
| Icons | @ant-design/icons-vue |
Use default component styles, official props, slots, layout components, and theme tokens first. Custom CSS is for local layout constraints or real readability needs.
When overriding Ant Design Vue internals:
:deep() under the current component root class..ant-* overrides unless the task is a deliberate project-wide token or global fix.!important; if unavoidable, document the reason.src/composables/useTheme.ts: it toggles the dark class on <html> and injects all --ant-* variables on :root. ConfigProvider runs without cssVar, so AntD token variables do not exist at runtime unless useTheme defines them.--ant-* tokens that already adapt to the theme. When a distinct dark value is unavoidable, key it on the html.dark ancestor selector inside scoped styles. Never use @media (prefers-color-scheme: ...) in components; it follows the OS instead of the app theme.[data-theme='dark'] or a .light class; nothing in the codebase sets them, so such rules are dead code.isDark exported by useTheme. Never read window.matchMedia('(prefers-color-scheme: ...)') outside useTheme.ts; a matchMedia call inside a computed is non-reactive and will not update on theme or OS changes.--ant-* names defined by useTheme.updateCSSVariables(). Every --ant-* definition must map to the matching antTokens.<token> value derived from the same Ant Design algorithm and seed used by ConfigProvider; never approximate Ant Design tokens with hand-written light/dark values. Use a literal name in each setProperty call so the variable stays greppable.--app-* for project-specific shared values that have no Ant Design token equivalent. Derive those values from the app theme in useTheme.ts, with explicit light/dark behavior where needed.Before completing styling work that touches colors, borders, backgrounds, or adds var() references, run the undefined-CSS-variable audit in references/css-variable-audit.md. Fix every reported variable by correcting it to an existing token, mapping a missing --ant-* variable to its matching antTokens.<token>, or defining a genuinely project-specific --app-* variable.
danger for delete, stop, disable, clear, or irreversible actions.Modal.confirm.loading or confirm-loading.aria-label when context is not enough.a-form; complex configuration pages prefer layout="vertical".rules and required; do not rely on placeholder as validation.isEdit or route parameters.a-table; use custom lists for drag, complex cards, or virtual logs.a-tag only for finite enum statuses or scan-friendly categories.YYYY-MM-DD HH:mm:ss unless a local pattern differs.Modal.confirm for destructive confirmation.a-modal for short forms and simple flows.alert and confirm.z-index. Keep normal business overlays below the title bar or reserve its space; only an intentional startup or shutdown safety layer may block window controls.overflow-y: auto; nested scrolling is reserved for deliberately independent panes. Do not make the page body or the modal wrapper provide the overflow, and keep close and footer actions reachable.Every page or major panel should account for:
Loading indicators for an otherwise empty panel or dialog step must sit in a container with explicit usable size and centered alignment. Do not place an overlay spinner around zero-height conditional content, which leaves the indicator anchored at the container origin.
For WebSocket, scheduler, download, backend startup, and other process flows, distinguish connecting, connected, disconnected, reconnecting, timeout, processing, success, and failure when those states exist.
MenuOutlined or DragOutlined.grab on handles and grabbing while dragging.Before declaring UI work complete:
mas-frontend-standards.prefers-color-scheme appears only in src/composables/useTheme.ts; grep for it when touching theme-related styles.references/css-variable-audit.md and confirm zero undefined references.| Temptation | Reality |
|---|---|
| "This page can have its own style." | AUTO-MAS uses a shared desktop business UI language. |
| "A custom button/input/table is faster." | Use Ant Design Vue and existing project components first. |
| "A tag makes short text look neat." | Tags are only for finite statuses or categories. |
| "Hover cursor is enough for drag." | Draggable items need visible handles and protected inner controls. |
| "Success/failure messages can be generic." | Feedback should state the concrete result or reason. |
| "Dark mode can wait." | Color and token changes must remain readable in both themes. |
| "prefers-color-scheme is the standard way." | The app theme overrides the OS theme; components must key on html.dark or tokens, never media queries. |
| "Any --ant-* name will work." | AntD does not emit CSS variables here; only names defined in useTheme.updateCSSVariables() resolve. |
For UI tasks, report:
Review, add, or refactor AUTO-MAS specialized script adapters by upstream architecture, including MAA, SRC, MaaEnd/MXU, M9A/MFAA, General, ok-script adapters such as Okww and OkNte, and multi-engine adapters such as HSR. Use when lowering user setup friction, deciding whether MAS should fill a script capability gap, or changing ScriptType registration, task lifecycle, config ownership, ScriptConfig sessions, Electron integration, frontend edit surfaces, and verification.
Use when a task needs AUTO-MAS engineering conventions across frontend, UI, code style, schema naming, module boundaries, function design, API contracts, data modeling, script adapters (MAA, SRC, MaaEnd, M9A, General, ok-script family such as Okww and OkNte, multi-engine HSR), plan schedules, or game community sign-in.
Define backend API contract standards for FastAPI services. Use when adding or refactoring HTTP/WebSocket endpoints in app/api, designing request/response schemas in app/models/schema.py, standardizing status/error contracts, and maintaining backward compatibility for clients.
