@morya-ui/setup 0.4.1 → 0.4.2

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/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@morya-ui/setup",
3
3
  "type": "module",
4
- "version": "0.4.1",
4
+ "version": "0.4.2",
5
5
  "description": "One-shot setup for morya-ui: install the library, multi-editor MCP, Agent skills, and design config.",
6
6
  "license": "MIT",
7
7
  "homepage": "https://github.com/morya-space/morya-ui/tree/main/packages/setup#readme",
@@ -19,12 +19,15 @@ description: >
19
19
 
20
20
  Guide agents that **consume morya-ui** across the full product surface — not only admin CRUD.
21
21
 
22
- Two layers always apply:
22
+ ## Must follow (restrained)
23
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.
24
+ 1. **Contract first** — only `M*` + `--m-*` + real MCP/docs APIs. No second UI kit, no invented props.
25
+ 2. **Default quieter** — no reference / vague ask → quiet flat on-token face. Do not invent glass, neon, aurora, or marketing heroes.
26
+ 3. **Reference wins atmosphere** — if the user gives a screenshot/mock/description, follow traits that appear there (map via [reference-visual-map.md](references/reference-visual-map.md)); do **not** strip them to “look safer,” and do **not** add decorations the reference lacks.
27
+ 4. **Say the direction** — in the reply, one line `style:` + optional `signature:` (e.g. `style: quiet flat`, or `style: follow reference — soft frosted cards + round primary`).
28
+ 5. **Gate** — `validate_usage` + `validate_page({ brief })`. With a visual reference, also run the fidelity check in [review-checklist.md](references/review-checklist.md).
26
29
 
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.
30
+ **Default build path:** pin surface → **`map_reference` / `recommend_page({ brief, density })`** → decisions + snippets → shell only if needed → craft → **`validate_usage` + `validate_page`**. Golden pages are an **optional** block-order check.
28
31
 
29
32
  When companions conflict with this skill or project `DESIGN.md`, **this skill wins**.
30
33
 
