@morya-ui/setup 0.3.2 → 0.3.4

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

@@ -1,100 +1,101 @@
-# Design system (consumer summary)
-
-Canonical long form lives in project-root `DESIGN.md` when the AI config pack is merged. This file is the portable subset for agents.
-
-## Principles
-
-1. **Components first** — layout, forms, tables, overlays use `M*` from `morya-ui`, not equivalent hand-rolled DOM.
-2. **Tokens first** — color, space, radius, shadow, motion via `--m-*`. No raw `#hex` / `rgb()` in page styles.
-3. **Semantic actions** — primary work uses `MButton severity="primary"`; destructive uses `severity="danger"` or confirm dialogs.
-4. **Accessibility** — fields have visible labels; icon buttons have `aria-label`; overlays dismiss with Esc (library default).
-5. **ConfigProvider** — wrap the app (or isolated demo) in `MConfigProvider` for locale, theme, density, overlay mount.
-
-## App shell
-
-```vue
-<script setup lang="ts">
-import { MConfigProvider, zhCN } from 'morya-ui'
-import 'morya-ui/styles.css'
-</script>
-
-<template>
-  <MConfigProvider :locale="zhCN">
-    <MLayout fill-viewport has-sider>
-      <MLayoutSider bordered>
-        <MMenu
-          :model="[
-            { key: 'users', label: 'Users', icon: 'user', to: '/users' },
-            { key: 'roles', label: 'Roles', icon: 'shield', to: '/roles' },
-          ]"
-        />
-      </MLayoutSider>
-      <MLayout>
-        <MLayoutHeader>...</MLayoutHeader>
-        <MLayoutContent>...</MLayoutContent>
-      </MLayout>
-    </MLayout>
-  </MConfigProvider>
-</template>
-```
-
-| Role | Prefer |
-| --- | --- |
-| Admin chrome | `MLayout fillViewport` + sider / header / content |
-| Sider nav | `MMenu` |
-| Page stack | `MPageContent` inside `MLayoutContent` |
-| List chrome | `MPageHeader` + `MPageFilters` (+ optional batch `MPageToolbar`) |
-| Form surfaces | `MPageHeader` + `MPageSection variant="form|actions"` |
-| Dashboard KPI / chart pending | `MPageStat` + `MCard shadow="always"` + `MEmpty` |
-| Module cards | `MCard` / `MPanel` / `MFieldset` |
-| Grid / spacing | `MGrid` + `MGridItem`, or `MFlex` / `MSpace` |
-
-## Forms
-
-- `MForm` + `MFormItem` with `name` aligned to rules.
-- Prefer field props (`label`, `invalid`, `helpText`) when the control supports them; wrap with `MFormItem` for denser / complex forms.
-- Default size medium; dense apps may use `size="small"` or ConfigProvider density.
-- Form pages: keep the main column narrow (`MPageContent width="narrow"` or ~`40rem`).
-
-## Data display
-
-- `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
-
-| Need | Component |
-| --- | --- |
-| Delete confirm | `MConfirmDialog` / `MConfirmPopup` |
-| Detail / edit modal | `MDialog` |
-| Side filter / detail | `MDrawer` |
-| Field hint | `MTooltip` |
-
-## Token cheat sheet
-
-| Use | Variable |
-| --- | --- |
-| Page background | `--m-color-surface` |
-| Body text | `--m-color-text` |
-| Muted text | `--m-color-text-muted` |
-| Border | `--m-color-border` |
-| Brand / link | `--m-color-primary` |
-| Danger | `--m-color-danger` |
-| Section gap | `--m-space-4` / `--m-space-6` |
-| Card radius | `--m-radius-md` |
-| Card shadow | `--m-shadow-md` |
-
-Full set: MCP `get_design_rules`. Runtime truth remains `morya-ui/styles.css`.
-
-## Bans
-
-- Second UI library on the same page.
-- Hard-coded theme colors that break `[data-theme="dark"]`.
-- `<div @click>` instead of `MButton` / `<button>`.
-- Using `MDropdown` for form enum selection (use `MSelect` / `MTreeSelect`).
-- Skipping `import 'morya-ui/styles.css'`.
+# Design system (consumer summary)
+
+Canonical long form lives in project-root `DESIGN.md` when the AI config pack is merged. This file is the portable subset for agents.
+
+## Principles
+
+1. **Components first** — layout, forms, tables, overlays use `M*` from `morya-ui`, not equivalent hand-rolled DOM.
+2. **Tokens first** — color, space, radius, shadow, motion via `--m-*`. No raw `#hex` / `rgb()` in page styles.
+3. **Semantic actions** — primary work uses `MButton severity="primary"`; destructive uses `severity="danger"` or confirm dialogs.
+4. **Accessibility** — fields have visible labels; icon buttons have `aria-label`; overlays dismiss with Esc (library default).
+5. **ConfigProvider** — wrap the app (or isolated demo) in `MConfigProvider` for locale, theme, density, overlay mount.
+
+## App shell
+
+```vue
+<script setup lang="ts">
+import { MConfigProvider, zhCN } from 'morya-ui'
+import 'morya-ui/styles.css'
+</script>
+
+<template>
+  <MConfigProvider :locale="zhCN">
+    <MLayout fill-viewport has-sider>
+      <MLayoutSider bordered>
+        <MMenu
+          :model="[
+            { key: 'users', label: 'Users', icon: 'user', to: '/users' },
+            { key: 'roles', label: 'Roles', icon: 'shield', to: '/roles' },
+          ]"
+        />
+      </MLayoutSider>
+      <MLayout>
+        <MLayoutHeader>...</MLayoutHeader>
+        <MLayoutContent>...</MLayoutContent>
+      </MLayout>
+    </MLayout>
+  </MConfigProvider>
+</template>
+```
+
+| Role | Prefer |
+| --- | --- |
+| Admin chrome | `MLayout fillViewport` + sider / header / content |
+| Sider nav | `MMenu` |
+| Page stack | `MPageContent` inside `MLayoutContent` |
+| List chrome | `MPageHeader` + `MPageFilters` (+ optional batch `MPageToolbar`) |
+| Form surfaces | `MPageHeader` + `MPageSection variant="form|actions"` |
+| Dashboard KPI / chart pending | `MPageStat` + `MCard shadow="always"` + `MEmpty` |
+| Module cards | `MCard` / `MPanel` / `MFieldset` |
+| Grid / spacing | `MGrid` + `MGridItem`, or `MFlex` / `MSpace` |
+
+## Forms
+
+- `MForm` + `MFormItem` with `name` aligned to rules.
+- Prefer field props (`label`, `invalid`, `helpText`) when the control supports them; wrap with `MFormItem` for denser / complex forms.
+- Default size medium; dense apps may use `size="small"` or ConfigProvider density.
+- Form pages: keep the main column narrow (`MPageContent width="narrow"` or ~`40rem`).
+
+## Data display
+
+- `MTable` with `columns` + **`rows`** + `row-key` (default `id`). There is no `data` prop.
+- Height: only for **full-viewport admin lists** whose main job is one table, use `MPageContent fill` + `MTable fill paginator`. Skip `fill` for embedded/short/document-scroll tables — see [page-layouts.md](page-layouts.md) § List height.
+- 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
+
+| Need | Component |
+| --- | --- |
+| Delete confirm | `MConfirmDialog` / `MConfirmPopup` |
+| Detail / edit modal | `MDialog` |
+| Side filter / detail | `MDrawer` |
+| Field hint | `MTooltip` |
+
+## Token cheat sheet
+
+| Use | Variable |
+| --- | --- |
+| Page background | `--m-color-surface` |
+| Body text | `--m-color-text` |
+| Muted text | `--m-color-text-muted` |
+| Border | `--m-color-border` |
+| Brand / link | `--m-color-primary` |
+| Danger | `--m-color-danger` |
+| Section gap | `--m-space-4` / `--m-space-6` |
+| Card radius | `--m-radius-md` |
+| Card shadow | `--m-shadow-md` |
+
+Full set: MCP `get_design_rules`. Runtime truth remains `morya-ui/styles.css`.
+
+## Bans
+
+- Second UI library on the same page.
+- Hard-coded theme colors that break `[data-theme="dark"]`.
+- `<div @click>` instead of `MButton` / `<button>`.
+- Using `MDropdown` for form enum selection (use `MSelect` / `MTreeSelect`).
+- Skipping `import 'morya-ui/styles.css'`.

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

