@morya-ui/setup 0.2.7 → 0.2.9

package/template/.agents/skills/morya-ui-pages/references/design-system.md

@@ -58,11 +58,13 @@ import 'morya-ui/styles.css'
 
 ## Data display
 
-- `MTable` with columns + data + `row-key`.
-- Row actions: text/link `MButton` or `MDropdown`.
+- `MTable` with `columns` + **`rows`** + `row-key` (default `id`). There is no `data` prop.
+- Row status → `MStatus`; categories / closable labels → `MTag`.
+- Row actions: text/link `MButton` or `MDropdown` (avoid a row of filled buttons).
 - Pagination: table `paginator` or sibling `MPagination`.
 - Empty states: `MEmpty` in `#empty` / Flow golden — never a silent blank table.
 - Terminal outcomes (success / 403 / 404 / 500): `MResult` — do not reuse `MEmpty` for errors.
+- Visual polish: [visual-craft.md](visual-craft.md) (Ops polish + atmosphere).
 
 ## Overlays
 
@@ -87,7 +89,7 @@ import 'morya-ui/styles.css'
 | Card radius | `--m-radius-md` |
 | Card shadow | `--m-shadow-md` |
 
-Full machine-readable set: project `design-tokens/tokens.json` (runtime truth remains `morya-ui/styles.css`).
+Full set: MCP `get_design_rules`. Runtime truth remains `morya-ui/styles.css`.
 
 ## Bans
 

package/template/.agents/skills/morya-ui-pages/references/feedback.md

@@ -8,7 +8,7 @@
 | --- | --- | --- | --- |
 | Message service | Top-centered one-liner | `message.success('已保存')` | Most CRUD results |
 | Toast service | Corner notice with `summary` + optional `detail` | `toast.success({ summary, detail })` | Extra explanation, job results |
-| `MMessage` | In-page bar, stays | `<MMessage severity="error">…</MMessage>` | Persistent form / auth errors |
+| `MMessage` | Optional host for the `message` service | `<MMessage />` | Custom `appendTo` / placement only. Not an inline alert |
 
 ## Decision tree
 
