@morya-ui/setup 0.3.4 → 0.3.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +119 -103
  3. package/bin/morya-ui-setup.js +14 -14
  4. package/catalog/skills.json +46 -46
  5. package/package.json +4 -5
  6. package/src/__tests__/mcp.test.mjs +141 -0
  7. package/src/cli.mjs +330 -335
  8. package/src/copy-template.mjs +78 -78
  9. package/src/fs-utils.mjs +24 -24
  10. package/src/install.mjs +134 -63
  11. package/src/mcp.mjs +220 -50
  12. package/src/package-json.mjs +30 -30
  13. package/src/skills.mjs +224 -223
  14. package/src/styles.mjs +119 -119
  15. package/template/.agents/skills/morya-ui-pages/SKILL.md +191 -184
  16. package/template/.agents/skills/morya-ui-pages/evals/evals.json +89 -89
  17. package/template/.agents/skills/morya-ui-pages/references/component-index.md +99 -99
  18. package/template/.agents/skills/morya-ui-pages/references/decision-recipes.md +72 -5
  19. package/template/.agents/skills/morya-ui-pages/references/design-system.md +101 -101
  20. package/template/.agents/skills/morya-ui-pages/references/feedback.md +68 -68
  21. package/template/.agents/skills/morya-ui-pages/references/optional-companions.md +62 -107
  22. package/template/.agents/skills/morya-ui-pages/references/page-layouts.md +133 -141
  23. package/template/.agents/skills/morya-ui-pages/references/review-checklist.md +76 -64
  24. package/template/.agents/skills/morya-ui-pages/references/style-presets.md +68 -73
  25. package/template/.agents/skills/morya-ui-pages/references/surfaces.md +91 -91
  26. package/template/.agents/skills/morya-ui-pages/references/visual-craft.md +131 -221
  27. package/template/.cursor/rules/coding-style.mdc +41 -41
  28. package/template/.cursor/rules/component-usage.mdc +41 -41
  29. package/template/.cursor/rules/design-system.mdc +18 -17
  30. package/template/.cursor/rules/page-layout.mdc +97 -97
  31. package/template/AGENTS.md +33 -0
  32. package/template/DESIGN.md +81 -59
  33. package/template/scripts/check-raw-colors.mjs +74 -74