@@ -1,66 +1,68 @@
-# Message / Toast / MMessage
-
-**Default rule:** operation feedback uses the `message` API. Use `toast` only when you need a title plus detail, or an async / background notification feel.
-
-## Three different things
-
-| Name | Shape | API | Typical use |
-| --- | --- | --- | --- |
-| 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` | Optional host for the `message` service | `<MMessage />` | Custom `appendTo` / placement only. Not an inline alert |
-
-## Decision tree
-
-```
-Need immediate feedback after a user action?
-├─ No → maybe confirm dialog or field errorMessage only
-└─ Yes → must the error stay in the form until fixed?
-    ├─ Yes → field invalid / errorMessage; form-level token alert (see login-page)
-    └─ No → only one short line (no separate detail)?
-        ├─ Yes → message.*          ← default
-        └─ No → summary + detail / async feel → toast.*
-```
-
-## Prefer `message`
-
-```ts
-import { message } from 'morya-ui'
-
-message.success('已创建')
-message.info('已移入回收站')
-message.error('操作失败')
-```
-
-## Prefer `toast`
-
-```ts
-import { toast } from 'morya-ui'
-
-toast.success({
-  summary: '导入完成',
-  detail: '成功 128 条，失败 2 条',
-})
-```
-
-## Prefer `<MMessage>` / form-level errors
-
-- Field validation: component `invalid` / `errorMessage` (preferred).
-- 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
-<p v-if="formError" class="form-alert" role="alert">{{ formError }}</p>
-```
-
-```css
-.form-alert {
-  margin: 0 0 var(--m-space-4);
-  padding: var(--m-space-3) var(--m-space-4);
-  border: 1px solid color-mix(in srgb, var(--m-color-danger) 40%, var(--m-color-border));
-  border-radius: var(--m-radius-md);
-  background: color-mix(in srgb, var(--m-color-danger) 10%, var(--m-color-surface));
-  color: var(--m-color-danger);
-}
-```
-
+# Message / Toast / MMessage
+
+**Default rule:** operation feedback uses the `message` API. Use `toast` only when you need a title plus detail, or an async / background notification feel.
+
+Authoritative selection + key API notes also live in MCP / skill decision **`feedback-choice`** ([decision-recipes.md](./decision-recipes.md)). Keep this file and that decision aligned.
+
+## Three different things
+
+| Name | Shape | API | Typical use |
+| --- | --- | --- | --- |
+| 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` | Optional host for the `message` service | `<MMessage />` | Custom `appendTo` / placement only. Not an inline alert |
+
+## Decision tree
+
+```
+Need immediate feedback after a user action?
+├─ No → maybe confirm dialog or field errorMessage only
+└─ Yes → must the error stay in the form until fixed?
+    ├─ Yes → field invalid / errorMessage; form-level token alert (see login-page)
+    └─ No → only one short line (no separate detail)?
+        ├─ Yes → message.*          ← default
+        └─ No → summary + detail / async feel → toast.*
+```
+
+## Prefer `message`
+
+```ts
+import { message } from 'morya-ui'
+
+message.success('已创建')
+message.info('已移入回收站')
+message.error('操作失败')
+```
+
+## Prefer `toast`
+
+```ts
+import { toast } from 'morya-ui'
+
+toast.success({
+  summary: '导入完成',
+  detail: '成功 128 条，失败 2 条',
+})
+```
+
+## Prefer `<MMessage>` / form-level errors
+
+- Field validation: component `invalid` / `errorMessage` (preferred).
+- 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
+<p v-if="formError" class="form-alert" role="alert">{{ formError }}</p>
+```
+
+```css
+.form-alert {
+  margin: 0 0 var(--m-space-4);
+  padding: var(--m-space-3) var(--m-space-4);
+  border: 1px solid color-mix(in srgb, var(--m-color-danger) 40%, var(--m-color-border));
+  border-radius: var(--m-radius-md);
+  background: color-mix(in srgb, var(--m-color-danger) 10%, var(--m-color-surface));
+  color: var(--m-color-danger);
+}
+```
+

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