@@ -76,6 +79,7 @@ For Express / branded Account moments, also draft a tiny **design plan** (see [v
76
79
  | Reference fidelity | **`map_reference`** (description / requiredBlocks / density) → follow `mapping` | Describe blocks in chat; compose matching snippets |
77
80
  | 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
81
  | Style direction | `recommend_page({ style })` / **`get_style_direction`** | [style-presets.md](references/style-presets.md) |
82
+ | Screenshot / mock → library moves | — | [reference-visual-map.md](references/reference-visual-map.md) |
79
83
  | Signature shells (Account / Express / Flow) | **`get_style_shells`** (`account-split`, `express-hero`, …) | [visual-craft.md](references/visual-craft.md) |
80
84
  | Account / Express / empty / result | snippets (`auth-split-shell`, `empty-block`, `result-block`, …) + `recommend_page` | [surfaces.md](references/surfaces.md) |
81
85
  | 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) |
@@ -112,19 +116,20 @@ For Express / branded Account moments, also draft a tiny **design plan** (see [v
112
116
 
113
117
  Run **before** delivery. Do not stop at a structurally correct shell.
114
118
 
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.
119
+ 1. Resolve **style direction** ([style-presets.md](references/style-presets.md)) — reference first; else cues; else **ask**; else quieter flat. **No preset catalog.**
120
+ 2. If a screenshot/mock is present, translate visible traits with [reference-visual-map.md](references/reference-visual-map.md) — approximate with `M*` + tokens; state what cannot be 1:1.
121
+ 3. Apply lane craft from [visual-craft.md](references/visual-craft.md):
122
+ - **Ops / Operate:** resolved direction + § Ops polish (one primary, menu icons, `MStatus`, designed empty, no decorative cards). Stay restrained unless the reference shows more.
123
+ - **Account / Flow:** calm shell; form errors via `errorMessage` / token `role="alert"`.
124
+ - **Express / Persuade:** short design plan + one signature **only when** the brief/reference calls for it; optional 1–2 token-only motions via `useMotion`.
125
+ 4. **If companions are already installed** (see [optional-companions.md](references/optional-companions.md)):
126
+ - Express / brand → may load **`frontend-design`** after contract **and style direction** are fixed
127
+ - User asks 更大胆/更克制/polish/audit → may load **`impeccable`** **inside** the resolved direction
128
+ - Mood keywords only → optional **`ui-ux-pro-max`** search → map to `--m-*`
129
+ - a11y → optional **`fixing-accessibility`**
130
+ - Max **one** visual companion; remediate with `M*` + `--m-*`; strip companion atmosphere the user/reference did not ask for
131
+ 5. Companions absent → do **not** block or ask to install mid-task.
132
+ 6. **All lanes:** responsive, focus visible, domain-real copy. State `style:` (+ `signature:` when useful) before delivery.
128
133
 
129
134
  Named polish modes (`quieter` | `bolder` | `clarify` | `audit` | …): extra pass when the user asks to improve an existing screen.
130
135
 
@@ -136,7 +141,7 @@ Use [review-checklist.md](references/review-checklist.md) (contract + craft sect
136
141
 
137
142
  1. `validate_usage` on the page (or per component) — API accuracy gate
138
143
  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))
144
+ 3. **Required** fidelity check when the user gave a visual reference (see [review-checklist.md](references/review-checklist.md) § Reference fidelity)
140
145
 
141
146
  Do not deliver with unresolved `unknown-prop` / `unknown-event` or `validate_page` contract failures (`brief-missing-*`, wrong table props, …).
142
147
 
@@ -150,7 +155,8 @@ Do not deliver with unresolved `unknown-prop` / `unknown-event` or `validate_pag
150
155
  - Ops surfaces follow page-layout **block order** — do not replace them with marketing heroes.
151
156
  - 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
157
  - 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.
158
+ - **Restrained by default:** do **not** invent decorative glass / neon / aurora / neumorph / full-page gradients when there is no reference/description asking for them.
159
+ - **With a reference:** follow atmosphere that is **visible in the reference**; do not “sanitize” it away; do not add extra decoration beyond it. Approximate with tokens — pixel-perfect art is out of scope.
154
160
  - Do **not** add new golden-page craft variants (`list-page-*`); express density/sider via style direction + polish.
155
161
 
156
162
  ## Soft companions
@@ -171,7 +177,8 @@ Routing, conflict rules, and load budget: [optional-companions.md](references/op
171
177
  - Vue 3 `<script setup lang="ts">`.
172
178
  - PascalCase `M*` in templates.
173
179
  - 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).
180
+ - Scoped CSS minimal; tokens only (`color-mix` OK). Prefer **flat** surfaces by default; gradients / glass / glow only from user/reference (control widths may be inline).
181
+ - Reply includes `style:` (and `signature:` when following a richer reference).
175
182
  - Craft pass completed for the lane (see step 5).
176
183
  - For multi-file asks: sensible `views/` / `components/` split; otherwise one SFC is fine.
177
184
 
@@ -181,11 +188,12 @@ Routing, conflict rules, and load budget: [optional-companions.md](references/op
181
188
  | --- | --- |
182
189
  | [surfaces.md](references/surfaces.md) | Choosing / composing non-Ops (and hybrid) surfaces |
183
190
  | [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) |
191
+ | [style-presets.md](references/style-presets.md) | Style resolution (no preset catalog); reference vs restrained default |
192
+ | [reference-visual-map.md](references/reference-visual-map.md) | Screenshot/mock traits → `M*` / token / shell moves |
185
193
  | [visual-craft.md](references/visual-craft.md) | Ops polish, shell recipes, anti-defaults, polish modes |
186
194
  | [design-system.md](references/design-system.md) | Principles, tokens, bans |
187
195
  | [component-index.md](references/component-index.md) | Catalog + decision-id index |
188
196
  | [decision-recipes.md](references/decision-recipes.md) | Scenario → component → key props (generated; offline MCP mirror) |
189
197
  | [feedback.md](references/feedback.md) | message / toast / MMessage |
190
- | [review-checklist.md](references/review-checklist.md) | Pre-delivery checks |
198
+ | [review-checklist.md](references/review-checklist.md) | Pre-delivery checks + reference fidelity |
191
199
  | [optional-companions.md](references/optional-companions.md) | Combining with external design skills |
@@ -18,7 +18,7 @@ Full API: docs site `/components` or MCP (`get_component`, `search`, `validate_u
18
18
 
19
19
  ## Actions
20
20
 
21
- `MButton` / `MButtonGroup` (primary `severity="primary"`, danger `severity="danger"`), `MSplitButton` (main action + menu), `MSpeedDial` (floating action cluster)
21
+ `MButton` / `MButtonGroup` (primary `type="primary"`, danger `danger` / `color="danger"`; counts via wrapping `MBadge`, not Button props), `MSplitButton` (main action + menu), `MSpeedDial` (floating action cluster)
22
22
 
23
23
  ## Forms · inputs
24
24
 
@@ -93,6 +93,8 @@ Open MCP `recommend_component({ decision })` or the matching section in [decisio
93
93
  | `MDropdown` as form enum | `MSelect` (`selection-choice`) |
94
94
  | `MTable` `:data` | `:rows` (`data-display-choice`) |
95
95
  | `<MMessage severity>` as an inline alert | Field `errorMessage`, or token `role="alert"` (`feedback-choice`) |
96
+ | `MButton severity="primary"` / `severity="danger"` | `type="primary"` / `danger` or `color="danger"` |
97
+ | `MButton badge` / `badgeColor` | Wrap with `MBadge` (`status-label-choice`) |
96
98
  | Hand `<table>` | `MTable` |
97
99
  | Hand modal div | `MDialog` / `MConfirmDialog` |
98
100
  | Hand spinner or `MProgressSpinner` as a region / page mask | `MLoading` / `v-loading` (`loading-choice`) |
@@ -32,7 +32,7 @@ This file is the **offline** mirror for agents without MCP.
32
32
  - v-model / modelValue 控制开关(不要用 visible)
33
33
  - header 或 title 设弹窗标题
34
34
  - width 约 32rem 适配短表单(见 form-in-dialog snippet)
35
- - 表单字段用 fluid;主按钮 severity="primary"
35
+ - 表单字段用 fluid;主按钮 type="primary"
36
36
 
37
37
  **Recipe · slots**
38
38
 
@@ -117,7 +117,7 @@ This file is the **offline** mirror for agents without MCP.
117
117
  **Recipe · events**
118
118
 
119
119
  - MForm @submit(或 @submit.prevent)
120
- - 提交按钮 type="submit" + severity="primary"
120
+ - 提交按钮 html-type="submit" + type="primary"
121
121
 
122
122
  **Related snippets**
123
123
 
@@ -770,7 +770,7 @@ This file is the **offline** mirror for agents without MCP.
770
770
  **Recipe · props**
771
771
 
772
772
  - 左侧标题、右侧主按钮
773
- - 主按钮 severity="primary";全页仅一个主按钮
773
+ - 主按钮 type="primary";全页仅一个主按钮
774
774
  - 批量操作条也可放工具栏区
775
775
 
776
776
  **Recipe · slots**
@@ -1282,6 +1282,7 @@ This file is the **offline** mirror for agents without MCP.
1282
1282
  **Anti-patterns**
1283
1283
 
1284
1284
  - 独立状态文案用 Badge → Status / Tag
1285
+ - MButton badge / badgeColor → 用 MBadge 包裹按钮
1285
1286
 
1286
1287
 
1287
1288
  ---
@@ -1588,7 +1589,7 @@ This file is the **offline** mirror for agents without MCP.
1588
1589
  - v-model / modelValue
1589
1590
  - header + message
1590
1591
  - acceptLabel / rejectLabel
1591
- - acceptSeverity="danger" 用于删除
1592
+ - acceptColor="danger" 用于删除
1592
1593
 
1593
1594
  **Recipe · events**
1594
1595
 
@@ -1620,7 +1621,7 @@ This file is the **offline** mirror for agents without MCP.
1620
1621
  **Recipe · props**
1621
1622
 
1622
1623
  - v-model / modelValue
1623
- - message;acceptSeverity="danger" 按需
1624
+ - message;acceptColor="danger" 按需
1624
1625
  - target 锚定触发元素(或 position)
1625
1626
  - placement top|bottom|left|right
1626
1627
 
@@ -6,7 +6,7 @@ Canonical long form lives in project-root `DESIGN.md` when the AI config pack is
6
6
 
7
7
  1. **Components first** — layout, forms, tables, overlays use `M*` from `morya-ui`, not equivalent hand-rolled DOM.
8
8
  2. **Tokens first** — color, space, radius, shadow, motion via `--m-*`. No raw `#hex` / `rgb()` in page styles.
9
- 3. **Semantic actions** — primary work uses `MButton severity="primary"`; destructive uses `severity="danger"` or confirm dialogs.
9
+ 3. **Semantic actions** — primary work uses `MButton type="primary"`; destructive uses `danger` / `color="danger"` or confirm dialogs. Badge / Tag / Alert still use `severity`.
10
10
  4. **Accessibility** — fields have visible labels; icon buttons have `aria-label`; overlays dismiss with Esc (library default).
11
11
  5. **ConfigProvider** — wrap the app (or isolated demo) in `MConfigProvider` for locale, theme, density, overlay mount.
12
12
 
@@ -118,7 +118,7 @@ Inline style is acceptable for control widths (e.g. filter `width: 14rem`).
118
118
  2. `MPageHeader` (title + short description)
119
119
  3. `MTabs` with **`v-model` + `:tabs`** (not `:items` / `:value`)
120
120
  4. Per tab: `MPageSection variant="form"` + `MForm` + save in `variant="actions"`
121
- 5. Dangerous zone last: `severity="danger"` + confirm
121
+ 5. Dangerous zone last: `MButton danger` (or `color="danger"`) + confirm
122
122
 
123
123
  ## Wizard — block order
124
124
 
@@ -0,0 +1,50 @@
1
+ # Reference visual map (emergency only)
2
+
3
+ Use this **only when the user provides a screenshot, mock, URL, or “像 XX”**.
4
+ It is **not** a default style catalog. Without a reference, stay quieter ([style-presets.md](style-presets.md)).
5
+
6
+ Goal: translate visible traits into **`M*` + `--m-*`** moves. Prefer approximation over a second UI kit. Pixel-perfect art / custom illustrations are out of scope unless assets already exist in the project.
7
+
8
+ ## Conflict rule
9
+
10
+ | Situation | Do |
11
+ | --- | --- |
12
+ | No reference | Quiet flat / restrained Ops polish. Do not invent glass, neon, aurora, wash, or marketing heroes. |
13
+ | Reference shows a trait | Follow that trait with tokens/`M*`. Do not strip it to “look safer.” |
14
+ | Reference does **not** show a trait | Do not add it. |
15
+ | Trait cannot be 1:1 | Approximate; say so in `signature:` / delivery notes. |
16
+
17
+ ## Structure first (always)
18
+
19
+ Call MCP **`map_reference`** / `recommend_page({ brief })` for blocks (`filters`, `table`, `kpi`, `auth`, …).
20
+ This file only covers **visual traits** after structure mapping exists.
21
+
22
+ ## Trait → library move
23
+
24
+ | If you see… | Prefer… | Avoid… |
25
+ | --- | --- | --- |
26
+ | Soft tinted page background | Light `color-mix` wash on page shell from `--m-color-primary` / surface (small %) | Raw hex wash; stacked aurora meshes |
27
+ | Frosted / translucent cards | Semi-opaque `--m-color-surface` + border + soft `--m-shadow-*`; optional limited `backdrop-filter` only if clearly in the reference | Heavy multi-layer glass on every control |
28
+ | Soft elevated cards (no blur) | `MCard` / section surface + `--m-shadow-sm/md` + `--m-radius-md` | Extra nested cards for decoration only |
29
+ | Pill / capsule primary CTA | `MButton type="primary" shape="round"` — **one** in the main viewport | Multiple filled primaries |
30
+ | Quiet secondary actions | `MButton type="text"` / default outlined | Competing solid colors |
31
+ | Soft status / category chips | `MStatus` for state; `MTag` for labels; soft severity — not a row of solid blocks | Decorative `MTag` where `MStatus` belongs |
32
+ | Count on a control | Wrap host with `MBadge` | Invented `MButton badge` props |
33
+ | Left brand art + right form | `auth-split-shell` / Account split; art slot = project asset or simple token panel | Hand-rolled auth outside `MForm` |
34
+ | Empty state with illustration | `MEmpty` + `illustration` / `#illustration` when available; clear next action | Blank table with no empty |
35
+ | Dense admin table + filters | Ops block order + `list-filters-*` / `MTable`; keep chrome restrained even if reference is prettier | Marketing hero above CRUD |
36
+ | Dark chrome + bright chart accents | Dark theme tokens + restrained accent; charts are project/chart lib territory | Full-page neon glow stacks copied literally |
37
+ | Soft blue primary / lilac accents | Theme `--m-color-primary` (and related) overrides — not page-local hex soup | Second palette unrelated to tokens |
38
+
39
+ ## Delivery lines (required with a reference)
40
+
41
+ ```text
42
+ style: follow reference — <one short reading>
43
+ signature: <one visible cue you kept, e.g. round primary + light card elevation>
44
+ approx: <what you could not 1:1, if any>
45
+ ```
46
+
47
+ ## Fidelity bar
48
+
49
+ Match: block order, primary CTA role, density, status treatment, and **atmosphere that is clearly in the reference**.
50
+ Do not require: identical illustration artwork, identical blur strength, or non-`M*` chrome.
@@ -17,24 +17,38 @@
17
17
  ## Craft (all lanes — default pass)
18
18
 
19
19
  - [ ] Style direction resolved: followed user reference/description, or inferred from clear cues, or **asked** when uncertain — never silent invent; **no preset catalog**
20
- - [ ] Reference fidelity: `map_reference` mapping blocks present (filters/table/status/… as required)
21
- - [ ] Signature shell from `get_style_shells` when Account / Express / Flow need presence
20
+ - [ ] Reply states `style:` (and `signature:` when a richer reference exists)
21
+ - [ ] Default stays restrained when there is **no** reference (quiet flat / Ops polish)
22
22
  - [ ] Lane craft from [visual-craft.md](visual-craft.md) applied
23
23
  - [ ] If companions ran: still only `M*` + `--m-*`; no second kit ([optional-companions.md](optional-companions.md))
24
24
  - [ ] At most one primary filled button in the main viewport
25
25
  - [ ] Copy is domain-real; empty / error states say what to do next
26
26
  - [ ] Numeric table columns use `align: 'end'` + tabular nums when amounts/counts are shown
27
- - [ ] No AI-default look clusters unless the user/reference asked for them
28
- - [ ] No unearned atmosphere: stacked radial+linear washes, purple mesh, frosted glass, neon glow stacks
27
+ - [ ] No **unearned** AI-default look clusters (reference-visible atmosphere is allowed — see [style-presets.md](style-presets.md))
29
28
  - [ ] Motion (if any) is 1–3 intentional moments and follows `useMotion` / `data-m-motion`
30
29
  - [ ] Brand differences via theme `--m-*` overrides, not page hex
31
30
 
32
- ## Screenshot self-check (optional — when user gave a visual reference)
31
+ ## Reference fidelity (required when user gave a visual reference)
32
+
33
+ Structure:
34
+
35
+ - [ ] `map_reference` / `recommend_page({ brief })` mapping blocks present (filters/table/status/… as required)
36
+ - [ ] Same `brief` passed to `validate_page`; contract `ok`
37
+
38
+ Visual (use [reference-visual-map.md](reference-visual-map.md)):
39
+
40
+ - [ ] Atmosphere present in the reference was approximated (not stripped “to be safe”)
41
+ - [ ] Decorations **absent** from the reference were not invented
42
+ - [ ] Primary CTA role/shape roughly matches (e.g. round primary when the reference shows a pill)
43
+ - [ ] Density and status treatment roughly match
44
+ - [ ] Delivery notes include `style:` / `signature:` / `approx:` when needed
45
+
46
+ Screenshot self-check:
33
47
 
34
48
  1. Start the consumer app locally (Vite / Nuxt preview).
35
49
  2. Open the generated route; capture the first viewport.
36
- 3. Compare to the reference: block order, primary CTA, density, status treatment — not pixel-perfect chrome.
37
- 4. If blocks are missing, fix via snippets + re-run `validate_page({ brief })`.
50
+ 3. Compare to the reference on the bullets above — not pixel-perfect chrome or custom illustration art.
51
+ 4. If blocks or required atmosphere are missing, fix via snippets/tokens + re-run `validate_page({ brief })`.
38
52
 
39
53
  If Playwright / `webapp-testing` is available in the project, prefer an automated screenshot; otherwise a manual capture is enough.
40
54
  ## Ops
@@ -2,11 +2,21 @@
2
2
 
3
3
  Golden pages lock **block order and APIs**. They are **not** the only allowed look. There is **no** named style-preset table (`simple` / `glass` / …). Resolve the look from the **user**, then map onto `M*` + `--m-*`.
4
4
 
5
+ **Stance:** this skill stays **restrained by default**. Rich atmosphere is allowed when the user brings a reference or clear description — not as everyday invention.
6
+
7
+ ## Conflict rule (required)
8
+
9
+ | Case | Rule |
10
+ | --- | --- |
11
+ | **No reference** | Quieter flat / restrained Ops. Do not invent glass, neon, aurora, purple mesh, or marketing heroes. |
12
+ | **Has reference** | Follow traits **visible in the reference** (see [reference-visual-map.md](reference-visual-map.md)). Do not sanitize them away to “look safer.” Do not add decorations the reference lacks. |
13
+ | **Anti-defaults** | Apply only to **unearned** decoration (not present in user reference/description). |
14
+
5
15
  ## Resolution order (required)
6
16
 
7
17
  1. **User reference or explicit description (highest)**
8
18
  Screenshot / mock / existing page / URL / “像 XX”, or clear words (“毛玻璃一点”、“深蓝科技风”).
9
- **Must follow.** Remap to `--m-*` + `M*`. Do not switch kits, do not “improve” into another face.
19
+ **Must follow.** Remap to `--m-*` + `M*` via [reference-visual-map.md](reference-visual-map.md). Do not switch kits, do not “improve” into another face.
10
20
 
11
21
  2. **Clear prompt cues (when not explicit)**
12
22
  Industry / mood words in the brief → infer and **state your reading in one sentence**.
@@ -44,14 +54,23 @@ Pass `density` to `recommend_page` / `map_reference` — do not rely only on reg
44
54
 
45
55
  When the user provides a screenshot / mock / “像 XX”, call **`map_reference`** (or pass `brief` into `recommend_page`) with:
46
56
 
47
- - `description` — what you see (layout, density, primary CTA)
57
+ - `description` — what you see (layout, density, primary CTA, **atmosphere cues**)
48
58
  - `requiredBlocks` — e.g. `filters`, `table`, `status`, `kpi`, `auth`
49
59
  - `requiredComponents` — e.g. `Table`, `Status`
50
60
  - `density` / `primaryAction` when visible
51
61
 
52
- Then compose **only** via returned `mapping[].snippetId`. Pass the **same brief** to `validate_page` so missing blocks fail as contract issues.
62
+ Then compose structure via returned `mapping[].snippetId`, and map visual traits with [reference-visual-map.md](reference-visual-map.md). Pass the **same brief** to `validate_page` so missing blocks fail as contract issues. Run the **reference fidelity** checklist before delivery.
53
63
 
54
- ## Anti-defaults (unless user/reference asks)
64
+ In the reply, state:
65
+
66
+ ```text
67
+ style: follow reference — …
68
+ signature: …
69
+ ```
70
+
71
+ ## Anti-defaults (unearned only)
72
+
73
+ Block these when the **user/reference did not ask**:
55
74
 
56
75
  - Purple→indigo / aurora / mesh washes
57
76
  - Warm cream + serif + terracotta kit
@@ -59,6 +78,8 @@ Then compose **only** via returned `mapping[].snippetId`. Pass the **same brief*
59
78
  - Unsolicited glassmorphism, neon glow stacks, neumorph on dense tables
60
79
  - Companion “atmosphere” that overrides the user’s words
61
80
 
81
+ If the reference **shows** soft frosted cards or a tinted wash, reproducing a **tokenized approximation** is following the reference — not an anti-default violation.
82
+
62
83
  ## How to apply
63
84
 
64
85
  1. Map reference → snippets (`map_reference` / `recommend_page.referenceMapping`).
@@ -77,7 +77,7 @@ Ops beauty = alignment + semantics + restraint + the right `M*` for the job, **n
77
77
 
78
78
  ## Anti-default looks
79
79
 
80
- Unless the user **asks** or a reference **shows** them, do not use:
80
+ **Default is restrained.** Unless the user **asks** or a reference **shows** them, do not use:
81
81
 
82
82
  1. Cream + serif + terracotta
83
83
  2. Acid-green / dual neon on black
@@ -87,7 +87,8 @@ Unless the user **asks** or a reference **shows** them, do not use:
87
87
  6. Unsolicited glass, neumorph on dense tables, full-page gradients
88
88
  7. Stacked radial + linear “atmosphere” brand panels
89
89
 
90
- **Token gradients are not a free pass** — only when the user/reference asks.
90
+ **Token gradients are not a free pass** without user/reference ask.
91
+ If a **reference shows** frosted cards or a light tinted wash, a tokenized approximation is following the reference — see [reference-visual-map.md](reference-visual-map.md). Do not invent richer atmosphere beyond the reference.
91
92
 
92
93
  ## Shell recipes (token-only — defaults are flat)
93
94
 
@@ -7,7 +7,7 @@
7
7
 
8
8
  1. **组件优先**:交互与布局使用库内 `M*`,不手写等价 DOM。
9
9
  2. **令牌优先**:颜色、间距、圆角、阴影、动效使用 `--m-*`;禁止裸 `#hex` / `rgb()`(`scripts/check-raw-colors.mjs` 可扫描)。
10
- 3. **语义一致**:主操作 `severity="primary"`;破坏性操作用 `severity="danger"` 或确认。
10
+ 3. **语义一致**:主操作 `type="primary"`;破坏性操作用 `danger` / `color="danger"` 或确认。Badge / Tag / Alert 仍用 `severity`。
11
11
  4. **可访问性**:控件有可访问名称;仅图标的按钮带 `aria-label`;浮层可键盘关闭。
12
12
  5. **单一事实源**:组件 API 以 MCP / 文档为准,禁止臆造 prop、event、slot。
13
13