@@ -1,101 +1,101 @@
1
- # Design system (consumer summary)
2
-
3
- Canonical long form lives in project-root `DESIGN.md` when the AI config pack is merged. This file is the portable subset for agents.
4
-
5
- ## Principles
6
-
7
- 1. **Components first** — layout, forms, tables, overlays use `M*` from `morya-ui`, not equivalent hand-rolled DOM.
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.
10
- 4. **Accessibility** — fields have visible labels; icon buttons have `aria-label`; overlays dismiss with Esc (library default).
11
- 5. **ConfigProvider** — wrap the app (or isolated demo) in `MConfigProvider` for locale, theme, density, overlay mount.
12
-
13
- ## App shell
14
-
15
- ```vue
16
- <script setup lang="ts">
17
- import { MConfigProvider, zhCN } from 'morya-ui'
18
- import 'morya-ui/styles.css'
19
- </script>
20
-
21
- <template>
22
- <MConfigProvider :locale="zhCN">
23
- <MLayout fill-viewport has-sider>
24
- <MLayoutSider bordered>
25
- <MMenu
26
- :model="[
27
- { key: 'users', label: 'Users', icon: 'user', to: '/users' },
28
- { key: 'roles', label: 'Roles', icon: 'shield', to: '/roles' },
29
- ]"
30
- />
31
- </MLayoutSider>
32
- <MLayout>
33
- <MLayoutHeader>...</MLayoutHeader>
34
- <MLayoutContent>...</MLayoutContent>
35
- </MLayout>
36
- </MLayout>
37
- </MConfigProvider>
38
- </template>
39
- ```
40
-
41
- | Role | Prefer |
42
- | --- | --- |
43
- | Admin chrome | `MLayout fillViewport` + sider / header / content |
44
- | Sider nav | `MMenu` |
45
- | Page stack | `MPageContent` inside `MLayoutContent` |
46
- | List chrome | `MPageHeader` + `MPageFilters` (+ optional batch `MPageToolbar`) |
47
- | Form surfaces | `MPageHeader` + `MPageSection variant="form|actions"` |
48
- | Dashboard KPI / chart pending | `MPageStat` + `MCard shadow="always"` + `MEmpty` |
49
- | Module cards | `MCard` / `MPanel` / `MFieldset` |
50
- | Grid / spacing | `MGrid` + `MGridItem`, or `MFlex` / `MSpace` |
51
-
52
- ## Forms
53
-
54
- - `MForm` + `MFormItem` with `name` aligned to rules.
55
- - Prefer field props (`label`, `invalid`, `helpText`) when the control supports them; wrap with `MFormItem` for denser / complex forms.
56
- - Default size medium; dense apps may use `size="small"` or ConfigProvider density.
57
- - Form pages: keep the main column narrow (`MPageContent width="narrow"` or ~`40rem`).
58
-
59
- ## Data display
60
-
61
- - `MTable` with `columns` + **`rows`** + `row-key` (default `id`). There is no `data` prop.
62
- - 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.
63
- - Row status → `MStatus`; categories / closable labels → `MTag`.
64
- - Row actions: text/link `MButton` or `MDropdown` (avoid a row of filled buttons).
65
- - Pagination: table `paginator` or sibling `MPagination`.
66
- - Empty states: `MEmpty` in `#empty` / Flow golden — never a silent blank table.
67
- - Terminal outcomes (success / 403 / 404 / 500): `MResult` — do not reuse `MEmpty` for errors.
68
- - Visual polish: [visual-craft.md](visual-craft.md) (Ops polish + atmosphere).
69
-
70
- ## Overlays
71
-
72
- | Need | Component |
73
- | --- | --- |
74
- | Delete confirm | `MConfirmDialog` / `MConfirmPopup` |
75
- | Detail / edit modal | `MDialog` |
76
- | Side filter / detail | `MDrawer` |
77
- | Field hint | `MTooltip` |
78
-
79
- ## Token cheat sheet
80
-
81
- | Use | Variable |
82
- | --- | --- |
83
- | Page background | `--m-color-surface` |
84
- | Body text | `--m-color-text` |
85
- | Muted text | `--m-color-text-muted` |
86
- | Border | `--m-color-border` |
87
- | Brand / link | `--m-color-primary` |
88
- | Danger | `--m-color-danger` |
89
- | Section gap | `--m-space-4` / `--m-space-6` |
90
- | Card radius | `--m-radius-md` |
91
- | Card shadow | `--m-shadow-md` |
92
-
93
- Full set: MCP `get_design_rules`. Runtime truth remains `morya-ui/styles.css`.
94
-
95
- ## Bans
96
-
97
- - Second UI library on the same page.
98
- - Hard-coded theme colors that break `[data-theme="dark"]`.
99
- - `<div @click>` instead of `MButton` / `<button>`.
100
- - Using `MDropdown` for form enum selection (use `MSelect` / `MTreeSelect`).
101
- - Skipping `import 'morya-ui/styles.css'`.
1
+ # Design system (consumer summary)
2
+
3
+ Canonical long form lives in project-root `DESIGN.md` when the AI config pack is merged. This file is the portable subset for agents.
4
+
5
+ ## Principles
6
+
7
+ 1. **Components first** — layout, forms, tables, overlays use `M*` from `morya-ui`, not equivalent hand-rolled DOM.
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.
10
+ 4. **Accessibility** — fields have visible labels; icon buttons have `aria-label`; overlays dismiss with Esc (library default).
11
+ 5. **ConfigProvider** — wrap the app (or isolated demo) in `MConfigProvider` for locale, theme, density, overlay mount.
12
+
13
+ ## App shell
14
+
15
+ ```vue
16
+ <script setup lang="ts">
17
+ import { MConfigProvider, zhCN } from 'morya-ui'
18
+ import 'morya-ui/styles.css'
19
+ </script>
20
+
21
+ <template>
22
+ <MConfigProvider :locale="zhCN">
23
+ <MLayout fill-viewport has-sider>
24
+ <MLayoutSider bordered>
25
+ <MMenu
26
+ :model="[
27
+ { key: 'users', label: 'Users', icon: 'user', to: '/users' },
28
+ { key: 'roles', label: 'Roles', icon: 'shield', to: '/roles' },
29
+ ]"
30
+ />
31
+ </MLayoutSider>
32
+ <MLayout>
33
+ <MLayoutHeader>...</MLayoutHeader>
34
+ <MLayoutContent>...</MLayoutContent>
35
+ </MLayout>
36
+ </MLayout>
37
+ </MConfigProvider>
38
+ </template>
39
+ ```
40
+
41
+ | Role | Prefer |
42
+ | --- | --- |
43
+ | Admin chrome | `MLayout fillViewport` + sider / header / content |
44
+ | Sider nav | `MMenu` |
45
+ | Page stack | `MPageContent` inside `MLayoutContent` |
46
+ | List chrome | `MPageHeader` + `MPageFilters` (+ optional batch `MPageToolbar`) |
47
+ | Form surfaces | `MPageHeader` + `MPageSection variant="form|actions"` |
48
+ | Dashboard KPI / chart pending | `MPageStat` + `MCard shadow="always"` + `MEmpty` |
49
+ | Module cards | `MCard` / `MPanel` / `MFieldset` |
50
+ | Grid / spacing | `MGrid` + `MGridItem`, or `MFlex` / `MSpace` |
51
+
52
+ ## Forms
53
+
54
+ - `MForm` + `MFormItem` with `name` aligned to rules.
55
+ - Prefer field props (`label`, `invalid`, `helpText`) when the control supports them; wrap with `MFormItem` for denser / complex forms.
56
+ - Default size medium; dense apps may use `size="small"` or ConfigProvider density.
57
+ - Form pages: keep the main column narrow (`MPageContent width="narrow"` or ~`40rem`).
58
+
59
+ ## Data display
60
+
61
+ - `MTable` with `columns` + **`rows`** + `row-key` (default `id`). There is no `data` prop.
62
+ - 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.
63
+ - Row status → `MStatus`; categories / closable labels → `MTag`.
64
+ - Row actions: text/link `MButton` or `MDropdown` (avoid a row of filled buttons).
65
+ - Pagination: table `paginator` or sibling `MPagination`.
66
+ - Empty states: `MEmpty` in `#empty` / Flow golden — never a silent blank table.
67
+ - Terminal outcomes (success / 403 / 404 / 500): `MResult` — do not reuse `MEmpty` for errors.
68
+ - Visual polish: [visual-craft.md](visual-craft.md) (Ops polish + atmosphere).
69
+
70
+ ## Overlays
71
+
72
+ | Need | Component |
73
+ | --- | --- |
74
+ | Delete confirm | `MConfirmDialog` / `MConfirmPopup` |
75
+ | Detail / edit modal | `MDialog` |
76
+ | Side filter / detail | `MDrawer` |
77
+ | Field hint | `MTooltip` |
78
+
79
+ ## Token cheat sheet
80
+
81
+ | Use | Variable |
82
+ | --- | --- |
83
+ | Page background | `--m-color-surface` |
84
+ | Body text | `--m-color-text` |
85
+ | Muted text | `--m-color-text-muted` |
86
+ | Border | `--m-color-border` |
87
+ | Brand / link | `--m-color-primary` |
88
+ | Danger | `--m-color-danger` |
89
+ | Section gap | `--m-space-4` / `--m-space-6` |
90
+ | Card radius | `--m-radius-md` |
91
+ | Card shadow | `--m-shadow-md` |
92
+
93
+ Full set: MCP `get_design_rules`. Runtime truth remains `morya-ui/styles.css`.
94
+
95
+ ## Bans
96
+
97
+ - Second UI library on the same page.
98
+ - Hard-coded theme colors that break `[data-theme="dark"]`.
99
+ - `<div @click>` instead of `MButton` / `<button>`.
100
+ - Using `MDropdown` for form enum selection (use `MSelect` / `MTreeSelect`).
101
+ - Skipping `import 'morya-ui/styles.css'`.
@@ -1,68 +1,68 @@
1
- # Message / Toast / MMessage
2
-
3
- **Default rule:** operation feedback uses the `message` API. Use `toast` only when you need a title plus detail, or an async / background notification feel.
4
-
5
- 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.
6
-
7
- ## Three different things
8
-
9
- | Name | Shape | API | Typical use |
10
- | --- | --- | --- | --- |
11
- | Message service | Top-centered one-liner | `message.success('已保存')` | Most CRUD results |
12
- | Toast service | Corner notice with `summary` + optional `detail` | `toast.success({ summary, detail })` | Extra explanation, job results |
13
- | `MMessage` | Optional host for the `message` service | `<MMessage />` | Custom `appendTo` / placement only. Not an inline alert |
14
-
15
- ## Decision tree
16
-
17
- ```
18
- Need immediate feedback after a user action?
19
- ├─ No → maybe confirm dialog or field errorMessage only
20
- └─ Yes → must the error stay in the form until fixed?
21
- ├─ Yes → field invalid / errorMessage; form-level token alert (see login-page)
22
- └─ No → only one short line (no separate detail)?
23
- ├─ Yes → message.* ← default
24
- └─ No → summary + detail / async feel → toast.*
25
- ```
26
-
27
- ## Prefer `message`
28
-
29
- ```ts
30
- import { message } from 'morya-ui'
31
-
32
- message.success('已创建')
33
- message.info('已移入回收站')
34
- message.error('操作失败')
35
- ```
36
-
37
- ## Prefer `toast`
38
-
39
- ```ts
40
- import { toast } from 'morya-ui'
41
-
42
- toast.success({
43
- summary: '导入完成',
44
- detail: '成功 128 条,失败 2 条',
45
- })
46
- ```
47
-
48
- ## Prefer `<MMessage>` / form-level errors
49
-
50
- - Field validation: component `invalid` / `errorMessage` (preferred).
51
- - Form-level persistent errors (login/auth): token-styled `role="alert"` bar as in MCP `get_golden_page` `login-page`.
52
- - Note: `<MMessage>` today is primarily the **message service host** (`messages` / teleport). Do not invent a `severity` + default-slot Alert API unless docs add it.
53
-
54
- ```vue
55
- <p v-if="formError" class="form-alert" role="alert">{{ formError }}</p>
56
- ```
57
-
58
- ```css
59
- .form-alert {
60
- margin: 0 0 var(--m-space-4);
61
- padding: var(--m-space-3) var(--m-space-4);
62
- border: 1px solid color-mix(in srgb, var(--m-color-danger) 40%, var(--m-color-border));
63
- border-radius: var(--m-radius-md);
64
- background: color-mix(in srgb, var(--m-color-danger) 10%, var(--m-color-surface));
65
- color: var(--m-color-danger);
66
- }
67
- ```
68
-
1
+ # Message / Toast / MMessage
2
+
3
+ **Default rule:** operation feedback uses the `message` API. Use `toast` only when you need a title plus detail, or an async / background notification feel.
4
+
5
+ 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.
6
+
7
+ ## Three different things
8
+
9
+ | Name | Shape | API | Typical use |
10
+ | --- | --- | --- | --- |
11
+ | Message service | Top-centered one-liner | `message.success('已保存')` | Most CRUD results |
12
+ | Toast service | Corner notice with `summary` + optional `detail` | `toast.success({ summary, detail })` | Extra explanation, job results |
13
+ | `MMessage` | Optional host for the `message` service | `<MMessage />` | Custom `appendTo` / placement only. Not an inline alert |
14
+
15
+ ## Decision tree
16
+
17
+ ```
18
+ Need immediate feedback after a user action?
19
+ ├─ No → maybe confirm dialog or field errorMessage only
20
+ └─ Yes → must the error stay in the form until fixed?
21
+ ├─ Yes → field invalid / errorMessage; form-level token alert (see login-page)
22
+ └─ No → only one short line (no separate detail)?
23
+ ├─ Yes → message.* ← default
24
+ └─ No → summary + detail / async feel → toast.*
25
+ ```
26
+
27
+ ## Prefer `message`
28
+
29
+ ```ts
30
+ import { message } from 'morya-ui'
31
+
32
+ message.success('已创建')
33
+ message.info('已移入回收站')
34
+ message.error('操作失败')
35
+ ```
36
+
37
+ ## Prefer `toast`
38
+
39
+ ```ts
40
+ import { toast } from 'morya-ui'
41
+
42
+ toast.success({
43
+ summary: '导入完成',
44
+ detail: '成功 128 条,失败 2 条',
45
+ })
46
+ ```
47
+
48
+ ## Prefer `<MMessage>` / form-level errors
49
+
50
+ - Field validation: component `invalid` / `errorMessage` (preferred).
51
+ - Form-level persistent errors (login/auth): token-styled `role="alert"` bar as in MCP `get_golden_page` `login-page`.
52
+ - Note: `<MMessage>` today is primarily the **message service host** (`messages` / teleport). Do not invent a `severity` + default-slot Alert API unless docs add it.
53
+
54
+ ```vue
55
+ <p v-if="formError" class="form-alert" role="alert">{{ formError }}</p>
56
+ ```
57
+
58
+ ```css
59
+ .form-alert {
60
+ margin: 0 0 var(--m-space-4);
61
+ padding: var(--m-space-3) var(--m-space-4);
62
+ border: 1px solid color-mix(in srgb, var(--m-color-danger) 40%, var(--m-color-border));
63
+ border-radius: var(--m-radius-md);
64
+ background: color-mix(in srgb, var(--m-color-danger) 10%, var(--m-color-surface));
65
+ color: var(--m-color-danger);
66
+ }
67
+ ```
68
+
@@ -1,107 +1,62 @@
1
- # Optional companions (craft bridge)
2
-
3
- `morya-ui-pages` is **standalone**: contract + golden structure + [visual-craft.md](visual-craft.md) + [style-presets.md](style-presets.md) are enough to ship.
4
-
5
- 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.
6
-
7
- ## Conflict rule (hard)
8
-
9
- Whenever a companion conflicts with this skill, project `DESIGN.md`, or MCP (`get_component` / `validate_usage`):
10
-
11
- **morya-ui-pages + DESIGN.md + MCP win.**
12
-
13
- Forbidden outcomes from any companion:
14
-
15
- - Second UI kit (shadcn / Element / Ant / raw HTML “design system”)
16
- - Invented `M*` props or parallel token hex soup
17
- - Replacing Ops golden shell with a marketing hero “to look less stiff”
18
- - Replacing library overlays with custom ARIA widgets (unless fixing-accessibility is only auditing names/focus on top of `M*`)
19
-
20
- ## When to load which companion
21
-
22
- | Need | Prefer companion | After / instead use distilled |
23
- | --- | --- | --- |
24
- | Express / landing / branded login panel — distinctive POV | `frontend-design` | [visual-craft.md](visual-craft.md) § Design plan + anti-defaults |
25
- | Named polish / audit / bolder / quieter / typeset / delight | `impeccable` (`polish`, `bolder`, `quieter`, …) | [visual-craft.md](visual-craft.md) § Polish modes |
26
- | Industry / mood / palette keywords for Express | `ui-ux-pro-max` (search only) | [style-presets.md](style-presets.md) heuristics + visual-craft mood |
27
- | a11y names, keyboard, focus, forms | `fixing-accessibility` | review-checklist a11y + MCP validate |
28
- | Routine Ops CRUD | **none** — style preset + Ops polish | [style-presets.md](style-presets.md) |
29
-
30
- ### Load budget
31
-
32
- - Default: **morya-ui-pages only**
33
- - Max one **visual** companion per task (`frontend-design` **or** `impeccable` **or** `ui-ux-pro-max`)
34
- - a11y companion may stack **after** visual pass (pages → one visual → optional a11y)
35
- - If absent: **do not** ask the user to install mid-task; use distilled craft and continue
36
-
37
- ## Mode bridge (Impeccable → morya lanes)
38
-
39
- | Impeccable mode | morya lane | What companion may change | What stays locked |
40
- | --- | --- | --- | --- |
41
- | **Operate** | Ops / System / most Settings | Density, hierarchy, copy verbs, chrome polish, style preset | Golden block order, `MTable`/`MPage*`, feedback API |
42
- | **Persuade** | Express / marketing CTA | Design plan, signature, type/atmosphere | Controls still `M*`; colors map to `--m-*` |
43
- | **Read** | Docs chrome / long detail | Typeset, spacing, reading measure | No second kit |
44
- | **Experience** | Gallery / showcase | Artifact-first layout | Interactive chrome still `M*` |
45
-
46
- Pick the mode from the **surface**, not the company name (a tool’s landing page is still Persuade).
47
-
48
- ## Frontend Design bridge (Express & brand moments)
49
-
50
- When `frontend-design` is available **or** you are on Express / branded Account:
51
-
52
- 1. **Ground the subject** — concrete product, audience, single job (same as this skill step 1).
53
- 2. **Short design plan** before code — color roles, type roles, layout concept, **one** signature risk.
54
- 3. **Critique the plan** — if it matches the plan you’d write for any SaaS, revise for **this** subject.
55
- 4. **Anti-defaults** — do not spend free axes on cream+serif+terracotta / acid-green dark / broadsheet / purple gradient (see visual-craft).
56
- 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.
57
-
58
- Ops lists: Frontend Design may inform **copy tone and hierarchy**, not a new scaffold aesthetic.
59
-
60
- ## Impeccable bridge (polish commands)
61
-
62
- Map user asks to Impeccable-style passes (run companion if installed; else visual-craft polish modes):
63
-
64
- | User intent | Pass | morya constraint |
65
- | --- | --- | --- |
66
- | 太平 / 太呆板 / 大胆一点 | `bolder` | Amplify **one** signature or style preset (`studio`/`rail`); keep Ops golden |
67
- | 太花 / 太吵 | `quieter` | Remove competing accents; keep one primary |
68
- | 提交前收一遍 | `polish` | Ops polish + style preset cues + a11y basics |
69
- | 文案/空态/错误看不懂 | `clarify` | Domain verbs; `MEmpty` / `errorMessage` |
70
- | 字阶乱 | `typeset` | Theme font tokens; no random CDN font stacks on Ops |
71
- | 加点微交互 | `delight` / `animate` | 1–2 moments; `useMotion` / `data-m-motion` |
72
- | 无障碍 | `audit` + fixing-accessibility | Labels on `M*`; don’t replace Dialog/Menu |
73
-
74
- **Brief wins** (Impeccable): if the user pinned a reference or named a [style preset](style-presets.md), do not redirect toward companion taste.
75
-
76
- ## UI-UX-Pro-Max bridge (mood only)
77
-
78
- Safe: search mood / industry / palette **keywords**, then map onto `--m-*` roles and a style preset.
79
-
80
- Unsafe: adopting suggested React/Tailwind/shadcn stacks, GSAP-heavy landing kits, or chart libraries that replace `M*` patterns.
81
-
82
- ## Combined workflow (pages + companions)
83
-
84
- ```text
85
- 1. Style direction → reference → preset → cues → ask ([style-presets.md](style-presets.md))
86
- 2. Structure → recommend_page / get_golden_page (MCP)
87
- 3. Contract → recommend_component / get_component / validate_usage
88
- 4. Craft → visual-craft Ops polish or Express design plan
89
- 5. Companion (opt.) → frontend-design (Express) OR impeccable polish command
90
- 6. a11y (opt.) → fixing-accessibility
91
- 7. Gate → validate_usage + validate_page
92
- ```
93
-
94
- ## Install via setup
95
-
96
- ```bash
97
- npx @morya-ui/setup ai
98
- npx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design,impeccable,fixing-accessibility
99
- npx @morya-ui/setup ai --skills=all
100
- ```
101
-
102
- | Companion | Source | Safe use | Unsafe use |
103
- | --- | --- | --- | --- |
104
- | `frontend-design` | `anthropics/skills` | Express / brand panel POV after surface + contract fixed | Replacing Ops golden shell; second UI kit |
105
- | `impeccable` | `pbakaus/impeccable` | Operate/Persuade polish passes aligned with visual-craft | New token schema; swap `M*` for raw controls |
106
- | `ui-ux-pro-max` | local / marketplace | Mood & industry keywords for Express | Stack swap; ignoring morya tokens |
107
- | `fixing-accessibility` | `ibelick/ui-skills` | Names, keyboard, focus on top of `M*` | Custom ARIA widgets replacing library overlays |
1
+ # Optional companions (craft bridge)
2
+
3
+ `morya-ui-pages` is **standalone**: contract + page snippets / decision recipes + block-order checklists + [visual-craft.md](visual-craft.md) + [style-presets.md](style-presets.md) are enough. Golden pages are optional structure demos. **No named style-preset catalog.**
4
+
5
+ Installed market skills are **soft upgrades** — never replace `M*` / `--m-*` / page-layout block order / MCP / the **user’s** style direction.
6
+
7
+ ## Conflict rule (hard)
8
+
9
+ **morya-ui-pages + DESIGN.md + MCP win.**
10
+
11
+ Forbidden from any companion:
12
+
13
+ - Second UI kit
14
+ - Invented `M*` props or hex soup
15
+ - Replacing Ops block-order shell with a marketing hero
16
+ - Custom ARIA widgets replacing library overlays
17
+ - **Unearned AI atmosphere** the user did not ask for (aurora, cream-serif-terracotta, dual neon, frosted glass, neumorph on dense tables)
18
+ - Overriding an explicit user reference or description
19
+
20
+ ## When to load
21
+
22
+ | Need | Prefer companion | Else |
23
+ | --- | --- | --- |
24
+ | Express / brand POV | `frontend-design` | visual-craft design plan |
25
+ | Named polish / audit / bolder / quieter | `impeccable` | visual-craft polish modes |
26
+ | Mood keywords | `ui-ux-pro-max` (search only) | infer from prompt → `--m-*` |
27
+ | a11y | `fixing-accessibility` | review-checklist |
28
+ | Routine Ops | **none** | Ops polish + resolved direction |
29
+
30
+ Load budget: max one visual companion; a11y may follow. If absent, do not ask to install mid-task.
31
+
32
+ ## Frontend Design bridge
33
+
34
+ 1. Ground subject / audience / job.
35
+ 2. Resolve style direction first ([style-presets.md](style-presets.md)).
36
+ 3. Short design plan; signature fits the **user’s** words.
37
+ 4. Strip AI-default faces unless the user asked.
38
+ 5. Remediate with `M*` + `--m-*`; flat shells by default.
39
+
40
+ ## Impeccable bridge
41
+
42
+ | User intent | Pass | Constraint |
43
+ | --- | --- | --- |
44
+ | 太平 / 大胆一点 | `bolder` | One signature inside current direction; ask before changing the whole face |
45
+ | 太花 / 太像 AI | `quieter` | Strip unearned gradients / glow / glass |
46
+ | 提交前 | `polish` | Ops polish + direction + a11y basics |
47
+ | 文案 | `clarify` | Domain verbs |
48
+ | 微交互 | `delight` | 1–2 moments; `useMotion` |
49
+
50
+ **Brief wins.**
51
+
52
+ ## Combined workflow
53
+
54
+ ```text
55
+ 1. Style direction → user reference/description → cues → ask if uncertain
56
+ 2. Compose → recommend_page.suggestedSnippets / get_page_snippet + recommend_component
57
+ 3. Optional structure → get_golden_page only for whole-page block-order check
58
+ 4. Contract → get_component / validate_usage
59
+ 5. Craft → visual-craft (flat shells by default)
60
+ 6. Companion (opt.) → deepen inside the resolved direction
61
+ 7. Gate → validate_usage + validate_page
62
+ ```