@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.
- package/LICENSE +21 -0
- package/README.md +119 -103
- package/bin/morya-ui-setup.js +14 -14
- package/catalog/skills.json +46 -46
- package/package.json +4 -5
- package/src/__tests__/mcp.test.mjs +141 -0
- package/src/cli.mjs +330 -335
- package/src/copy-template.mjs +78 -78
- package/src/fs-utils.mjs +24 -24
- package/src/install.mjs +134 -63
- package/src/mcp.mjs +220 -50
- package/src/package-json.mjs +30 -30
- package/src/skills.mjs +224 -223
- package/src/styles.mjs +119 -119
- package/template/.agents/skills/morya-ui-pages/SKILL.md +191 -184
- package/template/.agents/skills/morya-ui-pages/evals/evals.json +89 -89
- package/template/.agents/skills/morya-ui-pages/references/component-index.md +99 -99
- package/template/.agents/skills/morya-ui-pages/references/decision-recipes.md +72 -5
- package/template/.agents/skills/morya-ui-pages/references/design-system.md +101 -101
- package/template/.agents/skills/morya-ui-pages/references/feedback.md +68 -68
- package/template/.agents/skills/morya-ui-pages/references/optional-companions.md +62 -107
- package/template/.agents/skills/morya-ui-pages/references/page-layouts.md +133 -141
- package/template/.agents/skills/morya-ui-pages/references/review-checklist.md +76 -64
- package/template/.agents/skills/morya-ui-pages/references/style-presets.md +68 -73
- package/template/.agents/skills/morya-ui-pages/references/surfaces.md +91 -91
- package/template/.agents/skills/morya-ui-pages/references/visual-craft.md +131 -221
- package/template/.cursor/rules/coding-style.mdc +41 -41
- package/template/.cursor/rules/component-usage.mdc +41 -41
- package/template/.cursor/rules/design-system.mdc +18 -17
- package/template/.cursor/rules/page-layout.mdc +97 -97
- package/template/AGENTS.md +33 -0
- package/template/DESIGN.md +81 -59
- 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 +
|
|
4
|
-
|
|
5
|
-
Installed market skills
|
|
6
|
-
|
|
7
|
-
## Conflict rule (hard)
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
-
|
|
16
|
-
-
|
|
17
|
-
-
|
|
18
|
-
-
|
|
19
|
-
|
|
20
|
-
## When to load
|
|
21
|
-
|
|
22
|
-
| Need | Prefer companion |
|
|
23
|
-
| --- | --- | --- |
|
|
24
|
-
| Express /
|
|
25
|
-
| Named polish / audit / bolder / quieter
|
|
26
|
-
|
|
|
27
|
-
| a11y
|
|
28
|
-
| Routine Ops
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
|
43
|
-
|
|
|
44
|
-
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
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
|
+
```
|