@morya-ui/setup 0.3.1 → 0.3.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Morya UI contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -9,7 +9,7 @@ Docs (zh/en):
 - [Agent Skill](https://morya-space.github.io/morya-ui/docs/agent-skill) — `morya-ui-pages` behavior
 - [Quick start](https://morya-space.github.io/morya-ui/docs/quick-start) — install and first component
 
-Installs the UI library, copies Agent skills / Cursor rules / design docs from `design-kit`, merges Cursor MCP for [`@morya-ui/mcp`](https://www.npmjs.com/package/@morya-ui/mcp), and injects `import 'morya-ui/styles.css'`.
+Installs the UI library, copies first-party Agent skills / Cursor rules / design docs from `design-kit`, installs optional companion skills at **latest** via the [skills CLI](https://skills.sh/), merges Cursor MCP for [`@morya-ui/mcp`](https://www.npmjs.com/package/@morya-ui/mcp), and injects `import 'morya-ui/styles.css'`.
 
 ## Usage
 
@@ -32,7 +32,7 @@ npx @morya-ui/setup app
 
 # Non-interactive skill selection
 npx @morya-ui/setup ai --yes
-npx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design
+npx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design,impeccable
 npx @morya-ui/setup ai --skills=all
 ```
 
@@ -47,7 +47,7 @@ npx @morya-ui/setup ai --skills=all
 | `--force` | Overwrite existing template files and the `morya-ui` MCP entry |
 | `--dry-run` | Print actions without writing or installing |
 | `--skip-install` | Do not install `morya-ui` |
-| `--skip-template` | Do not copy AI skill / rules / docs |
+| `--skip-template` | Do not copy AI skill / rules / docs (also skips companion skill install) |
 | `--skip-mcp` | Do not write `.cursor/mcp.json` |
 | `--skip-styles` | Do not inject `styles.css` |
 | `--skip-scripts` | Do not add `check:colors` to `package.json` |
@@ -55,30 +55,36 @@ npx @morya-ui/setup ai --skills=all
 
 ### Skills
 
-| Id | Default | Role |
-| --- | --- | --- |
-| `morya-ui-pages` | required | Page generation with `M*` + golden layouts |
-| `frontend-design` | optional | Express / brand visual taste |
-| `fixing-accessibility` | optional | A11y audit and targeted fixes |
+| Id | Default | Install | Role |
+| --- | --- | --- | --- |
+| `morya-ui-pages` | required | template (from this package) | Page generation with `M*` + golden layouts |
+| `frontend-design` | optional | skills CLI → `anthropics/skills` (latest) | Express / brand visual taste |
+| `fixing-accessibility` | optional | skills CLI → `ibelick/ui-skills` (latest) | A11y audit and targeted fixes |
+| `impeccable` | optional | skills CLI → `pbakaus/impeccable` (latest) | Named polish / audit / redesign passes |
 
 Catalog: [`catalog/skills.json`](./catalog/skills.json).
 
 ### Conflict policy
 
 - Template files and `.cursor/rules/*`: **skip** if the destination exists (unless `--force`).
+- Companion skills (`skills-cli`): always reinstall/update to **latest** when selected.
 - `.cursor/mcp.json`: merge other servers; skip existing `morya-ui` entry unless `--force`.
 - `package.json` `check:colors`: add only if missing (unless `--force`).
 - Styles: inject only when an entry file is found and the import is not already present.
 
-### What gets copied
+### What gets copied / installed
 
 From the package `template/` (synced from repo `design-kit/`):
 
 - `DESIGN.md` — core design contract (principles, tokens, bans)
-- `.agents/skills/<selected>/` — at least `morya-ui-pages`
+- `.agents/skills/morya-ui-pages/` — first-party page skill
 - `.cursor/rules/`
 - `scripts/check-raw-colors.mjs`
 
+Via `npx skills add …` when optional companions are selected:
+
+- `.agents/skills/frontend-design/`, `fixing-accessibility/`, and/or `impeccable/` (latest upstream)
+
 ### MCP (Cursor)
 
 Writes / merges:

package/catalog/skills.json

@@ -6,6 +6,7 @@
       "description": "Build admin and product pages with M* components, golden layouts, and tokens.",
       "required": true,
       "default": true,
+      "install": "template",
       "path": ".agents/skills/morya-ui-pages"
     },
     {
@@ -14,6 +15,9 @@
       "description": "Distinctive visual direction for Express / brand surfaces (taste only; still remediate with M*).",
       "required": false,
       "default": false,
+      "install": "skills-cli",
+      "source": "anthropics/skills",
+      "skill": "frontend-design",
       "path": ".agents/skills/frontend-design"
     },
     {
@@ -22,7 +26,21 @@
       "description": "Audit and fix names, keyboard, focus, forms, and WCAG basics.",
       "required": false,
       "default": false,
+      "install": "skills-cli",
+      "source": "ibelick/ui-skills",
+      "skill": "fixing-accessibility",
       "path": ".agents/skills/fixing-accessibility"
+    },
+    {
+      "id": "impeccable",
+      "name": "Impeccable",
+      "description": "Named polish / audit / redesign passes for frontend UI (latest from pbakaus/impeccable).",
+      "required": false,
+      "default": false,
+      "install": "skills-cli",
+      "source": "pbakaus/impeccable",
+      "skill": "impeccable",
+      "path": ".agents/skills/impeccable"
     }
   ]
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@morya-ui/setup",
   "type": "module",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "One-shot setup for morya-ui: install the library, Cursor MCP, Agent skills, and design config.",
   "license": "MIT",
   "homepage": "https://github.com/morya-space/morya-ui/tree/main/packages/setup#readme",

package/src/cli.mjs

@@ -8,6 +8,7 @@ import { mergeMcpConfig } from './mcp.mjs'
 import { ensureCheckColorsScript } from './package-json.mjs'
 import {
   buildAiInclude,
+  installSkillsCli,
   loadSkillsCatalog,
   parseSkillsFlag,
   resolveSkillSelection,
@@ -39,7 +40,8 @@ export function printHelp() {
   const { skills } = loadSkillsCatalog()
   const skillList = skills.map((s) => {
     const tag = s.required ? 'required' : s.default ? 'default' : 'optional'
-    return `    ${s.id.padEnd(24)} (${tag}) ${s.description}`
+    const via = s.install === 'skills-cli' ? ' [skills-cli latest]' : ''
+    return `    ${s.id.padEnd(24)} (${tag})${via} ${s.description}`
   }).join('\n')
 
   console.log(`Usage: morya-ui-setup [command] [options]
@@ -243,6 +245,10 @@ export async function runSetup(options) {
         include: aiInclude,
       })
 
+  const remoteSkills = skipTemplate || !selectedSkills.length
+    ? { installed: [], commands: [], skipped: true }
+    : installSkillsCli(cwd, selectedSkills, catalog.skills, { dryRun })
+
   const mcp = skipMcp
     ? { path: join(cwd, '.cursor', 'mcp.json'), action: 'skipped-flag' }
     : mergeMcpConfig(cwd, { force, dryRun })
@@ -277,6 +283,15 @@ export async function runSetup(options) {
     }
   }
 
+  if (remoteSkills.skipped) {
+    // no companions selected or template step skipped
+  } else if (remoteSkills.dryRun) {
+    console.log(`Skills CLI: dry-run — would install ${remoteSkills.installed.join(', ')}`)
+    for (const command of remoteSkills.commands) console.log(`  $ ${command}`)
+  } else {
+    console.log(`Skills CLI: installed ${remoteSkills.installed.join(', ')} (latest)`)
+  }
+
   if (mcp.action === 'skipped-flag') {
     console.log('MCP: skipped (--skip-mcp or app mode)')
   } else {
@@ -316,5 +331,5 @@ export async function runSetup(options) {
     console.log('  4. Optional: pnpm check:colors')
   }
 
-  return { mode, install, template, mcp, styles, scripts, skills: selectedSkills }
+  return { mode, install, template, remoteSkills, mcp, styles, scripts, skills: selectedSkills }
 }

package/src/skills.mjs

@@ -1,3 +1,4 @@
+import { execSync } from 'node:child_process'
 import { createInterface } from 'node:readline'
 import { dirname, join } from 'node:path'
 import { fileURLToPath } from 'node:url'
@@ -13,6 +14,9 @@ const CATALOG_PATH = join(__dirname, '..', 'catalog', 'skills.json')
  *   description: string
  *   required?: boolean
  *   default?: boolean
+ *   install?: 'template' | 'skills-cli'
+ *   source?: string
+ *   skill?: string
  *   path: string
  * }} SkillEntry
  */
@@ -24,6 +28,20 @@ export function loadSkillsCatalog() {
   return readJson(CATALOG_PATH)
 }
 
+/**
+ * @param {SkillEntry} skill
+ */
+export function isTemplateSkill(skill) {
+  return !skill.install || skill.install === 'template'
+}
+
+/**
+ * @param {SkillEntry} skill
+ */
+export function isSkillsCliSkill(skill) {
+  return skill.install === 'skills-cli'
+}
+
 /**
  * @param {SkillEntry[]} skills
  */
@@ -63,21 +81,23 @@ export function parseSkillsFlag(raw, skills) {
 }
 
 /**
+ * Template-relative paths for skills that ship inside the package template.
  * @param {string[]} skillIds
  * @param {SkillEntry[]} skills
  * @returns {string[]}
  */
 export function skillPathsForIds(skillIds, skills) {
   const byId = new Map(skills.map((s) => [s.id, s]))
-  return skillIds.map((id) => {
+  return skillIds.flatMap((id) => {
     const entry = byId.get(id)
     if (!entry) throw new Error(`Unknown skill id: ${id}`)
-    return entry.path
+    if (!isTemplateSkill(entry)) return []
+    return [entry.path]
   })
 }
 
 /**
- * Build template include prefixes for the AI pack.
+ * Build template include prefixes for the AI pack (first-party files only).
  * @param {string[]} skillIds
  * @param {SkillEntry[]} skills
  */
@@ -90,6 +110,54 @@ export function buildAiInclude(skillIds, skills) {
   ]
 }
 
+/**
+ * Install selected companion skills via the skills CLI (always latest from source).
+ * @param {string} cwd
+ * @param {string[]} skillIds
+ * @param {SkillEntry[]} skills
+ * @param {{ dryRun?: boolean }} [options]
+ * @returns {{ installed: string[], commands: string[], dryRun?: boolean, skipped?: boolean }}
+ */
+export function installSkillsCli(cwd, skillIds, skills, { dryRun = false } = {}) {
+  const selected = skills.filter((s) => skillIds.includes(s.id) && isSkillsCliSkill(s))
+  if (!selected.length) {
+    return { installed: [], commands: [], skipped: true }
+  }
+
+  for (const entry of selected) {
+    if (!entry.source) {
+      throw new Error(`Skill "${entry.id}" is marked skills-cli but has no source`)
+    }
+  }
+
+  /** @type {Map<string, string[]>} */
+  const bySource = new Map()
+  for (const entry of selected) {
+    const name = entry.skill || entry.id
+    const list = bySource.get(entry.source) || []
+    list.push(name)
+    bySource.set(entry.source, list)
+  }
+
+  const commands = []
+  for (const [source, names] of bySource) {
+    const skillFlags = names.map((name) => `-s ${name}`).join(' ')
+    commands.push(`npx -y skills add ${source} ${skillFlags} -a cursor -y`)
+  }
+
+  if (dryRun) {
+    return { installed: selected.map((s) => s.id), commands, dryRun: true }
+  }
+
+  console.log('Companion skills (latest via skills CLI):')
+  for (const command of commands) {
+    console.log(`  $ ${command}`)
+    execSync(command, { cwd, stdio: 'inherit', shell: true })
+  }
+
+  return { installed: selected.map((s) => s.id), commands }
+}
+
 /**
  * Prompt for optional skills when stdin is a TTY.
  * Required skills are always included.
@@ -108,7 +176,8 @@ export async function resolveSkillSelection(skills, { skipPrompt = false } = {})
   console.log('Select optional Agent skills (in addition to required):')
   optional.forEach((skill, index) => {
     const mark = skill.default ? 'x' : ' '
-    console.log(`  ${index + 1}. [${mark}] ${skill.id} — ${skill.description}`)
+    const via = isSkillsCliSkill(skill) ? ' [latest via skills CLI]' : ''
+    console.log(`  ${index + 1}. [${mark}] ${skill.id} — ${skill.description}${via}`)
   })
   console.log('')
   console.log('Enter comma-separated numbers or ids (empty = defaults only).')

package/template/.agents/skills/morya-ui-pages/SKILL.md

@@ -66,7 +66,7 @@ For Express / branded Account moments, also draft a tiny **design plan** (see [v
 | Ops pattern | `recommend_page` → **`get_golden_page`** (mirror; do not invent a parallel scaffold aesthetic) | [page-layouts.md](references/page-layouts.md) |
 | Account / Express / empty / result | `recommend_page` → `get_golden_page` (`login-page` / `landing-page` / `empty-state` / `result-page`) | [surfaces.md](references/surfaces.md) |
 | Visual direction | — | [visual-craft.md](references/visual-craft.md) (Ops polish / atmosphere / anti-defaults) |
-| Components / **API truth** | `search` / **`get_component`** / `get_example` / `recommend_component` | [component-index.md](references/component-index.md) |
+| Components / **API truth** | `search` / **`get_component`** / `get_example` / **`recommend_component`** (includes L2 recipes) | [decision-recipes.md](references/decision-recipes.md) + [component-index.md](references/component-index.md) |
 | Tokens / rules | `get_design_rules` | [design-system.md](references/design-system.md) |
 | Snippet | `get_page_snippet` | golden / surface excerpt |
 | Feedback API | — | [feedback.md](references/feedback.md) |
@@ -85,11 +85,12 @@ For Express / branded Account moments, also draft a tiny **design plan** (see [v
 ### 4. Wire real API usage
 
 - Import from `morya-ui` (or documented subpath + style).
-- Forms: `MForm` + fields; `@submit` + `type="submit"`.
+- **Selection + key props:** call MCP **`recommend_component`** (by query or `decision` id) and apply the returned **recipe** (`props` / `slots` / `events`) and **antiPatterns**. Without MCP, read [decision-recipes.md](references/decision-recipes.md). Then confirm full API with `get_component` / `get_example`.
+- Forms: `MForm` + fields; `@submit` + `type="submit"` (or documented footer button pattern on `form-in-dialog`).
 - Tables: `columns` + `rows` + `row-key`; `#cell-{key}`. There is no `data` prop.
 - Enums → `MSelect` / `MTreeSelect`; action menus → `MDropdown`.
-- Destructive → `MConfirmDialog` / `MConfirmPopup`.
-- Feedback → default **`message`**; `toast` only for summary+detail / async. See [feedback.md](references/feedback.md).
+- Destructive → `MConfirmDialog` / `MConfirmPopup` (`confirm-choice`).
+- Feedback → default **`message`**; `toast` only for summary+detail / async; persistent form errors → `errorMessage` / `role="alert"` (`feedback-choice`). See [feedback.md](references/feedback.md).
 - 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.
 - **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.
 - `recommend_page(includeScaffold: true)` returns the **golden page source** when one exists — remap copy/data only; never treat generated fallback as the visual target.
@@ -100,7 +101,7 @@ Run **before** delivery. Do not stop at a structurally correct shell.
 
 - **Ops:** apply [visual-craft.md](references/visual-craft.md) § Ops polish (one primary, menu icons, `MStatus` in tables, designed empty, no decorative cards).
 - **Account / Flow:** one calm brand or empty-state cue from § Atmosphere recipes; form errors via `errorMessage` / token `role="alert"`.
-- **Express:** short design plan + one signature; avoid AI-default looks; optional 1–2 token-only motions; honor `useMotion` / `prefers-reduced-motion` (or `respectReducedMotion`).
+- **Express:** short design plan + one signature; avoid AI-default looks; optional 1–2 token-only motions; intensity via `useMotion` (`full` / `reduced` / `none`), not the OS `prefers-reduced-motion` setting.
 - **All lanes:** responsive, focus visible, domain-real copy (active voice).
 
 Named polish modes (`quieter` | `bolder` | `clarify` | `audit` | …): use as an **extra** pass when the user asks to improve an existing screen. See [visual-craft.md](references/visual-craft.md) § Polish modes.
@@ -156,7 +157,8 @@ Details: [optional-companions.md](references/optional-companions.md). Distilled
 | [page-layouts.md](references/page-layouts.md) | Ops golden layouts |
 | [visual-craft.md](references/visual-craft.md) | Ops polish, atmosphere recipes, anti-defaults, polish modes |
 | [design-system.md](references/design-system.md) | Principles, tokens, bans |
-| [component-index.md](references/component-index.md) | Scenario → component |
+| [component-index.md](references/component-index.md) | Catalog + decision-id index |
+| [decision-recipes.md](references/decision-recipes.md) | Scenario → component → key props (generated; offline MCP mirror) |
 | [feedback.md](references/feedback.md) | message / toast / MMessage |
 | [review-checklist.md](references/review-checklist.md) | Pre-delivery checks |
 | [optional-companions.md](references/optional-companions.md) | Combining with external design skills |

package/template/.agents/skills/morya-ui-pages/evals/evals.json

@@ -4,7 +4,7 @@
     {
       "id": 1,
       "prompt": "我们内部教务系统用 Vue3 + morya-ui。请做一个「课程列表」后台页：按课程名搜索、按开课状态（全部/开课中/已结课）筛选；表格列：名称、状态、学分、更新时间；行内「编辑」进抽屉表单，「删除」要二次确认；右上角「新建课程」。保存/删除成功只要一句话提示。输出单个 Vue SFC，结构对齐列表黄金样例，并做 Ops 精致化（侧栏图标、状态用 MStatus、空态用 MEmpty、行操作不要一排实心按钮）。",
-      "expected_output": "Ops list: MLayout/MPageFilters/MPageToolbar/MTable rows, MSelect status, MDrawer edit, MConfirmDialog delete, message not toast, MStatus for status, MEmpty in #empty, menu icons, text/small row actions, craft pass applied, no second UI kit.",
+      "expected_output": "Ops list: MLayout/MPageHeader/MPageFilters/MTable rows, optional batch MPageToolbar, MSelect status, MDrawer edit, MConfirmDialog delete, message not toast, MStatus for status, MEmpty in #empty, menu icons, text/small row actions, craft pass applied, no second UI kit.",
       "files": []
     },
     {
@@ -16,7 +16,7 @@
     {
       "id": 3,
       "prompt": "运营后台首页仪表盘：四个 KPI（今日订单、待处理、转化率、退款率）、中间一块图表占位、右侧或下方「最近告警」表格（级别、内容、时间）。Vue3 + morya-ui，可先用静态假数据；告警级别可用 Tag，状态用 MStatus。",
-      "expected_output": "Dashboard: MPageStat grid with domain labels, MPagePlaceholder/chart card, recent MTable with MStatus, MLayout shell, --m-* only, spacious density.",
+      "expected_output": "Dashboard: MPageStat grid with domain labels, MCard shadow=always + MEmpty chart pending, recent MTable with MStatus, MLayout shell, --m-* only, spacious density.",
       "files": []
     },
     {
@@ -27,14 +27,14 @@
     },
     {
       "id": 5,
-      "prompt": "课程列表在零数据时太空了。请设计一个空状态区块（可嵌在列表页内容区）：说明还没有课程、引导「创建第一门课程」，视觉克制但有一个记忆点（dashed shell + 轻径向光）。只要空状态相关模板片段或带空状态的列表 SFC 均可，须 morya-ui。",
-      "expected_output": "Flow empty: MEmpty + next-action MButton, short copy, token atmosphere shell, no emoji clutter, fits list content slot.",
+      "prompt": "课程列表在零数据时太空了。请设计一个空状态区块（可嵌在列表页内容区）：说明还没有课程、引导「创建第一门课程」；视觉克制，用 morya-ui 默认空态即可，不要自定义 dashed 框或径向光晕。只要空状态相关模板片段或带空状态的列表 SFC 均可。",
+      "expected_output": "Flow empty: MPageHeader + MEmpty + next-action MButton, short copy, no custom dashed/radial shell, fits list content slot.",
       "files": []
     },
     {
       "id": 6,
-      "prompt": "为「流水线 CI」产品写一个营销落地首页（不是后台）：首屏只有品牌名、一句主标题、一句副文、一组 CTA；下面再分「为何选择」「能力」「客户」三节。技术实现用 Vue3 + morya-ui 组件做按钮/标签/折叠 FAQ；颜色走 --m-*，避免紫渐变和奶油衬线陶土那套 AI 默认脸。可有 1–2 个微动效并尊重 prefers-reduced-motion。输出单个 Vue SFC。",
-      "expected_output": "Express landing: single-job hero, MButton CTAs, sections with one job each, MAccordion FAQ optional, no purple/cream-terracotta defaults, no admin MPageFilters shell, reduced-motion aware.",
+      "prompt": "为「流水线 CI」产品写一个营销落地首页（不是后台）：首屏只有品牌名、一句主标题、一句副文、一组 CTA；下面再分「为何选择」「能力」「客户」三节。技术实现用 Vue3 + morya-ui 组件做按钮/标签/折叠 FAQ；颜色走 --m-*，避免紫渐变和奶油衬线陶土那套 AI 默认脸。可有 1–2 个微动效，强度跟 useMotion / data-m-motion。输出单个 Vue SFC。",
+      "expected_output": "Express landing: single-job hero, MButton CTAs, sections with one job each, MAccordion FAQ optional, no purple/cream-terracotta defaults, no admin MPageFilters shell, motion gated by useMotion / data-m-motion.",
       "files": []
     },
     {
@@ -66,6 +66,24 @@
       "prompt": "用户列表页上「新建/编辑」不要另开路由：同页 MDialog（约 32rem）里放短表单（姓名、邮箱、角色），页脚取消/保存；保存成功用 message 一句话。输出单个 Vue SFC。",
       "expected_output": "form-in-dialog: list stays, MDialog + MForm + #footer, message.success not toast string, MTable rows.",
       "files": []
+    },
+    {
+      "id": 12,
+      "prompt": "做一个用户列表表格页：列姓名、角色、状态。状态列必须用 MStatus；行数据绑定用 rows（不要写 data prop）；空表用 #empty + MEmpty。Vue3 + morya-ui，输出单个 SFC。",
+      "expected_output": "Prop accuracy: MTable columns+rows (not :data), #cell or Status for status, #empty+MEmpty, validate_usage clean.",
+      "files": []
+    },
+    {
+      "id": 13,
+      "prompt": "列表行删除：点删除后用 MConfirmDialog（危险确认），确认后 message.success('已删除')。不要用 toast，也不要手写 Dialog 当确认框。输出片段或 SFC 均可。",
+      "expected_output": "confirm-choice + feedback-choice: MConfirmDialog v-model header/message acceptSeverity=danger @accept, message.success not toast, no hand Dialog confirm.",
+      "files": []
+    },
+    {
+      "id": 14,
+      "prompt": "短新建弹窗：MDialog v-model + header + #footer（取消 secondary、保存 primary）；表单字段 fluid。保存成功 message 一句话。不要用 v-model:visible。",
+      "expected_output": "form-surface Dialog recipe: v-model not visible, #footer actions, fluid fields, message.success.",
+      "files": []
     }
   ]
 }

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

@@ -1,6 +1,9 @@
 # Component index (scenario map)
 
-Full API: docs site `/components` or MCP (`get_component`, `search`, `validate_usage`). This file is for **selection**, not prop manuals.
+Full API: docs site `/components` or MCP (`get_component`, `search`, `validate_usage`).
+
+- **Selection + key props**: MCP `recommend_component`, or offline [decision-recipes.md](./decision-recipes.md) (generated from `packages/ui-mcp/src/decisions.ts`).
+- This file is a **catalog + decision-id index**, not a prop manual.
 
 ## Shell
 
@@ -31,68 +34,66 @@ Full API: docs site `/components` or MCP (`get_component`, `search`, `validate_u
 
 ## Feedback
 
-| API / component | When |
-| --- | --- |
-| `message` | **Default** one-line CRUD result |
-| `toast` | `summary` + `detail`, or async / background feel |
-| `<MMessage>` | Optional host for the `message` service (`appendTo` / placement). **Not** an inline alert |
-| field `errorMessage` or token `role="alert"` | Persistent form / auth error |
-| `MEmpty` | No-data / first-use / filtered empty (not an error) |
-| `MResult` | Terminal outcome: success, failure, 403 / 404 / 500 |
-| `MLoading` / `v-loading` / `loading.service` | **Default** region or fullscreen loading mask |
-| `MSkeleton` | Layout is already known; placeholder while content arrives |
-| `MProgressBar` | Determinate progress |
-| `MProgressSpinner` | Inline spinner only, not a region mask |
-| `MBlockUI` | Block interaction without a loading message |
+| API / component | When | Decision |
+| --- | --- | --- |
+| `message` | **Default** one-line CRUD result | `feedback-choice` |
+| `toast` | `summary` + `detail`, or async / background feel | `feedback-choice` |
+| `<MMessage>` | Optional host for the `message` service. **Not** an inline alert | `feedback-choice` |
+| field `errorMessage` or token `role="alert"` | Persistent form / auth error | `feedback-choice` |
+| `MEmpty` | No-data / first-use / filtered empty | `empty-result-choice` |
+| `MResult` | Terminal outcome: success, failure, 403 / 404 / 500 | `empty-result-choice` |
+| `MLoading` / `v-loading` / `loading.service` | **Default** region or fullscreen loading mask | `loading-choice` |
+| `MSkeleton` | Layout known; placeholder while content arrives | `loading-choice` |
+| `MProgressBar` | Determinate progress | `loading-choice` |
+| `MProgressSpinner` | Inline spinner only, not a region mask | `loading-choice` |
+| `MBlockUI` | Block interaction without a loading message | `loading-choice` |
 
 ## Overlays & menus
 
-`MDialog`, `MDrawer`, `MConfirmDialog` / `MConfirmPopup`, `MPopover`, `MTooltip`, `MDropdown` (**actions only**), `MContextMenu` (right-click), `MCommandMenu` (searchable command palette), `MMenu` / `MMenubar` / `MTieredMenu` / `MMegaMenu`, `MTabs`, `MStepper`
+`MDialog`, `MDrawer`, `MConfirmDialog` / `MConfirmPopup`, `MPopover`, `MTooltip`, `MDropdown` (**actions only**), `MContextMenu`, `MCommandMenu`, `MMenu` / `MMenubar` / `MTieredMenu` / `MMegaMenu`, `MTabs`, `MStepper`
 
 ## Surfaces / media
 
 `MCard`, `MPanel`, `MAccordion`, `MCarousel`, `MGallery`, `MIcon`, `MScrollbar`, `MInplace`, `MScrollTop`, `MTerminal`
 
-## Scenario → pick
+## Scenario → decision
+
+Open MCP `recommend_component({ decision })` or the matching section in [decision-recipes.md](./decision-recipes.md) for **when / avoid / recipe props / anti-patterns**.
 
-| Intent | Prefer |
+| Intent | Decision id |
 | --- | --- |
-| Searchable list + paging | `MPageFilters` + `MTable` (+ paginator) |
-| Create / edit from a list (few–medium fields) | **`form-in-dialog`** golden (`MDialog` + `MForm`) |
-| Create / edit long / multi-section entity | Form golden page **or** `MDrawer` |
-| Resource detail / profile | `detail-page` golden |
-| Delete | `MConfirmDialog` |
-| Lightweight inline status | `MStatus` (dot + label) |
-| Status chip / closable label | `MTag` severities |
-| Primary / secondary actions | `MSpace` + `MButton` |
-| Dashboard KPIs | `MGrid` + `MPageStat` |
-| Org tree | `MTree` / `MTreeSelect` |
-| Login / auth | `login-page` golden + `MInputPassword` |
-| Marketing landing | `landing-page` golden + `MButton` / `MTag` / `MAccordion` |
-| Empty list / zero state | `MEmpty` (+ `empty-state` golden or `MTable` `#empty`) |
-| Preferences / settings | `settings-page` golden (`MTabs` + `tabs`) |
-| Multi-step create | `wizard-form` golden (`MStepper` + `steps`) |
-| Region or page is waiting | `MLoading`, `v-loading`, or `loading.service`; known layout → `MSkeleton` |
-| Local capped scroll | Explicit `MScrollbar` |
-| Resizable two-pane (editor / preview, master-detail) | `MSplitter` |
-| Admin sider nav | `MMenu` inside `MLayoutSider` (or `MSidebar` when the shell is not `MLayout`) |
-| Few options, all visible | `MRadio` or `MSelectButton` |
-| Always-visible option list | `MListbox` |
-| Multi-level cascade (not a tree dropdown) | `MCascadeSelect` |
-| Right-click actions | `MContextMenu` |
-| Global command search | `MCommandMenu` |
-| Count or dot on a control | `MBadge` |
-| Removable entity chip | `MChip` |
+| Create / edit from a list (few–medium fields) vs long form page | `form-surface-choice` |
+| Dialog vs Drawer vs Popover vs Tooltip | `overlay-choice` |
+| Table vs DataView vs Tree / TreeTable | `data-display-choice` |
+| Select vs TreeSelect vs AutoComplete vs Radio / … | `selection-choice` |
+| Card vs Panel vs Fieldset | `surface-choice` |
+| PageContent vs Flex vs Space vs Grid | `layout-spacing-choice` |
+| PageFilters / Toolbar / Header / Section / Stat / Placeholder | `page-section-choice` |
+| Layout scroll vs MScrollbar vs built-in | `page-scroll-choice` |
+| Avoid double borders / extra Card wrappers | `surface-nesting-choice` |
+| Loading vs Skeleton vs Progress* vs BlockUI | `loading-choice` |
+| Status vs Tag vs Chip vs Badge | `status-label-choice` |
+| Empty vs Result | `empty-result-choice` |
+| Dropdown vs Menu vs ContextMenu vs CommandMenu | `action-menu-choice` |
+| message vs toast vs field / form alert | `feedback-choice` |
+| ConfirmDialog vs ConfirmPopup | `confirm-choice` |
+| Searchable list + paging | `page-section-choice` + `data-display-choice` (+ list golden) |
+| Delete / destructive | `confirm-choice` |
+| Login / auth | `feedback-choice` + `login-page` golden |
+| Marketing landing | `landing-page` golden (Express) |
+| Multi-step create | `wizard-form` golden |
+| Preferences / settings | `settings-page` golden |
+| Resizable two-pane | use `MSplitter` (see docs / `get_component`) |
 
 ## Common mistakes
 
 | Wrong | Right |
 | --- | --- |
-| `MDropdown` as form enum | `MSelect` |
-| `MTable` `:data` | `:rows` (`row-key` defaults to `id`) |
-| `<MMessage severity>` as an inline alert | Field `errorMessage`, or a token-styled `role="alert"` |
+| `MDropdown` as form enum | `MSelect` (`selection-choice`) |
+| `MTable` `:data` | `:rows` (`data-display-choice`) |
+| `<MMessage severity>` as an inline alert | Field `errorMessage`, or token `role="alert"` (`feedback-choice`) |
 | Hand `<table>` | `MTable` |
-| Hand modal div | `MDialog` |
-| Hand spinner or `MProgressSpinner` as a region / page mask | `MLoading` / `v-loading` |
-| Extra `MCard` around every `MPage*` block | Use page components' own surface/gap |
-| Assume undocumented props | MCP / docs lookup |
+| Hand modal div | `MDialog` / `MConfirmDialog` |
+| Hand spinner or `MProgressSpinner` as a region / page mask | `MLoading` / `v-loading` (`loading-choice`) |
+| Extra `MCard` around every `MPage*` block | `surface-nesting-choice` |
+| Assume undocumented props | MCP / docs lookup + `validate_usage` |