@@ -46,7 +46,7 @@ toast.success({
 ## Prefer `<MMessage>` / form-level errors
 
 - Field validation: component `invalid` / `errorMessage` (preferred).
-- Form-level persistent errors (login/auth): token-styled `role="alert"` bar as in `docs/golden-pages/login-page.vue`.
+- Form-level persistent errors (login/auth): token-styled `role="alert"` bar as in MCP `get_golden_page` `login-page`.
 - Note: `<MMessage>` today is primarily the **message service host** (`messages` / teleport). Do not invent a `severity` + default-slot Alert API unless docs add it.
 
 ```vue

package/template/.agents/skills/morya-ui-pages/references/optional-companions.md

@@ -1,28 +1,33 @@
 # Optional companions
 
-This skill is **standalone**. Distilled craft lives in [visual-craft.md](visual-craft.md). Companions are optional soft upgrades when already present in the consumer repo.
+This skill is **standalone**. Distilled craft lives in [visual-craft.md](visual-craft.md). Companions are optional soft upgrades installed by `@morya-ui/setup` (or already present in the repo).
 
 ## Conflict rule
 
 `morya-ui-pages` + project `DESIGN.md` + MCP APIs **override** companion advice whenever they disagree (component choice, tokens, Ops layout, feedback API).
 
-## How to combine
+## Install via setup
 
-| Installed companion | Safe use | Unsafe use |
-| --- | --- | --- |
-| `frontend-design` | Express / brand panel taste after surface + contract are fixed | Replacing Ops golden shell with a custom landing |
-| `impeccable` | Named passes (`audit`, `quieter`, …) aligned with [visual-craft.md](visual-craft.md) polish modes | Swapping `M*` for raw HTML controls or new token schema |
-| `ui-ux-pro-max` | Mood / industry keywords for Express | Adopting its React/shadcn/Flutter stack suggestions |
+```bash
+# Interactive (TTY): toggle optional skills
+npx @morya-ui/setup ai
 
-Suggested prompt glue:
+# Non-interactive
+npx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design,fixing-accessibility
+npx @morya-ui/setup ai --skills=all
+```
 
-> Follow morya-ui-pages for surface, components, and tokens. Optionally apply \<companion\> only for visual taste on Express sections; remediate with M* and --m-*.
+| Companion | Safe use | Unsafe use |
+| --- | --- | --- |
+| `frontend-design` | Express / brand panel taste after surface + contract are fixed | Replacing Ops golden shell or introducing a second UI kit |
+| `fixing-accessibility` | Names, keyboard, focus, form errors on top of `M*` | Replacing library dialogs/menus with custom ARIA widgets |
+| `impeccable` (if present locally) | Named polish passes aligned with [visual-craft.md](visual-craft.md) | New token schema or swapping `M*` for raw HTML controls |
 
 ## Load budget
 
-- Default: **this skill only**
-- Max: this skill + **one** companion
-- Broad redesign review: this skill + impeccable-style `audit` (or the real skill if installed) — still one companion
+- Default: **morya-ui-pages only**
+- Max: pages + **one** optional companion for a given task
+- Broad redesign review: pages + accessibility pass, or pages + one visual companion — still prefer one companion at a time
 
 ## If companions are absent
 

package/template/.agents/skills/morya-ui-pages/references/page-layouts.md

@@ -1,30 +1,38 @@
 # Page layouts
 
-When generating a full page, pick a type and **mirror the golden-page block order**. Prefer project files when present:
+When generating a full page, pick a type and **mirror the golden-page block order**. Source: MCP `get_golden_page`.
 
-| Type | Golden page | Runnable example |
-| --- | --- | --- |
-| List | `docs/golden-pages/list-page.vue` | `src/examples/ListPageExample.vue` |
-| Form | `docs/golden-pages/form-page.vue` | `src/examples/FormPageExample.vue` |
-| Dashboard | `docs/golden-pages/dashboard-page.vue` | `src/examples/DashboardPageExample.vue` |
-| Login | `docs/golden-pages/login-page.vue` | `src/examples/LoginPageExample.vue` |
-| Landing | `docs/golden-pages/landing-page.vue` | `src/examples/LandingPageExample.vue` |
-| Empty | `docs/golden-pages/empty-state.vue` | `src/examples/EmptyStateExample.vue` |
+| Type | `get_golden_page` id |
+| --- | --- |
+| List | `list-page` |
+| Form | `form-page` |
+| Dashboard | `dashboard-page` |
+| Login | `login-page` |
+| Landing | `landing-page` |
+| Empty | `empty-state` |
 
 Via MCP: `recommend_page` → `get_golden_page`; local edits: `get_page_snippet` (`filters`, `toolbar`, `form-actions`, `scrollable-panel`, …).
 
+## Product defaults
+
+- **Short create/edit** (about ≤8 fields, single section): same-page `MDialog` + `MForm` — do not invent a new route form for every entity.
+- **Long / multi-section / wizard**: dedicated form page (`form-page`) or `MDrawer`.
+- **One-line success/error**: `message` API; title + detail or async notify → `toast` (see [feedback.md](feedback.md)).
+
 ## List page — block order
 
 1. `MLayout fillViewport` + optional `MLayoutSider bordered`
-2. Sider `MMenu`
+2. Sider `MMenu` (**every item has `icon`**)
 3. `MLayoutHeader` → `MBreadcrumb`
 4. `MLayoutContent` → `MPageContent`
-5. `MPageFilters` — inner `MSpace` + Input/Select + query/reset
-6. `MPageToolbar` — title + `#actions` primary action
-7. `MTable` directly in content (usually **no** wrapping `MCard`)
+5. `MPageFilters` — inner `MSpace wrap` + Input/Select + query/reset (search ~`14rem`, select ~`10–12rem`)
+6. `MPageToolbar` — title + `#actions` primary action (**one** filled primary)
+7. `MTable` directly in content (usually **no** wrapping `MCard`); status → `MStatus`; `#empty` → `MEmpty`
 8. Pagination via `MTable` paginator or sibling `MPagination`
 9. Short create/edit → `MDialog` + `MForm` on the same page (default)
 
+Craft: [visual-craft.md](visual-craft.md) § Ops polish.
+
 ## Form page — block order
 
 1. `MLayout fillViewport` → `MLayoutHeader` → `MBreadcrumb`
@@ -36,9 +44,11 @@ Via MCP: `recommend_page` → `get_golden_page`; local edits: `get_page_snippet`
 ## Dashboard — block order
 
 1. `MLayout fillViewport` → `MLayoutHeader` → `MBreadcrumb`
-2. `MPageContent density="spacious"` → `MPageHeader`
-3. KPI row: `MGrid` + `MPageStat` (4 columns or responsive)
-4. Main split: `MCard` + `MPagePlaceholder` and/or recent `MTable`
+2. `MPageContent density="spacious"` → `MPageHeader` (title + short domain description when useful)
+3. KPI row: `MGrid` + `MPageStat` (4 columns or responsive) — real metric names, not “Metric 1”
+4. Main split: `MCard` + `MPagePlaceholder` and/or recent `MTable` (row status → `MStatus`)
+
+Craft: spacious density + Ops polish; do not turn the first viewport into a marketing hero.
 
 ## Composition standards
 

package/template/.agents/skills/morya-ui-pages/references/review-checklist.md

@@ -7,25 +7,37 @@
 - [ ] `MConfigProvider` at a sensible root when building a full screen
 - [ ] No invented props / events / slots (MCP or docs checked)
 - [ ] Select vs Dropdown roles correct
+- [ ] `MTable` uses `rows` (not `data`)
 - [ ] One-line results use `message`; summary+detail / async use `toast`
 - [ ] Destructive flows use confirm dialogs
 
+## Craft (all lanes — default pass)
+
+- [ ] Lane craft from [visual-craft.md](visual-craft.md) applied (Ops polish and/or atmosphere)
+- [ ] At most one primary filled button in the main viewport
+- [ ] Copy is domain-real; empty / error states say what to do next
+- [ ] No AI-default look clusters unless the brief asked for them
+- [ ] Motion (if any) is 1–3 intentional moments and respects `prefers-reduced-motion`
+
 ## Ops
 
 - [ ] Matches golden / [page-layouts.md](page-layouts.md) block order
 - [ ] `MPage*` used instead of ad-hoc page chrome where applicable
 - [ ] Tables not wrapped in decorative `MCard` solely for borders
 - [ ] Filters / toolbar / form actions follow documented patterns
+- [ ] Sider `MMenu` items have icons; status cells use `MStatus` (not decorative `MTag`)
+- [ ] Empty table uses `MEmpty` (or equivalent next-action empty)
 - [ ] No marketing hero bolted onto a CRUD shell
 
 ## Account / Flow / System
 
 - [ ] Primary CTA obvious; escape paths present (back / home / support)
-- [ ] Auth errors persistent via `<MMessage>` or field errors where appropriate
+- [ ] Auth errors stay on the form via field `errorMessage` or a token `role="alert"` (`<MMessage>` is the message host, not an inline alert)
 - [ ] Empty uses `MEmpty` (or table `#empty` with `MEmpty`); success / HTTP errors use `MResult`
 - [ ] Empty / success states tell the user the next action
 - [ ] Inline status prefers `MStatus`; chip-like labels use `MTag`
 - [ ] Wizard steps: one job each; actions labeled clearly
+- [ ] Brand / empty atmosphere uses token-only CSS (see visual-craft recipes)
 
 ## Express
 
@@ -37,7 +49,7 @@
 
 ## Tokens, a11y, responsive
 
-- [ ] No raw hex/rgb theme colors in new CSS (control widths OK inline)
+- [ ] No raw hex/rgb theme colors in new CSS (control widths OK inline; `color-mix` from `--m-*` OK)
 - [ ] Labels visible; icon buttons have `aria-label`
 - [ ] Usable on a narrow viewport
 - [ ] Focus visible on interactive elements

package/template/.agents/skills/morya-ui-pages/references/surfaces.md

@@ -17,7 +17,7 @@ Pick a lane, then a surface. Prefer project golden pages for **Ops**; use the re
 
 | Surface | Job | Recipe |
 | --- | --- | --- |
-| Login / register | Authenticate with trust | Golden: `docs/golden-pages/login-page.vue` — split brand + `MForm` (`MInput`, `MInputPassword`); form-level errors via token `role="alert"` (not Toast) |
+| Login / register | Authenticate with trust | Golden: MCP `get_golden_page` `login-page` — split brand + `MForm` (`MInput`, `MInputPassword`); form-level errors via token `role="alert"` (not Toast). Brand wash: [visual-craft.md](visual-craft.md) § Atmosphere |
 | Invite / accept | Join org | Same shell; show org name clearly |
 | Forgot / reset | Recover access | Short form + success state with next step |
 | Profile / account | Edit self | Settings-like sections; avatar via `MAvatar` |
@@ -28,7 +28,7 @@ Keep credential forms quiet: one primary CTA, clear labels, no decorative noise
 
 | Surface | Job | Recipe |
 | --- | --- | --- |
-| Empty state | Invite first action | Golden: `docs/golden-pages/empty-state.vue` — `MEmpty` + primary/secondary `MButton` in `#extra` |
+| Empty state | Invite first action | Golden: MCP `get_golden_page` `empty-state` — `MEmpty` + primary/secondary `MButton` in `#extra`; dashed shell + radial wash from visual-craft |
 | Onboarding | Teach the product path | `MStepper` or paced cards; one decision per step; finish → Ops home |
 | Wizard | Multi-step create | `MStepper` + `MForm` per step + sticky actions (`上一步` / `下一步` / `提交`) |
 | Success / result | Confirm completion | `MResult` (`status="success"` / `error` …) + next actions (`查看详情` / `返回列表`) |
@@ -41,7 +41,7 @@ Copy must tell the user **what to do next**, not celebrate the system.
 | --- | --- | --- |
 | 404 / not found | Reorient | `MResult status="404"` + `返回首页` / `返回上一页` |
 | Permission denied | Explain + escape | `MResult status="403"` + request access / switch account / go home |
-| Maintenance / error | Honest status | `MResult status="500"` or persistent `<MMessage>` banner; what happened + retry + support |
+| Maintenance / error | Honest status | `MResult status="500"`; what happened + retry + support. Persistent form errors: field `errorMessage` or a token `role="alert"`, not `<MMessage>` as an alert |
 
 Avoid witty 404 essays that hide the exit paths.
 
@@ -51,7 +51,7 @@ Use when the brief is landing, pricing, launch, or docs marketing — **not** fo
 
 | Surface | Job | Recipe |
 | --- | --- | --- |
-| Landing | Convert / explain product | Golden: `docs/golden-pages/landing-page.vue` — one-job hero; CTAs → `MButton`; chips → `MTag`; FAQ → `MAccordion` |
+| Landing | Convert / explain product | Golden: MCP `get_golden_page` `landing-page` — one-job hero; CTAs → `MButton`; chips → `MTag`; FAQ → `MAccordion` |
 | Pricing | Choose a plan | Clear plan cards (`MCard`) + primary CTA; highlight recommended plan without clutter |
 | Feature showcase | Prove capability | Alternating media/copy; live `M*` demo only if lightweight |
 | Docs marketing chrome | Frame documentation | Header + nav using `M*` where suitable; content area stays readable |

package/template/.agents/skills/morya-ui-pages/references/visual-craft.md

@@ -4,11 +4,13 @@ Portable craft for morya-ui consumers. Inspired by **Frontend Design**, **Impecc
 
 ## When to lean on craft
 
-| Lane | Craft intensity |
-| --- | --- |
-| Ops CRUD | Low — clarity, density, golden structure |
-| Account / Flow / System | Medium — trust, hierarchy, one calm brand cue |
-| Express | High — design plan + one signature risk |
+| Lane | Craft intensity | Default pass |
+| --- | --- | --- |
+| Ops CRUD | Low — clarity, density, golden structure | **Always** run § Ops polish |
+| Account / Flow / System | Medium — trust, hierarchy, one calm brand cue | **Always** run § Atmosphere recipes when relevant |
+| Express | High — design plan + one signature risk | **Always** run design plan + anti-defaults |
+
+Do **not** skip craft because the page is “just admin”. Polished Ops is quiet, aligned, and specific — not decorative.
 
 ## Design plan (Express & branded moments)
 
@@ -21,6 +23,23 @@ Before code, decide:
 
 Critique the plan: if it looks like the plan you would write for *any* SaaS, revise until it fits **this** subject.
 
+## Ops polish (default — every Ops page)
+
+Apply after the golden block order is correct. These are **required**, not optional taste:
+
+1. **One primary** — exactly one filled `severity="primary"` in the main viewport (usually toolbar create / form save). Query can be primary; reset stays secondary.
+2. **Sider icons** — every top-level `MMenu` item has an `icon`; icons come from one set (built-in Tabler names). No random emoji.
+3. **Status cells** — row business state → `MStatus` (dot + label). `MTag` only for categories, filters, or closable chips.
+4. **Row actions** — secondary `text` / `outlined` / `size="small"`; danger only on destructive. Prefer `MSpace` with a consistent gap; avoid a wall of filled buttons.
+5. **Filter rhythm** — search ~`14rem`, compact selects ~`10–12rem`; wrap with `MSpace wrap`. Do not stretch filters full-bleed.
+6. **Empty is designed** — `MEmpty` (or table `#empty` with `MEmpty`) with a next action; never a silent blank table or a lone muted sentence.
+7. **No extra cards** — do not wrap `MPageFilters` / `MTable` in decorative `MCard` “for polish”. Dashboard chart/detail modules may use `MCard`.
+8. **Domain copy** — column labels, placeholders, and empty titles use product vernacular, not “Name / Status / No data”.
+9. **Density** — prefer theme default; use `size="small"` on dense tables inside cards. Do not invent a second spacing scale.
+10. **Quiet chrome** — breadcrumb + toolbar title are enough hierarchy; skip marketing heroes, pill-stat strips, and glow on Ops shells.
+
+Ops beauty = **alignment + semantics + restraint**, not gradients.
+
 ## Anti-default looks (AI clusters)
 
 Avoid spending free axes on these unless the brief asks:
@@ -41,6 +60,99 @@ Also avoid: Inter/Roboto/Arial as the *expressive* display choice on Express sur
 - **Motion**: orchestrate 2–3 intentional moments max; respect `prefers-reduced-motion`. Prefer transform/opacity over layout thrash.
 - **Density**: Ops may be compact; Express needs breathing room — match the lane.
 
+## Atmosphere recipes (token-only)
+
+Copy patterns, remap brand copy. **No hex.** Prefer `color-mix` / gradients from `--m-*`. See golden pages `login-page`, `landing-page`, `empty-state`.
+
+### Account — split brand panel
+
+```css
+.login-brand {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: var(--m-space-4);
+  padding: clamp(2rem, 6vw, 4.5rem);
+  background:
+    radial-gradient(
+      80% 60% at 10% 20%,
+      color-mix(in srgb, var(--m-color-primary) 22%, transparent),
+      transparent 55%
+    ),
+    linear-gradient(
+      165deg,
+      color-mix(in srgb, var(--m-color-primary) 16%, var(--m-color-surface)) 0%,
+      var(--m-color-surface) 55%,
+      color-mix(in srgb, var(--m-color-border) 35%, var(--m-color-surface)) 100%
+    );
+  border-right: 1px solid var(--m-color-border);
+}
+.login-brand__title {
+  margin: 0;
+  max-width: 12em;
+  font-size: clamp(2rem, 4vw, 3rem);
+  font-weight: 650;
+  line-height: 1.15;
+  letter-spacing: -0.03em;
+}
+```
+
+Form side stays calm: one panel ~`22rem`, token `role="alert"` for form-level errors (not Toast, not `<MMessage severity>`).
+
+### Express — hero plane
+
+Full-bleed thesis: brand mark (small) → one headline → one lead → CTA group → **one** dominant visual (timeline, product artifact, or edge-to-edge wash). Atmosphere:
+
+```css
+.landing-hero__visual {
+  margin-top: var(--m-space-5);
+  padding: var(--m-space-5);
+  border: 1px solid var(--m-color-border);
+  border-radius: var(--m-radius-md);
+  background:
+    linear-gradient(
+      135deg,
+      color-mix(in srgb, var(--m-color-primary) 12%, var(--m-color-surface)),
+      var(--m-color-surface) 60%
+    );
+}
+```
+
+Optional micro-motion (one signature only):
+
+```css
+@media (prefers-reduced-motion: no-preference) {
+  .landing-hero__track span {
+    animation: m-craft-fade-up 480ms ease both;
+  }
+  .landing-hero__track span:nth-child(2) { animation-delay: 60ms; }
+  .landing-hero__track span:nth-child(3) { animation-delay: 120ms; }
+  .landing-hero__track span:nth-child(4) { animation-delay: 180ms; }
+}
+@keyframes m-craft-fade-up {
+  from { opacity: 0; transform: translateY(0.4rem); }
+  to { opacity: 1; transform: translateY(0); }
+}
+```
+
+### Flow — empty state shell
+
+```css
+.empty-state-shell {
+  border: 1px dashed color-mix(in srgb, var(--m-color-border) 80%, var(--m-color-primary));
+  border-radius: var(--m-radius-md);
+  background:
+    radial-gradient(
+      120% 80% at 50% 0%,
+      color-mix(in srgb, var(--m-color-primary) 10%, transparent),
+      transparent 55%
+    ),
+    var(--m-color-surface);
+}
+```
+
+Pair with `MEmpty` + primary next step + optional secondary text button. One memory cue (icon / wash) — no emoji collage.
+
 ## UX writing
 
 - Name controls by user intent (`保存更改`), not system guts (`提交表单实体`).
@@ -51,7 +163,9 @@ Also avoid: Inter/Roboto/Arial as the *expressive* display choice on Express sur
 
 ## Polish modes (Impeccable-inspired)
 
-When the user asks to improve an existing surface, pick a mode:
+**Default:** after compose, run a lane-appropriate light pass (§ Ops polish and/or atmosphere).
+
+When the user asks to improve an existing surface, pick a named mode:
 
 | Mode | Intent |
 | --- | --- |
@@ -81,3 +195,4 @@ For Express briefs that only say “modern / professional / playful”:
 - Keyboard reaches primary actions
 - No raw theme colors that break dark mode when the app supports it
 - Icons decorative vs informative handled correctly (`aria-hidden` vs `aria-label`)
+- Craft pass completed for the lane (Ops polish and/or atmosphere) before delivery

package/template/.cursor/rules/component-usage.mdc

@@ -17,13 +17,13 @@ import { MButton, MInput } from 'morya-ui'
 ## 必选模式
 
 - 表单：`MForm` + `MFormItem` + 字段组件；提交用 `@submit` + `type="submit"`。
-- 表格：`MTable` 的 `columns` + `data` + `row-key`；单元格用 `#cell-{key}` 插槽。
+- 表格：`MTable` 的 `columns` + `rows` + `row-key`；单元格用 `#cell-{key}` 插槽。没有 `data` prop。
 - 浮层：详情/编辑 `MDialog`；侧栏 `MDrawer`；删除确认 `MConfirmDialog`。
 - 反馈（**默认 Message**）：
   - 单行操作结果 → `message.success/info/warn/error('…')`
   - 有标题 + 详情 / 异步通知 → `toast.*({ summary, detail })`
-  - 表单区常驻错误 → `<MMessage>` 或字段 `errorMessage`
-  - 详见 `docs/feedback-message-vs-toast.md`
+  - 表单区常驻错误 → 字段 `errorMessage`，或 token 样式的 `role="alert"`（`<MMessage>` 只是 message 宿主，不是内嵌 Alert）
+  - 详见 skill `references/feedback.md`
 
 ## Props 约定
 
@@ -38,4 +38,4 @@ import { MButton, MInput } from 'morya-ui'
 - 用 `MDropdown` 代替 Select 做枚举选择。
 - 手写 table/modal 替代 `MTable` / `MDialog`。
 
-完整清单：`docs/components.md`
+完整清单：MCP，或 skill `references/component-index.md`

package/template/.cursor/rules/design-system.mdc

@@ -1,17 +1,17 @@
 ---
-description: Morya UI 设计系统第一信源。生成或修改 UI 前必读 DESIGN.md 与 design-tokens。
+description: Morya UI 设计系统第一信源。生成或修改 UI 前必读 DESIGN.md。
 alwaysApply: true
 ---
 
 # Morya UI 设计系统
 
-1. **先读** 项目根目录 `DESIGN.md`，再读 `docs/components.md`。
+1. **先读** 项目根目录 `DESIGN.md`。组件选型用 MCP，或 skill `references/component-index.md`。
 2. **只用** `morya-ui` 的 `M*` 组件；全局样式 `morya-ui/styles.css`。
 3. **颜色/间距/圆角** 使用 `--m-*` CSS 变量，禁止裸 hex/rgb（见 `scripts/check-raw-colors.mjs`）。
-4. **页面结构** 对齐 `docs/golden-pages/`（列表 / 表单 / 仪表盘 / 登录 / 落地 / 空状态），不要发明新布局范式。
+4. **页面结构** 用 MCP `get_golden_page`（`list-page` / `form-page` / `dashboard-page` / `login-page` / `landing-page` / `empty-state`），不要发明新布局范式。
 5. **表单选项** 用 `MSelect` / `MTreeSelect`；**动作菜单** 用 `MDropdown`。
 6. 不确定 API 时查文档站或 MCP，**禁止臆造 prop**。
 7. 根节点用 `MConfigProvider`；后台布局用 `MLayout` 系列。
-8. **操作反馈默认 `message` API**；仅 `summary + detail` 或异步通知用 `toast`；表单常驻错误用 `<MMessage>`。见 `docs/feedback-message-vs-toast.md`。
+8. **操作反馈默认 `message` API**；仅 `summary + detail` 或异步通知用 `toast`；表单常驻错误用字段 `errorMessage` 或 token 样式的 `role="alert"`（`<MMessage>` 只是 message 宿主）。见 skill `references/feedback.md`。
 
-Token 参考：`design-tokens/tokens.json`
+Token 参考：MCP `get_design_rules`（运行时以 `morya-ui/styles.css` 为准）

package/template/.cursor/rules/page-layout.mdc

@@ -7,14 +7,14 @@ alwaysApply: false
 
 生成完整页面时，先确定类型并 **复制黄金样例结构**：
 
-| 类型 | 模板 |
+| 类型 | MCP `get_golden_page` |
 | --- | --- |
-| 列表页 | `docs/golden-pages/list-page.vue` |
-| 表单页 | `docs/golden-pages/form-page.vue`（仅长表单 / 独立配置页） |
-| 仪表盘 | `docs/golden-pages/dashboard-page.vue` |
-| 登录页 | `docs/golden-pages/login-page.vue` |
-| 营销落地 | `docs/golden-pages/landing-page.vue` |
-| 空状态 | `docs/golden-pages/empty-state.vue` |
+| 列表页 | `list-page` |
+| 表单页 | `form-page`（仅长表单 / 独立配置页） |
+| 仪表盘 | `dashboard-page` |
+| 登录页 | `login-page` |
+| 营销落地 | `landing-page` |
+| 空状态 | `empty-state` |
 
 ## 列表内新建 / 编辑（默认）
 
@@ -69,5 +69,3 @@ alwaysApply: false
 - 整页：`recommend_page` → `get_golden_page` → `get_design_rules`
 - 局部：`get_page_snippet`（如 `filters` / `toolbar` / `form-actions` / `scrollable-panel`）
 - 可选：`validate_page`（参考建议，不阻断）
-
-引用可运行示例：`src/examples/*PageExample.vue`

package/template/DESIGN.md

@@ -1,98 +1,25 @@
 # Morya UI 设计系统（AI 第一信源）
 
-> 基于 `morya-ui` v0.2.6。生成或审查业务页面时，**必须先遵守本文**，再查阅 `docs/components.md` 与 `docs/golden-pages/`。
+> 生成或审查使用 `morya-ui` 的界面时，**必须先遵守本文**。  
+> 本文只写与页面类型无关的契约。某一类页面怎么拼、用哪个组件，见 `morya-ui-pages` skill 与 MCP，不要从本文推断出唯一布局。
 
 ## 1. 设计原则
 
-1. **组件优先**：布局、表单、表格、浮层一律使用库内 `M*` 组件，不手写等价 DOM 结构。
-2. **令牌优先**：颜色、间距、圆角、阴影、动效使用 `--m-*` CSS 变量；禁止裸 `#hex` / `rgb()`（`scripts/check-raw-colors.mjs` 会扫描）。
-3. **语义一致**：主操作 `MButton` `severity="primary"`；危险操作用 `severity="danger"` 或 `MConfirmDialog`。
-4. **可访问性**：表单控件带 `label`；图标按钮带 `aria-label`；浮层可 Esc 关闭（组件默认支持）。
-5. **ConfigProvider 包裹**：应用根节点使用 `MConfigProvider`，统一 locale、主题、密度、浮层挂载。
+1. **组件优先**：交互与布局使用库内 `M*`，不手写等价 DOM。
+2. **令牌优先**：颜色、间距、圆角、阴影、动效使用 `--m-*`；禁止裸 `#hex` / `rgb()`（`scripts/check-raw-colors.mjs` 可扫描）。
+3. **语义一致**：主操作 `severity="primary"`；破坏性操作用 `severity="danger"` 或确认。
+4. **可访问性**：控件有可访问名称；仅图标的按钮带 `aria-label`；浮层可键盘关闭。
+5. **单一事实源**：组件 API 以 MCP / 文档为准，禁止臆造 prop、event、slot。
 
-## 2. 应用骨架
+## 2. 应用根
 
-```vue
-<script setup lang="ts">
-import { MConfigProvider, zhCN } from 'morya-ui'
-import 'morya-ui/styles.css'
-</script>
+- 入口引入 `morya-ui/styles.css`（或按需子路径样式）。
+- 应用根使用 `MConfigProvider`，统一 locale、主题、密度与浮层挂载。
+- 外壳随场景选择，不要把侧栏后台当成所有页面的默认结构。
 
-<template>
-  <MConfigProvider :locale="zhCN">
-    <MLayout has-sider fill-viewport>
-      <MLayoutSider bordered>
-        <MMenu
-          :model="[
-            { key: 'users', label: '用户管理', icon: 'user', to: '/users' },
-            { key: 'roles', label: '角色管理', icon: 'shield', to: '/roles' },
-          ]"
-        />
-      </MLayoutSider>
-      <MLayout>
-        <MLayoutHeader>...</MLayoutHeader>
-        <MLayoutContent>...</MLayoutContent>
-      </MLayout>
-    </MLayout>
-  </MConfigProvider>
-</template>
-```
+## 3. 设计令牌（摘要）
 
-- 管理后台：`MLayout fillViewport` + `MLayoutSider` + `MLayoutHeader` + `MLayoutContent`
-- 侧栏导航：`MMenu`
-- 页面内容堆叠：`MPageContent`（内置于 `MLayoutContent`）
-- 列表筛选 / 工具栏：`MPageFilters` + `MPageToolbar`
-- 表单引导 / 表面：`MPageHeader` + `MPageSection variant="form|actions"`
-- 仪表盘 KPI / 占位：`MPageStat` + `MPagePlaceholder`
-- 其他分区：`MCard`（图表/明细模块）/ `MPanel` / `MFieldset`
-- 栅格：`MGrid` + `MGridItem` 或 `MFlex` + `MSpace`
-
-## 3. 页面类型与黄金样例
-
-| 类型 | 参考文件 | 必备区块 |
-| --- | --- | --- |
-| 列表页 | `docs/golden-pages/list-page.vue` | 面包屑、筛选区、工具栏、表格、分页 |
-| 表单页 | `docs/golden-pages/form-page.vue` | 面包屑、分组表单、`MForm` / `MFormItem`、提交/取消 |
-| 仪表盘 | `docs/golden-pages/dashboard-page.vue` | 统计卡片栅格、图表区占位、快捷入口 / 最近列表 |
-| 登录页 | `docs/golden-pages/login-page.vue` | 品牌区 + `MForm` / `MInputPassword`；表单级错误用 token 告警条 |
-| 营销落地 | `docs/golden-pages/landing-page.vue` | 单任务首屏、分节、`MButton` / `MTag` / `MAccordion` |
-| 空状态 | `docs/golden-pages/empty-state.vue` | `MEmpty` + 说明 + 主 CTA；可嵌列表 `#empty` |
-
-生成 **Ops** 页面时：结构对齐对应黄金样例，用 `MPage*` 拼装，尽量少写 scoped CSS。  
-生成 **Account / Express / Flow** 页面时：对齐上表样例；允许有节制的 scoped 布局，但颜色/间距仍用 `--m-*`。
-
-## 4. 表单约定
-
-- 使用 `MForm` + `MFormItem`，`name` 与校验规则对应。
-- **从列表新建/编辑（字段约 ≤8、单段表单）默认用 `MDialog` + `MForm`，不要为每个实体再开独立路由表单页。**
-- 多分组、长流程、向导式录入再用独立表单页（`docs/golden-pages/form-page.vue`）或 `MDrawer`。
-- 字段组件自带 `label` / `invalid` / `helpText` 时优先用组件 prop（如 `MInput`、`MSelect`），复杂表单再用 `MFormItem` 包一层。
-- 尺寸：默认 medium；密集后台可 `size="small"` 或 ConfigProvider `globalDensity`。
-- 宽度：筛选项 `fluid` 慎用；独立表单页主栏 `max-width: 40rem` 左右。
-
-## 5. 数据展示
-
-- 表格：`MTable` + 列定义；行操作放 `MButton` text/link 或 `MDropdown`。
-- 分页：`MPagination` 与表格同级，右对齐或居中。
-- 空态：表格 `emptyMessage` 或自定义 `#empty` 插槽；禁止空白区域无提示。
-
-## 6. 浮层与反馈
-
-| 场景 | 组件 |
-| --- | --- |
-| 确认删除 | `MConfirmDialog` 或 `MConfirmPopup` |
-| 详情 / 编辑弹窗 | `MDialog` |
-| 侧滑筛选 / 详情 | `MDrawer` |
-| **操作结果（默认）** | **`message` API**（单行：已保存 / 已删除） |
-| 标题 + 详情 / 异步通知 | `toast` API（`summary` + `detail`） |
-| 表单区常驻错误 | token 告警条 / 字段 `errorMessage` |
-| 字段说明 | `MTooltip` |
-
-**选型细则见 [`docs/feedback-message-vs-toast.md`](docs/feedback-message-vs-toast.md)。AI 生成代码时：无 `detail` 的操作回执一律用 `message`，不要默认 Toast。**
-
-## 7. 设计令牌（摘要）
-
-完整定义见 `design-tokens/tokens.json`。
+完整定义见 MCP `get_design_rules`。运行时以已安装的 `morya-ui/styles.css` 为准。
 
 | 用途 | 变量 |
 | --- | --- |
@@ -103,29 +30,25 @@ import 'morya-ui/styles.css'
 | 品牌 / 链接 | `--m-color-primary` |
 | 错误 | `--m-color-danger` |
 | 区块间距 | `--m-space-4` / `--m-space-6` |
-| 卡片圆角 | `--m-radius-md` |
-| 卡片阴影 | `--m-shadow-md` |
+| 圆角 / 阴影 | `--m-radius-md` / `--m-shadow-md` |
 
-## 8. 禁止项
+## 4. 禁止项
 
-- 禁止引入第二套 UI 库混用同一页面。
-- 禁止在业务 CSS 中写死主题色；暗色模式必须能随 `[data-theme="dark"]` 生效。
-- 禁止用 `<div onclick>` 代替 `<button>` / `MButton`。
-- 禁止 Select 与 Dropdown 混用：选项选择用 `MSelect` / `MTreeSelect`；动作菜单用 `MDropdown`。
-- 禁止跳过 `import 'morya-ui/styles.css'`。
+- 禁止同一界面混用第二套 UI 库。
+- 禁止业务 CSS 写死主题色；暗色须能随 `[data-theme="dark"]` 生效。
+- 禁止用不可聚焦的容器冒充按钮。
+- 禁止跳过样式入口。
+- 禁止把某一类页面的配方写成所有页面的默认结构。
 
-## 9. AI 工作流
+## 5. AI 工作流
 
-1. 读本文 → 确定页面类型（列表 / 表单 / 仪表盘）。
-2. 打开对应 `docs/golden-pages/*.vue` 与 `src/examples/*.vue`。
-3. 查 `docs/components.md` 选型。
-4. 不确定 API 时查文档站或 MCP，**不要臆造 prop 名**。
-5. 完成后运行 `pnpm check:colors`（若已配置）。
-6. 操作反馈见 `docs/feedback-message-vs-toast.md`：**默认 `message`，有 detail 才用 `toast`**。
+1. 读本文，确认契约。
+2. 加载 `morya-ui-pages`，由 skill 选定表面与布局；可选 companion 只补充视觉或无障碍，冲突时本文 + skill + MCP 优先。
+3. 用 MCP 查真实 API 与样例后再写代码。
+4. 完成后可运行 `pnpm check:colors`（若已配置）。
 
-## 10. 相关资源
+## 6. 相关资源
 
-- 包入口：`morya-ui`
-- 全局样式：`morya-ui/styles.css`
-- 按需引入：`morya-ui/button` 等 + 对应 `style`
-- 主题 API：`useTheme` / `useDensity` / `useMotion`（同包导出）
+- 包：`morya-ui` · 样式：`morya-ui/styles.css`
+- 页面配方：`.agents/skills/morya-ui-pages/`（及 setup 时勾选的 companion）
+- 主题 API：`useTheme` / `useDensity` / `useMotion`