@@ -1,34 +1,107 @@
-# Optional companions
-
-This skill is **standalone**. Distilled craft lives in [visual-craft.md](visual-craft.md). Companions are optional soft upgrades installed by `@morya-ui/setup` via the [skills CLI](https://skills.sh/) (always the latest published version).
-
-## Conflict rule
-
-`morya-ui-pages` + project `DESIGN.md` + MCP APIs **override** companion advice whenever they disagree (component choice, tokens, Ops layout, feedback API).
-
-## Install via setup
-
-```bash
-# Interactive (TTY): toggle optional skills
-npx @morya-ui/setup ai
-
-# Non-interactive
-npx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design,fixing-accessibility,impeccable
-npx @morya-ui/setup ai --skills=all
-```
-
-| Companion | Source | Safe use | Unsafe use |
-| --- | --- | --- | --- |
-| `frontend-design` | `anthropics/skills` | Express / brand panel taste after surface + contract are fixed | Replacing Ops golden shell or introducing a second UI kit |
-| `fixing-accessibility` | `ibelick/ui-skills` | Names, keyboard, focus, form errors on top of `M*` | Replacing library dialogs/menus with custom ARIA widgets |
-| `impeccable` | `pbakaus/impeccable` | Named polish / audit passes aligned with [visual-craft.md](visual-craft.md) | New token schema or swapping `M*` for raw HTML controls |
-
-## Load budget
-
-- 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
-
-Do **not** tell the user to install them mid-task. Use [visual-craft.md](visual-craft.md) and continue.
+# Optional companions (craft bridge)
+
+`morya-ui-pages` is **standalone**: contract + golden structure + [visual-craft.md](visual-craft.md) + [style-presets.md](style-presets.md) are enough to ship.
+
+Installed market skills (**Frontend Design**, **Impeccable**, **UI-UX-Pro-Max**, **fixing-accessibility**, …) are **soft upgrades**. Use them to raise taste and polish — **never** to replace `M*` / `--m-*` / golden layouts / MCP APIs.
+
+## Conflict rule (hard)
+
+Whenever a companion conflicts with this skill, project `DESIGN.md`, or MCP (`get_component` / `validate_usage`):
+
+**morya-ui-pages + DESIGN.md + MCP win.**
+
+Forbidden outcomes from any companion:
+
+- Second UI kit (shadcn / Element / Ant / raw HTML “design system”)
+- Invented `M*` props or parallel token hex soup
+- Replacing Ops golden shell with a marketing hero “to look less stiff”
+- Replacing library overlays with custom ARIA widgets (unless fixing-accessibility is only auditing names/focus on top of `M*`)
+
+## When to load which companion
+
+| Need | Prefer companion | After / instead use distilled |
+| --- | --- | --- |
+| Express / landing / branded login panel — distinctive POV | `frontend-design` | [visual-craft.md](visual-craft.md) § Design plan + anti-defaults |
+| Named polish / audit / bolder / quieter / typeset / delight | `impeccable` (`polish`, `bolder`, `quieter`, …) | [visual-craft.md](visual-craft.md) § Polish modes |
+| Industry / mood / palette keywords for Express | `ui-ux-pro-max` (search only) | [style-presets.md](style-presets.md) heuristics + visual-craft mood |
+| a11y names, keyboard, focus, forms | `fixing-accessibility` | review-checklist a11y + MCP validate |
+| Routine Ops CRUD | **none** — style preset + Ops polish | [style-presets.md](style-presets.md) |
+
+### Load budget
+
+- Default: **morya-ui-pages only**
+- Max one **visual** companion per task (`frontend-design` **or** `impeccable` **or** `ui-ux-pro-max`)
+- a11y companion may stack **after** visual pass (pages → one visual → optional a11y)
+- If absent: **do not** ask the user to install mid-task; use distilled craft and continue
+
+## Mode bridge (Impeccable → morya lanes)
+
+| Impeccable mode | morya lane | What companion may change | What stays locked |
+| --- | --- | --- | --- |
+| **Operate** | Ops / System / most Settings | Density, hierarchy, copy verbs, chrome polish, style preset | Golden block order, `MTable`/`MPage*`, feedback API |
+| **Persuade** | Express / marketing CTA | Design plan, signature, type/atmosphere | Controls still `M*`; colors map to `--m-*` |
+| **Read** | Docs chrome / long detail | Typeset, spacing, reading measure | No second kit |
+| **Experience** | Gallery / showcase | Artifact-first layout | Interactive chrome still `M*` |
+
+Pick the mode from the **surface**, not the company name (a tool’s landing page is still Persuade).
+
+## Frontend Design bridge (Express & brand moments)
+
+When `frontend-design` is available **or** you are on Express / branded Account:
+
+1. **Ground the subject** — concrete product, audience, single job (same as this skill step 1).
+2. **Short design plan** before code — color roles, type roles, layout concept, **one** signature risk.
+3. **Critique the plan** — if it matches the plan you’d write for any SaaS, revise for **this** subject.
+4. **Anti-defaults** — do not spend free axes on cream+serif+terracotta / acid-green dark / broadsheet / purple gradient (see visual-craft).
+5. **Remediate with morya-ui** — implement the plan using `M*` + `--m-*` / `color-mix`; do not introduce Inter-as-display on Express when the brief allows character **unless** the project theme already fixes fonts.
+
+Ops lists: Frontend Design may inform **copy tone and hierarchy**, not a new scaffold aesthetic.
+
+## Impeccable bridge (polish commands)
+
+Map user asks to Impeccable-style passes (run companion if installed; else visual-craft polish modes):
+
+| User intent | Pass | morya constraint |
+| --- | --- | --- |
+| 太平 / 太呆板 / 大胆一点 | `bolder` | Amplify **one** signature or style preset (`studio`/`rail`); keep Ops golden |
+| 太花 / 太吵 | `quieter` | Remove competing accents; keep one primary |
+| 提交前收一遍 | `polish` | Ops polish + style preset cues + a11y basics |
+| 文案/空态/错误看不懂 | `clarify` | Domain verbs; `MEmpty` / `errorMessage` |
+| 字阶乱 | `typeset` | Theme font tokens; no random CDN font stacks on Ops |
+| 加点微交互 | `delight` / `animate` | 1–2 moments; `useMotion` / `data-m-motion` |
+| 无障碍 | `audit` + fixing-accessibility | Labels on `M*`; don’t replace Dialog/Menu |
+
+**Brief wins** (Impeccable): if the user pinned a reference or named a [style preset](style-presets.md), do not redirect toward companion taste.
+
+## UI-UX-Pro-Max bridge (mood only)
+
+Safe: search mood / industry / palette **keywords**, then map onto `--m-*` roles and a style preset.
+
+Unsafe: adopting suggested React/Tailwind/shadcn stacks, GSAP-heavy landing kits, or chart libraries that replace `M*` patterns.
+
+## Combined workflow (pages + companions)
+
+```text
+1. Style direction   → reference → preset → cues → ask  ([style-presets.md](style-presets.md))
+2. Structure         → recommend_page / get_golden_page  (MCP)
+3. Contract          → recommend_component / get_component / validate_usage
+4. Craft             → visual-craft Ops polish or Express design plan
+5. Companion (opt.)  → frontend-design (Express) OR impeccable polish command
+6. a11y (opt.)       → fixing-accessibility
+7. Gate              → validate_usage + validate_page
+```
+
+## Install via setup
+
+```bash
+npx @morya-ui/setup ai
+npx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design,impeccable,fixing-accessibility
+npx @morya-ui/setup ai --skills=all
+```
+
+| Companion | Source | Safe use | Unsafe use |
+| --- | --- | --- | --- |
+| `frontend-design` | `anthropics/skills` | Express / brand panel POV after surface + contract fixed | Replacing Ops golden shell; second UI kit |
+| `impeccable` | `pbakaus/impeccable` | Operate/Persuade polish passes aligned with visual-craft | New token schema; swap `M*` for raw controls |
+| `ui-ux-pro-max` | local / marketplace | Mood & industry keywords for Express | Stack swap; ignoring morya tokens |
+| `fixing-accessibility` | `ibelick/ui-skills` | Names, keyboard, focus on top of `M*` | Custom ARIA widgets replacing library overlays |