@morya-ui/setup 0.3.4 → 0.3.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +119 -103
- package/bin/morya-ui-setup.js +14 -14
- package/catalog/skills.json +46 -46
- package/package.json +4 -5
- package/src/__tests__/mcp.test.mjs +141 -0
- package/src/cli.mjs +330 -335
- package/src/copy-template.mjs +78 -78
- package/src/fs-utils.mjs +24 -24
- package/src/install.mjs +134 -63
- package/src/mcp.mjs +220 -50
- package/src/package-json.mjs +30 -30
- package/src/skills.mjs +224 -223
- package/src/styles.mjs +119 -119
- package/template/.agents/skills/morya-ui-pages/SKILL.md +191 -184
- package/template/.agents/skills/morya-ui-pages/evals/evals.json +89 -89
- package/template/.agents/skills/morya-ui-pages/references/component-index.md +99 -99
- package/template/.agents/skills/morya-ui-pages/references/decision-recipes.md +72 -5
- package/template/.agents/skills/morya-ui-pages/references/design-system.md +101 -101
- package/template/.agents/skills/morya-ui-pages/references/feedback.md +68 -68
- package/template/.agents/skills/morya-ui-pages/references/optional-companions.md +62 -107
- package/template/.agents/skills/morya-ui-pages/references/page-layouts.md +133 -141
- package/template/.agents/skills/morya-ui-pages/references/review-checklist.md +76 -64
- package/template/.agents/skills/morya-ui-pages/references/style-presets.md +68 -73
- package/template/.agents/skills/morya-ui-pages/references/surfaces.md +91 -91
- package/template/.agents/skills/morya-ui-pages/references/visual-craft.md +131 -221
- package/template/.cursor/rules/coding-style.mdc +41 -41
- package/template/.cursor/rules/component-usage.mdc +41 -41
- package/template/.cursor/rules/design-system.mdc +18 -17
- package/template/.cursor/rules/page-layout.mdc +97 -97
- package/template/AGENTS.md +33 -0
- package/template/DESIGN.md +81 -59
- package/template/scripts/check-raw-colors.mjs +74 -74
|
@@ -1,184 +1,191 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: morya-ui-pages
|
|
3
|
-
description: >
|
|
4
|
-
Build, redesign, critique, or polish any Vue 3 UI surface that should use the
|
|
5
|
-
morya-ui component library — admin CRUD (list, form, dashboard, detail,
|
|
6
|
-
settings), auth and onboarding, empty and error states, wizards, overlays,
|
|
7
|
-
marketing/landing and pricing pages, docs chrome, and hybrid product UI.
|
|
8
|
-
Trigger on: morya-ui, M* components, --m-* tokens, golden pages,
|
|
9
|
-
列表页, 表单页, 仪表盘, 登录页, 注册, 空状态, 向导, 落地页, 官网,
|
|
10
|
-
login, dashboard, settings, onboarding, or “用组件库做页面”. Prefer
|
|
11
|
-
skill over generic frontend-design, impeccable, or ui-ux-pro-max when the
|
|
12
|
-
implementation stack is morya-ui; those companions may deepen taste and polish
|
|
13
|
-
after structure/contract are fixed (see references/optional-companions.md).
|
|
14
|
-
Do not use for backend-only work or for authoring new components inside the
|
|
15
|
-
morya-ui library source itself.
|
|
16
|
-
---
|
|
17
|
-
|
|
18
|
-
# Morya UI Pages
|
|
19
|
-
|
|
20
|
-
Guide agents that **consume morya-ui** across the full product surface — not only admin CRUD.
|
|
21
|
-
|
|
22
|
-
Two layers always apply:
|
|
23
|
-
|
|
24
|
-
1. **Contract** — only `M*` controls, `--m-*` tokens, real APIs (MCP/docs). Never invent props or mix UI kits.
|
|
25
|
-
2. **Craft** — pick the right surface pattern, then apply intentional visual direction (distilled from Frontend Design / Impeccable / UI-UX-Pro-Max ideas).
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
|
34
|
-
|
|
|
35
|
-
| **
|
|
36
|
-
| **
|
|
37
|
-
| **
|
|
38
|
-
| **
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
- **
|
|
59
|
-
- **
|
|
60
|
-
- **
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
|
75
|
-
|
|
|
76
|
-
|
|
|
77
|
-
|
|
|
78
|
-
|
|
|
79
|
-
|
|
|
80
|
-
|
|
|
81
|
-
|
|
|
82
|
-
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
**
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
**
|
|
91
|
-
|
|
92
|
-
**
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
-
|
|
101
|
-
-
|
|
102
|
-
-
|
|
103
|
-
-
|
|
104
|
-
-
|
|
105
|
-
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
-
|
|
118
|
-
-
|
|
119
|
-
-
|
|
120
|
-
|
|
121
|
-
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
-
|
|
146
|
-
-
|
|
147
|
-
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
-
|
|
165
|
-
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
|
181
|
-
|
|
|
182
|
-
| [
|
|
183
|
-
| [
|
|
184
|
-
| [
|
|
1
|
+
---
|
|
2
|
+
name: morya-ui-pages
|
|
3
|
+
description: >
|
|
4
|
+
Build, redesign, critique, or polish any Vue 3 UI surface that should use the
|
|
5
|
+
morya-ui component library — admin CRUD (list, form, dashboard, detail,
|
|
6
|
+
settings), auth and onboarding, empty and error states, wizards, overlays,
|
|
7
|
+
marketing/landing and pricing pages, docs chrome, and hybrid product UI.
|
|
8
|
+
Trigger on: morya-ui, M* components, --m-* tokens, golden pages, page snippets,
|
|
9
|
+
后台页, 列表页, 表单页, 仪表盘, 登录页, 注册, 空状态, 向导, 落地页, 官网,
|
|
10
|
+
landing, login, dashboard, settings, onboarding, or “用组件库做页面”. Prefer
|
|
11
|
+
this skill over generic frontend-design, impeccable, or ui-ux-pro-max when the
|
|
12
|
+
implementation stack is morya-ui; those companions may deepen taste and polish
|
|
13
|
+
after structure/contract are fixed (see references/optional-companions.md).
|
|
14
|
+
Do not use for backend-only work or for authoring new components inside the
|
|
15
|
+
morya-ui library source itself.
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
# Morya UI Pages
|
|
19
|
+
|
|
20
|
+
Guide agents that **consume morya-ui** across the full product surface — not only admin CRUD.
|
|
21
|
+
|
|
22
|
+
Two layers always apply:
|
|
23
|
+
|
|
24
|
+
1. **Contract** — only `M*` controls, `--m-*` tokens, real APIs (MCP/docs). Never invent props or mix UI kits.
|
|
25
|
+
2. **Craft** — pick the right surface pattern, then apply intentional visual direction (distilled from Frontend Design / Impeccable / UI-UX-Pro-Max ideas). Ops stays disciplined; expressive surfaces (landing, auth brand moments, empty states) may take a justified aesthetic risk — still on-token and on-component.
|
|
26
|
+
|
|
27
|
+
**Default build path (composition-first):** pin surface → **`map_reference` / `recommend_page({ brief, density })`** → L2 decisions + page snippets → signature shell (`get_style_shells`) → craft → **`validate_usage` + `validate_page({ brief })`**. Golden pages are an **optional** whole-page block-order check — not the default clone target.
|
|
28
|
+
|
|
29
|
+
When companions conflict with this skill or project `DESIGN.md`, **this skill wins**.
|
|
30
|
+
|
|
31
|
+
## Surface map (pick one first)
|
|
32
|
+
|
|
33
|
+
| Lane | Surfaces | Primary references |
|
|
34
|
+
| --- | --- | --- |
|
|
35
|
+
| **Ops** | list, form, dashboard, detail, settings, filter drawer, CRUD dialog | [page-layouts.md](references/page-layouts.md) block order + snippets |
|
|
36
|
+
| **Account** | login, register, invite, forgot/reset password, profile | [surfaces.md](references/surfaces.md) § Account + `auth-split-shell` |
|
|
37
|
+
| **Flow** | onboarding, empty state, wizard/stepper, success/result | [surfaces.md](references/surfaces.md) § Flow + empty/result/wizard snippets |
|
|
38
|
+
| **System** | 404 / error, permission denied, maintenance | [surfaces.md](references/surfaces.md) § System |
|
|
39
|
+
| **Express** | marketing landing, pricing, feature showcase, docs marketing chrome | [surfaces.md](references/surfaces.md) § Express + [visual-craft.md](references/visual-craft.md) |
|
|
40
|
+
| **Overlay** | dialog, drawer, popover, command menu as the main UI | [surfaces.md](references/surfaces.md) § Overlay + form-in-dialog/drawer snippets |
|
|
41
|
+
|
|
42
|
+
Unclear brief → ask **one** short question, or default: Ops → closest page-layout checklist + snippets; public marketing → Express.
|
|
43
|
+
|
|
44
|
+
Full taxonomy: [references/surfaces.md](references/surfaces.md).
|
|
45
|
+
|
|
46
|
+
## Prerequisites
|
|
47
|
+
|
|
48
|
+
1. `morya-ui` installed; `morya-ui/styles.css` imported.
|
|
49
|
+
2. Prefer `@morya-ui/mcp` — never invent prop / event / slot names.
|
|
50
|
+
3. Component APIs, decision recipes, page snippets, and feedback rules come from `@morya-ui/mcp`. Golden pages are optional assembly demos. Without MCP, use this skill's `references/`. Project `DESIGN.md` overrides generic taste when the AI pack is merged.
|
|
51
|
+
|
|
52
|
+
## Workflow
|
|
53
|
+
|
|
54
|
+
### 1. Pin subject, audience, surface, job, **style**
|
|
55
|
+
|
|
56
|
+
State explicitly (even briefly in thinking):
|
|
57
|
+
|
|
58
|
+
- **Subject** — product / domain vernacular (not generic “SaaS”)
|
|
59
|
+
- **Audience** — who uses this screen
|
|
60
|
+
- **Surface** — from the map above
|
|
61
|
+
- **Single job** — what the first viewport must accomplish
|
|
62
|
+
- **Style direction** — resolve in this order (see [style-presets.md](references/style-presets.md); **no preset catalog**):
|
|
63
|
+
1. User **reference** or **explicit description** → **must follow** (map to `--m-*` + `M*`; never substitute another face)
|
|
64
|
+
2. No description, but **clear prompt cues** → infer and **state your reading** in one sentence
|
|
65
|
+
3. **Uncertain** → **ask once** for a description or reference; do not invent the full look first
|
|
66
|
+
4. User says “直接写 / 你看着办” with still no cues → quiet flat on-token admin face, **say so**; never default glass/neon/aurora
|
|
67
|
+
|
|
68
|
+
Golden pages (when used) lock **block order**, not aesthetics. Blindly cloning golden visuals makes pages feel stiff — prefer composing snippets.
|
|
69
|
+
|
|
70
|
+
For Express / branded Account moments, also draft a tiny **design plan** (see [visual-craft.md](references/visual-craft.md)): palette roles mapped to `--m-*` (extend only if the project already customizes theme), type roles, layout concept, one signature element. For Ops, Ops polish + the resolved direction is enough unless the user asks for a redesign.
|
|
71
|
+
|
|
72
|
+
### 2. Load the smallest useful references
|
|
73
|
+
|
|
74
|
+
| Need | Prefer (MCP) | Else read |
|
|
75
|
+
| --- | --- | --- |
|
|
76
|
+
| Reference fidelity | **`map_reference`** (description / requiredBlocks / density) → follow `mapping` | Describe blocks in chat; compose matching snippets |
|
|
77
|
+
| Ops pattern + snippets | `recommend_page({ density, brief })` → **`suggestedSnippets`** / **`referenceMapping`** / **`get_page_snippet`** + **`recommend_component`** | [page-layouts.md](references/page-layouts.md) + [decision-recipes.md](references/decision-recipes.md) |
|
|
78
|
+
| Style direction | `recommend_page({ style })` / **`get_style_direction`** | [style-presets.md](references/style-presets.md) |
|
|
79
|
+
| Signature shells (Account / Express / Flow) | **`get_style_shells`** (`account-split`, `express-hero`, …) | [visual-craft.md](references/visual-craft.md) |
|
|
80
|
+
| Account / Express / empty / result | snippets (`auth-split-shell`, `empty-block`, `result-block`, …) + `recommend_page` | [surfaces.md](references/surfaces.md) |
|
|
81
|
+
| Optional whole-page block order | `get_golden_page` only when unsure of section order or user asks to mirror a golden sample | [page-layouts.md](references/page-layouts.md) |
|
|
82
|
+
| Visual direction | — | [visual-craft.md](references/visual-craft.md) + [style-presets.md](references/style-presets.md) |
|
|
83
|
+
| Components / **API truth** | `search` / **`get_component`** / `get_example` / **`recommend_component`** (L2 recipes + `relatedSnippets`) | [decision-recipes.md](references/decision-recipes.md) + [component-index.md](references/component-index.md) |
|
|
84
|
+
| Tokens / rules / theme override | `get_design_rules` | [design-system.md](references/design-system.md) + project `DESIGN.md` § 主题覆盖 |
|
|
85
|
+
| Feedback API | — | [feedback.md](references/feedback.md) |
|
|
86
|
+
| **Required checks** | **`validate_usage`** + **`validate_page({ brief })`** (contract must pass; craft may be waived) | [review-checklist.md](references/review-checklist.md) |
|
|
87
|
+
|
|
88
|
+
### 3. Compose
|
|
89
|
+
|
|
90
|
+
**Ops:** follow [page-layouts.md](references/page-layouts.md) **block-order checklist**; fill each block with **`get_page_snippet`** / `suggestedSnippets` (filters, table, header actions, form-in-dialog, confirm-delete, …). Apply the resolved **style direction** for density/chrome/copy; prefer `MPage*` over custom chrome. Do not freeze every Ops page into identical chrome. List density/sider cues (`dense` / `rail`) inform craft — do not invent new golden-page variants.
|
|
91
|
+
|
|
92
|
+
**Account / Flow / System:** centered or split shells with `MCard` / `MForm` / `MEmpty` / `MResult` (see surfaces + snippets); keep controls as `M*`. Persistent form errors use field `errorMessage` or a token-styled `role="alert"` — `<MMessage>` is the `message` host, not an inline alert.
|
|
93
|
+
|
|
94
|
+
**Express:** hero + sections with intentional hierarchy; interactive bits still `MButton` / `MTag` / etc.; atmosphere via layout, motion, and tokens — not a second component library.
|
|
95
|
+
|
|
96
|
+
**Overlay:** build the host page lightly; put the real job inside `MDialog` / `MDrawer` / `MCommandMenu` (use `form-in-dialog` / `form-in-drawer` snippets).
|
|
97
|
+
|
|
98
|
+
### 4. Wire real API usage
|
|
99
|
+
|
|
100
|
+
- Import from `morya-ui` (or documented subpath + style).
|
|
101
|
+
- **Selection + key props:** call MCP **`recommend_component`** (by query or `decision` id) and apply the returned **recipe** (`props` / `slots` / `events`), **antiPatterns**, and **`relatedSnippets`**. Without MCP, read [decision-recipes.md](references/decision-recipes.md). Then confirm full API with `get_component` / `get_example`.
|
|
102
|
+
- Forms: `MForm` + fields; `@submit` + `type="submit"` (or documented footer button pattern on `form-in-dialog` snippet).
|
|
103
|
+
- Tables: `columns` + `rows` + `row-key`; `#cell-{key}`. There is no `data` prop. For full-viewport admin lists whose main job is one table, consider `MPageContent fill` + `MTable fill paginator`; skip `fill` for embedded/short/whole-page-scroll cases (see [page-layouts.md](references/page-layouts.md)).
|
|
104
|
+
- Enums → `MSelect` / `MTreeSelect`; action menus → `MDropdown`.
|
|
105
|
+
- Destructive → `MConfirmDialog` / `MConfirmPopup` (`confirm-choice` + `confirm-delete` snippet).
|
|
106
|
+
- Feedback → default **`message`**; `toast` only for summary+detail / async; persistent form errors → `errorMessage` / `role="alert"` (`feedback-choice`). See [feedback.md](references/feedback.md).
|
|
107
|
+
- Motion → intensity with `useMotion` (`full` / `reduced` / `none`); overlay enter/exit with `transition` prop or `createMoryaUI({ motion: { transitions } })` — do not invent a second animation stack. Prefer MCP / docs `motion` guide.
|
|
108
|
+
- **Before craft:** for each unfamiliar or newly written `M*` usage, call MCP **`get_component` / `get_example`**, then **`validate_usage`**. Fix every `unknown-prop` / `unknown-event` before delivery.
|
|
109
|
+
- `recommend_page(includeScaffold: true)` may return golden source as a **structure reference** — remap copy/data only; default path does **not** require cloning the whole page. Never treat generated fallback as the visual target.
|
|
110
|
+
|
|
111
|
+
### 5. Craft pass (always — lane-aware + companions)
|
|
112
|
+
|
|
113
|
+
Run **before** delivery. Do not stop at a structurally correct shell.
|
|
114
|
+
|
|
115
|
+
1. Resolve **style direction** ([style-presets.md](references/style-presets.md)) — reference/description first; else prompt cues; else **ask**; never silent AI face. **No preset catalog.**
|
|
116
|
+
2. Apply lane craft from [visual-craft.md](references/visual-craft.md):
|
|
117
|
+
- **Ops / Operate:** resolved direction + § Ops polish (one primary, menu icons, `MStatus`, designed empty, no decorative cards).
|
|
118
|
+
- **Account / Flow:** one calm brand or empty-state cue from § Shell recipes; form errors via `errorMessage` / token `role="alert"`.
|
|
119
|
+
- **Express / Persuade:** short design plan + one signature; avoid AI-default looks; optional 1–2 token-only motions via `useMotion`. Signature ≠ unearned gradient/glass/neon.
|
|
120
|
+
3. **If companions are already installed** (see [optional-companions.md](references/optional-companions.md)):
|
|
121
|
+
- Express / brand → may load **`frontend-design`** for POV after contract **and style direction** are fixed
|
|
122
|
+
- User asks 更大胆/更克制/polish/audit → may load **`impeccable`** command (`bolder` / `quieter` / `polish` / …) **inside** the resolved direction
|
|
123
|
+
- Mood/industry keywords only → optional **`ui-ux-pro-max`** search, then map to `--m-*` (not a preset id)
|
|
124
|
+
- a11y pass → optional **`fixing-accessibility`** after visual
|
|
125
|
+
- Max **one** visual companion per task; always remediate with `M*` + `--m-*`; strip companion-added AI atmosphere the user did not ask for
|
|
126
|
+
4. If companions are **absent**, use distilled visual-craft / style-direction — do **not** block or ask to install mid-task.
|
|
127
|
+
5. **All lanes:** responsive, focus visible, domain-real copy. User **reference** overrides companion taste within the morya contract.
|
|
128
|
+
|
|
129
|
+
Named polish modes (`quieter` | `bolder` | `clarify` | `audit` | …): extra pass when the user asks to improve an existing screen.
|
|
130
|
+
|
|
131
|
+
### 6. Review
|
|
132
|
+
|
|
133
|
+
Use [review-checklist.md](references/review-checklist.md) (contract + craft sections).
|
|
134
|
+
|
|
135
|
+
**Required when MCP is available:**
|
|
136
|
+
|
|
137
|
+
1. `validate_usage` on the page (or per component) — API accuracy gate
|
|
138
|
+
2. `validate_page` with the **same `brief`** used in `map_reference` / `recommend_page` — **`ok` must be true** (contract); craft suggestions addressed or consciously waived
|
|
139
|
+
3. Optional screenshot self-check when the user gave a visual reference (see [review-checklist.md](references/review-checklist.md))
|
|
140
|
+
|
|
141
|
+
Do not deliver with unresolved `unknown-prop` / `unknown-event` or `validate_page` contract failures (`brief-missing-*`, wrong table props, …).
|
|
142
|
+
|
|
143
|
+
## Hard boundaries
|
|
144
|
+
|
|
145
|
+
- No second UI kit on the same surface.
|
|
146
|
+
- No hand-rolled table/modal when `MTable` / `MDialog` / `MDrawer` fit.
|
|
147
|
+
- No invented props / events / slots.
|
|
148
|
+
- No defaulting every success to `toast`.
|
|
149
|
+
- No substituting a generated scaffold for a real golden sample when the user asked to mirror one — but default path composes snippets, not full-page clones.
|
|
150
|
+
- Ops surfaces follow page-layout **block order** — do not replace them with marketing heroes.
|
|
151
|
+
- Express surfaces still use `M*` for controls and `--m-*` for color/space; do not introduce shadcn/Element/etc. stacks suggested by generic design skills.
|
|
152
|
+
- Soft-load companions only; never require Impeccable / UI-UX-Pro-Max / Frontend Design to be installed.
|
|
153
|
+
- Do **not** invent decorative glass / neon / aurora / neumorph / full-page gradients unless the **user reference or description** clearly asks for them.
|
|
154
|
+
- Do **not** add new golden-page craft variants (`list-page-*`); express density/sider via style direction + polish.
|
|
155
|
+
|
|
156
|
+
## Soft companions
|
|
157
|
+
|
|
158
|
+
If already installed in the consumer project, **combine** them after structure + contract (do not replace this skill):
|
|
159
|
+
|
|
160
|
+
| Companion | Load when | Role |
|
|
161
|
+
| --- | --- | --- |
|
|
162
|
+
| `frontend-design` | Express / branded Account moments | Distinctive design plan + signature (taste) |
|
|
163
|
+
| `impeccable` | Polish / bolder / quieter / audit / delight asks | Named Operate/Persuade craft passes |
|
|
164
|
+
| `ui-ux-pro-max` | Mood / industry keyword search for Express | Keywords → map to `--m-*` (no preset ids) |
|
|
165
|
+
| `fixing-accessibility` | a11y audit after visual | Names, keyboard, focus on top of `M*` |
|
|
166
|
+
|
|
167
|
+
Routing, conflict rules, and load budget: [optional-companions.md](references/optional-companions.md). Distilled craft in [visual-craft.md](references/visual-craft.md) + [style-presets.md](references/style-presets.md) keeps this skill **standalone**.
|
|
168
|
+
|
|
169
|
+
## Output expectations
|
|
170
|
+
|
|
171
|
+
- Vue 3 `<script setup lang="ts">`.
|
|
172
|
+
- PascalCase `M*` in templates.
|
|
173
|
+
- Domain-real copy and data shapes (not placeholder “示例 / Name / No data” when the brief names a product).
|
|
174
|
+
- Scoped CSS minimal; tokens only (`color-mix` OK). Prefer **flat** surfaces; gradients / glass / glow **only** when the user/reference asks (control widths may be inline).
|
|
175
|
+
- Craft pass completed for the lane (see step 5).
|
|
176
|
+
- For multi-file asks: sensible `views/` / `components/` split; otherwise one SFC is fine.
|
|
177
|
+
|
|
178
|
+
## Bundled references
|
|
179
|
+
|
|
180
|
+
| File | Read when |
|
|
181
|
+
| --- | --- |
|
|
182
|
+
| [surfaces.md](references/surfaces.md) | Choosing / composing non-Ops (and hybrid) surfaces |
|
|
183
|
+
| [page-layouts.md](references/page-layouts.md) | Ops block-order checklists (fill with snippets) |
|
|
184
|
+
| [style-presets.md](references/style-presets.md) | Style resolution (no preset catalog) |
|
|
185
|
+
| [visual-craft.md](references/visual-craft.md) | Ops polish, shell recipes, anti-defaults, polish modes |
|
|
186
|
+
| [design-system.md](references/design-system.md) | Principles, tokens, bans |
|
|
187
|
+
| [component-index.md](references/component-index.md) | Catalog + decision-id index |
|
|
188
|
+
| [decision-recipes.md](references/decision-recipes.md) | Scenario → component → key props (generated; offline MCP mirror) |
|
|
189
|
+
| [feedback.md](references/feedback.md) | message / toast / MMessage |
|
|
190
|
+
| [review-checklist.md](references/review-checklist.md) | Pre-delivery checks |
|
|
191
|
+
| [optional-companions.md](references/optional-companions.md) | Combining with external design skills |
|