@morya-ui/setup 0.3.3 → 0.3.4

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

@@ -1,119 +1,141 @@
-# Page layouts
-
-When generating a full page, pick a type and **mirror the golden-page block order**. Source: MCP `get_golden_page`.
-
-| Type | `get_golden_page` id |
-| --- | --- |
-| List | `list-page` |
-| Form (long / dedicated) | `form-page` |
-| List create/edit dialog | `form-in-dialog` |
-| Detail | `detail-page` |
-| Dashboard | `dashboard-page` |
-| Login | `login-page` |
-| Landing | `landing-page` |
-| Empty | `empty-state` |
-| Result / 403 / terminal | `result-page` |
-| Settings | `settings-page` |
-| Wizard | `wizard-form` |
-
-Via MCP: `recommend_page` → `get_golden_page`; local edits: `get_page_snippet` (`filters`, `toolbar`, `form-actions`, `scrollable-panel`, …).
-
-## Product defaults
-
-- **Short create/edit** (about ≤8 fields, single section): same-page `MDialog` + `MForm` — do not invent a new route form for every entity.
-- **Long / multi-section / wizard**: dedicated form page (`form-page`) or `MDrawer`.
-- **One-line success/error**: `message` API; title + detail or async notify → `toast` (see [feedback.md](feedback.md)).
-
-## List page — block order
-
-1. `MLayout fillViewport` + optional `MLayoutSider bordered`
-2. Sider `MMenu` (**every item has `icon`**)
-3. `MLayoutHeader` → `MBreadcrumb`
-4. `MLayoutContent` → `MPageContent`
-5. `MPageHeader` — page title + `#actions` primary (**one** filled primary in viewport)
-6. `MPageFilters` — `variant="filled"` optional; inner `MSpace wrap` + Input/Select + query/reset (query/reset → secondary); optional `collapsible` + `#advanced` for secondary fields
-7. Optional `MPageFilterChips` + closable `MTag` when filters are applied (after filters, before table)
-8. Optional `MPageToolbar` — batch actions only (no page title)
-9. `MTable` directly in content (usually **no** wrapping `MCard`); status → `MStatus`; `#empty` → `MEmpty`
-10. Pagination via `MTable` paginator or sibling `MPagination`
-11. Short create/edit → `MDialog` + `MForm` on the same page (default)
-
-Craft: [visual-craft.md](visual-craft.md) § Ops polish.
-
-## Form page — block order
-
-1. `MLayout fillViewport` → `MLayoutHeader` → `MBreadcrumb`
-2. `MPageContent width="narrow"`
-3. `MPageHeader` (title + description)
-4. `MPageSection variant="form"` → `MForm`
-5. `MPageSection variant="actions"` — save (`primary`) + cancel (`secondary`)
-
-## Dashboard — block order
-
-1. `MLayout fillViewport` → `MLayoutHeader` → `MBreadcrumb`
-2. `MPageContent density="spacious"` → `MPageHeader` (title + short domain description when useful)
-3. KPI row: `MGrid` + `MPageStat` (4 columns or responsive) — real metric names, not “Metric 1”
-4. Main split: `MCard shadow="always"` + `MEmpty` (chart pending) and/or recent `MTable` (row status → `MStatus`)
-
-Craft: spacious density + Ops polish; do not turn the first viewport into a marketing hero.
-
-## Composition standards
-
-| Topic | Prefer | Usually avoid |
-| --- | --- | --- |
-| Shell | `MLayout fillViewport` + `MPageContent` | Padding on `MLayoutContent` |
-| Sections | `MPageFilters` / `MPageToolbar` / `MPageSection` | Custom `.page-*`; extra `MCard` wrappers |
-| List table | `MTable` in `MPageContent` | Border card solely to wrap the table |
-| Spacing | `MSpace` / `MFlex` for peers; page gap from `MPageContent` | Nested padded divs stacking gaps |
-| Scroll | Rely on layout scroll; explicit `MScrollbar` for local panes | Forcing overflow on every content slot |
-| Color | `--m-*` | Page-level hex / rgb |
-| Feedback | One-line → `message`; danger → confirm dialog | Toast for a single short string |
-| A11y | Labels + icon `aria-label` | Unlabeled icon controls |
-
-Inline style is acceptable for control widths (e.g. filter `width: 14rem`).
-
-## Detail page — block order
-
-1. Same admin chrome as list (breadcrumb → `MPageContent`)
-2. `MPageHeader` — title, `MStatus` in `#actions` (or chip `MTag` for categories), primary/secondary/danger actions
-3. Summary `MPageSection` + property `MCard` (definition grid with `--m-*` only)
-4. Related data: `MCard` + `MTable` / tabs / timeline
-5. Short edit → same-page `MDialog` (`form-in-dialog`); long edit → `form-page` / `MDrawer`
-
-Mirror MCP `get_golden_page` `detail-page`.
-
-## List create/edit dialog — block order
-
-1. Stay on the list page (`MPageHeader` + filters/table; optional batch `MPageToolbar`)
-2. `MDialog` ~`28–36rem` + `MForm` fields
-3. Actions in Dialog `#footer` (cancel secondary/text + save primary)
-4. Success → `message.success` one-liner, then close
-
-Mirror MCP `get_golden_page` `form-in-dialog`.
-
-## Settings page — block order
-
-1. Admin chrome + `MPageContent width="narrow"`
-2. `MPageHeader` (title + short description)
-3. `MTabs` with **`v-model` + `:tabs`** (not `:items` / `:value`)
-4. Per tab: `MPageSection variant="form"` + `MForm` + save in `variant="actions"`
-5. Dangerous zone last: `severity="danger"` + confirm
-
-Mirror MCP `get_golden_page` `settings-page`.
-
-## Wizard — block order
-
-1. Narrow `MPageContent` + `MPageHeader`
-2. `MStepper v-model` + **`:steps`** (not `:items`)
-3. One form/job per step; sticky `上一步` / `下一步` / `创建`
-4. Success → `result-page` / `MResult`
-
-Mirror MCP `get_golden_page` `wizard-form`.
-
-## Hybrids
-
-- List + row edit dialog → `form-in-dialog` golden (or list golden + dialog body).
-- List + side detail → list + `MDrawer`.
-- Resource detail → `detail-page` golden.
-- Settings without admin chrome → still use `MPageContent` + `MPageSection`; omit sider only if the host app already provides chrome.
-- Non-Ops surfaces (auth, landing, empty, wizard) → [surfaces.md](surfaces.md), not these golden orders.
+# Page layouts
+
+When generating a full page, pick a type and **mirror the golden-page block order**. Source: MCP `get_golden_page`.
+
+| Type | `get_golden_page` id |
+| --- | --- |
+| List (structure · soft) | `list-page` |
+| List · dense craft | `list-page-dense` |
+| List · rail craft | `list-page-rail` |
+| Form (long / dedicated) | `form-page` |
+| List create/edit dialog | `form-in-dialog` |
+| Detail | `detail-page` |
+| Dashboard | `dashboard-page` |
+| Login | `login-page` |
+| Landing | `landing-page` |
+| Empty | `empty-state` |
+| Result / 403 / terminal | `result-page` |
+| Settings | `settings-page` |
+| Wizard | `wizard-form` |
+
+Via MCP: `recommend_page({ style? })` → resolves list craft (`dense`→`list-page-dense`, `rail`→`list-page-rail`, else `list-page`) → `get_golden_page`; then apply `styleDirection` (or a user reference). Local edits: `get_page_snippet` (`filters`, `toolbar`, `form-actions`, `scrollable-panel`, …). Styles: `list_style_presets` / `get_style_preset`.
+
+**List craft variants** share the same block order; only density / chrome / copy change. Prefer `recommend_page` style routing over hand-picking unless the user named a variant id.
+
+## Product defaults
+
+- **Short create/edit** (about ≤8 fields, single section): same-page `MDialog` + `MForm` — do not invent a new route form for every entity.
+- **Long / multi-section / wizard**: dedicated form page (`form-page`) or `MDrawer`.
+- **One-line success/error**: `message` API; title + detail or async notify → `toast` (see [feedback.md](feedback.md)).
+
+## List page — block order
+
+1. `MLayout fillViewport` + optional `MLayoutSider bordered`
+2. Sider `MMenu` (**every item has `icon`**)
+3. `MLayoutHeader` → `MBreadcrumb`
+4. `MLayoutContent` → `MPageContent` (**add `fill` only when the height rule below applies**)
+5. `MPageHeader` — page title + `#actions` primary (**one** filled primary in viewport)
+6. `MPageFilters` — `variant="filled"` optional; inner `MSpace wrap` + Input/Select + query/reset (query/reset → secondary); optional `collapsible` + `#advanced` for secondary fields
+7. Optional `MPageFilterChips` + closable `MTag` when filters are applied (after filters, before table)
+8. Optional `MPageToolbar` — batch actions only (no page title)
+9. `MTable` directly in content (usually **no** wrapping `MCard`); status → `MStatus`; `#empty` → `MEmpty`
+10. Pagination via `MTable paginator` or sibling `MPagination`
+11. Short create/edit → `MDialog` + `MForm` on the same page (default)
+
+### List height — decide, don’t always fill
+
+Use **`MPageContent fill` + `MTable fill paginator`** only when **most** of these are true:
+
+- The screen is a **full-viewport admin list** (`MLayout fillViewport`) whose **main job** is browsing one data table
+- Leaving the table content-sized would leave a large empty band with pagination floating mid-page
+- You want **table-body scroll** and pagination pinned to the **bottom of the page**
+
+Skip `fill` when any of these apply:
+
+- Embedded / secondary tables (dashboard “recent”, detail related lists, cards)
+- Short or sparse pages where a content-sized table looks fine
+- The page should **scroll as a whole document** (long filters + notes + table)
+- Tables inside `MDialog` / `MDrawer`
+- Mixed layouts where the table is not the sole middle region
+
+Do not invent `min-height` / `calc` hacks when `fill` is the right tool — and do not force `fill` when it isn’t.
+
+Craft: [visual-craft.md](visual-craft.md) § Ops polish.
+
+## Form page — block order
+
+1. `MLayout fillViewport` → `MLayoutHeader` → `MBreadcrumb`
+2. `MPageContent width="narrow"`
+3. `MPageHeader` (title + description)
+4. `MPageSection variant="form"` → `MForm`
+5. `MPageSection variant="actions"` — save (`primary`) + cancel (`secondary`)
+
+## Dashboard — block order
+
+1. `MLayout fillViewport` → `MLayoutHeader` → `MBreadcrumb`
+2. `MPageContent density="spacious"` → `MPageHeader` (title + short domain description when useful)
+3. KPI row: `MGrid` + `MPageStat` (4 columns or responsive) — real metric names, not “Metric 1”
+4. Main split: `MCard shadow="always"` + `MEmpty` (chart pending) and/or recent `MTable` (row status → `MStatus`)
+
+Craft: spacious density + Ops polish; do not turn the first viewport into a marketing hero.
+
+## Composition standards
+
+| Topic | Prefer | Usually avoid |
+| --- | --- | --- |
+| Shell | `MLayout fillViewport` + `MPageContent` | Padding on `MLayoutContent` |
+| Sections | `MPageFilters` / `MPageToolbar` / `MPageSection` | Custom `.page-*`; extra `MCard` wrappers |
+| List table | `MTable` in `MPageContent`; add `fill` only when the height rule applies | Border card solely to wrap the table; forcing `fill` on every table |
+| Spacing | `MSpace` / `MFlex` for peers; page gap from `MPageContent` | Nested padded divs stacking gaps |
+| Scroll | Full-viewport main lists may use table-body scroll via `fill`; otherwise layout / local `MScrollbar` | Forcing overflow on every content slot; stacked page + table scrollbars without reason |
+| Color | `--m-*` | Page-level hex / rgb |
+| Feedback | One-line → `message`; danger → confirm dialog | Toast for a single short string |
+| A11y | Labels + icon `aria-label` | Unlabeled icon controls |
+
+Inline style is acceptable for control widths (e.g. filter `width: 14rem`).
+
+## Detail page — block order
+
+1. Same admin chrome as list (breadcrumb → `MPageContent`)
+2. `MPageHeader` — title, `MStatus` in `#actions` (or chip `MTag` for categories), primary/secondary/danger actions
+3. Summary `MPageSection` + property `MCard` (definition grid with `--m-*` only)
+4. Related data: `MCard` + `MTable` / tabs / timeline
+5. Short edit → same-page `MDialog` (`form-in-dialog`); long edit → `form-page` / `MDrawer`
+
+Mirror MCP `get_golden_page` `detail-page`.
+
+## List create/edit dialog — block order
+
+1. Stay on the list page (`MPageHeader` + filters/table; optional batch `MPageToolbar`)
+2. `MDialog` ~`28–36rem` + `MForm` fields
+3. Actions in Dialog `#footer` (cancel secondary/text + save primary)
+4. Success → `message.success` one-liner, then close
+
+Mirror MCP `get_golden_page` `form-in-dialog`.
+
+## Settings page — block order
+
+1. Admin chrome + `MPageContent width="narrow"`
+2. `MPageHeader` (title + short description)
+3. `MTabs` with **`v-model` + `:tabs`** (not `:items` / `:value`)
+4. Per tab: `MPageSection variant="form"` + `MForm` + save in `variant="actions"`
+5. Dangerous zone last: `severity="danger"` + confirm
+
+Mirror MCP `get_golden_page` `settings-page`.
+
+## Wizard — block order
+
+1. Narrow `MPageContent` + `MPageHeader`
+2. `MStepper v-model` + **`:steps`** (not `:items`)
+3. One form/job per step; sticky `上一步` / `下一步` / `创建`
+4. Success → `result-page` / `MResult`
+
+Mirror MCP `get_golden_page` `wizard-form`.
+
+## Hybrids
+
+- List + row edit dialog → `form-in-dialog` golden (or list golden + dialog body).
+- List + side detail → list + `MDrawer`.
+- Resource detail → `detail-page` golden.
+- Settings without admin chrome → still use `MPageContent` + `MPageSection`; omit sider only if the host app already provides chrome.
+- Non-Ops surfaces (auth, landing, empty, wizard) → [surfaces.md](surfaces.md), not these golden orders.

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

@@ -1,61 +1,64 @@
-# Review checklist
-
-## Contract (all lanes)
-
-- [ ] Only `morya-ui` UI primitives (no second kit)
-- [ ] `morya-ui/styles.css` imported at app/demo entry
-- [ ] `MConfigProvider` at a sensible root when building a full screen
-- [ ] No invented props / events / slots (MCP `get_component` / docs checked)
-- [ ] MCP **`validate_usage`** run; no unresolved `unknown-prop` / `unknown-event`
-- [ ] Select vs Dropdown roles correct
-- [ ] `MTable` uses `rows` (not `data`)
-- [ ] One-line results use `message`; summary+detail / async use `toast`
-- [ ] Destructive flows use confirm dialogs
-- [ ] MCP **`validate_page`** run when generating a full page (advisory suggestions addressed or consciously waived)
-
-## Craft (all lanes — default pass)
-
-- [ ] Lane craft from [visual-craft.md](visual-craft.md) applied (Ops polish and/or atmosphere)
-- [ ] At most one primary filled button in the main viewport
-- [ ] Copy is domain-real; empty / error states say what to do next
-- [ ] No AI-default look clusters unless the brief asked for them
-- [ ] Motion (if any) is 1–3 intentional moments and follows `useMotion` / `data-m-motion` (not OS `prefers-reduced-motion`)
-
-## Ops
-
-- [ ] Matches golden / [page-layouts.md](page-layouts.md) block order
-- [ ] `MPage*` used instead of ad-hoc page chrome where applicable
-- [ ] Tables not wrapped in decorative `MCard` solely for borders
-- [ ] Filters / toolbar / form actions follow documented patterns
-- [ ] Sider `MMenu` items have icons; status cells use `MStatus` (not decorative `MTag`)
-- [ ] Empty table uses `MEmpty` (or equivalent next-action empty)
-- [ ] No marketing hero bolted onto a CRUD shell
-
-## Account / Flow / System
-
-- [ ] Primary CTA obvious; escape paths present (back / home / support)
-- [ ] Auth errors stay on the form via field `errorMessage` or a token `role="alert"` (`<MMessage>` is the message host, not an inline alert)
-- [ ] Empty uses `MEmpty` (or table `#empty` with `MEmpty`); success / HTTP errors use `MResult`
-- [ ] Empty / success states tell the user the next action
-- [ ] Inline status prefers `MStatus`; chip-like labels use `MTag`
-- [ ] Wizard steps: one job each; actions labeled clearly
-- [ ] Brand / empty atmosphere uses token-only CSS (see visual-craft recipes)
-
-## Express
-
-- [ ] Short design plan existed (subject, palette roles, signature)
-- [ ] First viewport has one job (not a dashboard of promos)
-- [ ] Controls still `M*`; colors/spacing map to `--m-*` / theme
-- [ ] Avoided AI-default looks unless brief requested them ([visual-craft.md](visual-craft.md))
-- [ ] Motion limited and respectful of reduced-motion
-
-## Tokens, a11y, responsive
-
-- [ ] No raw hex/rgb theme colors in new CSS (control widths OK inline; `color-mix` from `--m-*` OK)
-- [ ] Labels visible; icon buttons have `aria-label`
-- [ ] Usable on a narrow viewport
-- [ ] Focus visible on interactive elements
-
-When MCP is available, contract checks above (**`validate_usage`** / **`validate_page`**) are required — not optional.
-
-If the project has `pnpm check:colors`, suggest running it after edits.
+# Review checklist
+
+## Contract (all lanes)
+
+- [ ] Only `morya-ui` UI primitives (no second kit)
+- [ ] `morya-ui/styles.css` imported at app/demo entry
+- [ ] `MConfigProvider` at a sensible root when building a full screen
+- [ ] No invented props / events / slots (MCP `get_component` / docs checked)
+- [ ] MCP **`validate_usage`** run; no unresolved `unknown-prop` / `unknown-event`
+- [ ] Select vs Dropdown roles correct
+- [ ] `MTable` uses `rows` (not `data`)
+- [ ] One-line results use `message`; summary+detail / async use `toast`
+- [ ] Destructive flows use confirm dialogs
+- [ ] MCP **`validate_page`** run when generating a full page (advisory suggestions addressed or consciously waived)
+
+## Craft (all lanes — default pass)
+
+- [ ] Style direction resolved (reference / named preset / inferred / offered) — not silent `quiet` every time
+- [ ] Lane craft from [visual-craft.md](visual-craft.md) + [style-presets.md](style-presets.md) applied
+- [ ] If companions ran: still only `M*` + `--m-*`; no second kit ([optional-companions.md](optional-companions.md))
+- [ ] At most one primary filled button in the main viewport
+- [ ] Copy is domain-real; empty / error states say what to do next
+- [ ] No AI-default look clusters unless the brief asked for them
+- [ ] Motion (if any) is 1–3 intentional moments and follows `useMotion` / `data-m-motion` (not OS `prefers-reduced-motion`)
+
+## Ops
+
+- [ ] Matches golden / [page-layouts.md](page-layouts.md) block order
+- [ ] `MPage*` used instead of ad-hoc page chrome where applicable
+- [ ] List height: if this is a full-viewport main data list, consider `MPageContent fill` + `MTable fill`; if embedded/short/document-scroll, skip `fill`
+- [ ] Tables not wrapped in decorative `MCard` solely for borders
+- [ ] Filters / toolbar / form actions follow documented patterns
+- [ ] Sider `MMenu` items have icons; status cells use `MStatus` (not decorative `MTag`)
+- [ ] Empty table uses `MEmpty` (or equivalent next-action empty)
+- [ ] No marketing hero bolted onto a CRUD shell
+
+## Account / Flow / System
+
+- [ ] Primary CTA obvious; escape paths present (back / home / support)
+- [ ] Auth errors stay on the form via field `errorMessage` or a token `role="alert"` (`<MMessage>` is the message host, not an inline alert)
+- [ ] Empty uses `MEmpty` (or table `#empty` with `MEmpty`); success / HTTP errors use `MResult`
+- [ ] Empty / success states tell the user the next action
+- [ ] Inline status prefers `MStatus`; chip-like labels use `MTag`
+- [ ] Wizard steps: one job each; actions labeled clearly
+- [ ] Brand / empty atmosphere uses token-only CSS (see visual-craft recipes)
+
+## Express
+
+- [ ] Short design plan existed (subject, palette roles, signature)
+- [ ] First viewport has one job (not a dashboard of promos)
+- [ ] Controls still `M*`; colors/spacing map to `--m-*` / theme
+- [ ] Avoided AI-default looks unless brief requested them ([visual-craft.md](visual-craft.md))
+- [ ] Motion limited and respectful of reduced-motion
+
+## Tokens, a11y, responsive
+
+- [ ] No raw hex/rgb theme colors in new CSS (control widths OK inline; `color-mix` from `--m-*` OK)
+- [ ] Labels visible; icon buttons have `aria-label`
+- [ ] Usable on a narrow viewport
+- [ ] Focus visible on interactive elements
+
+When MCP is available, contract checks above (**`validate_usage`** / **`validate_page`**) are required — not optional.
+
+If the project has `pnpm check:colors`, suggest running it after edits.

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

@@ -0,0 +1,73 @@
+# Style direction & presets
+
+Golden pages lock **block order and APIs**. They are **not** the only allowed look. Pick a visual direction **before** coding so generated pages stop looking identical and stiff.
+
+## Resolution order (required)
+
+1. **Reference first** — user supplied a screenshot, mock, existing page, URL, or “像 XX / like X”.
+   - Extract: density, hierarchy, surfaces (flat vs filled), accent placement, copy tone.
+   - Remap onto `--m-*` + `M*` only. Do **not** switch UI kits or copy hex themes.
+2. **Named preset** — user asked for `soft` / 柔和留白 / `dense` / …
+3. **Prompt cues** — industry or mood words in the brief → infer the closest preset and **name it** in the reply.
+4. **Offer a choice** — still unclear → ask **one** short question with 3–4 options (ids below). If the user says “直接写 / just ship”, pick by domain heuristic — **do not always use `quiet`**.
+
+MCP: `list_style_presets` / `get_style_preset` / `recommend_page({ style })` → `styleDirection`.
+
+## Presets (user-selectable)
+
+| Id | 中文 | Best for | Distinct craft | List golden |
+| --- | --- | --- | --- | --- |
+| `quiet` | 克制经典 | Serious enterprise admin | Flat chrome, golden-like Ops polish | `list-page` |
+| `soft` | 柔和留白 | Ops / content admin | `density="spacious"`, filled filters, short descriptions | `list-page` |
+| `dense` | 高密度工具台 | Monitoring / power users | `density="compact"`, `size="small"` table, tight filters | `list-page-dense` |
+| `rail` | 侧栏强调 | Branded B2B shells | Token `color-mix` wash on sider/header only | `list-page-rail` |
+| `studio` | 工作室呼吸感 | Design / collab / knowledge | Stronger header hierarchy; optional one radial wash | `list-page` |
+| `ink` | 线框极简 | Tool / docs feel | Plain filters, bordered table, little fill | `list-page` |
+
+Full apply/avoid lists: MCP `get_style_preset` or `@morya-ui/mcp` `style-presets`. `recommend_page({ style })` routes list scaffolds to the matching golden when a craft variant exists.
+
+### Domain heuristics (when user says “直接写”)
+
+| Cue in brief | Prefer |
+| --- | --- |
+| 金融 / 合规 / 政务 | `quiet` or `ink` |
+| 运营 / 内容 / 教育 | `soft` |
+| 监控 / 运维 / 交易 | `dense` |
+| 强调品牌色 / LOGO | `rail` |
+| 设计 / 协作 / 知识库 | `studio` |
+| 登录 / 落地 / 品牌营销 | Account/Express atmosphere — not an Ops preset |
+
+## How to apply on Ops pages
+
+1. Mirror golden **structure** via `recommend_page` / `get_golden_page` (list: `list-page` / `list-page-dense` / `list-page-rail` by style).
+2. Apply the chosen preset’s density / filter surface / header copy / chrome wash (or follow the craft golden when one exists).
+3. Still run [visual-craft.md](visual-craft.md) § Ops polish (one primary, menu icons, `MStatus`, designed empty).
+4. Fill height remains **conditional** — see [page-layouts.md](page-layouts.md) § List height.
+
+## Reference style checklist
+
+When following a reference:
+
+- [ ] Hierarchy (what is loud vs quiet) matched with type/space, not random cards
+- [ ] Density matched (`compact` / default / `spacious`)
+- [ ] Surfaces matched (plain vs filled filters; bordered table or not)
+- [ ] Accent placement matched (chrome only vs content) using `--m-*` / `color-mix`
+- [ ] Interaction patterns stay morya-ui (`MTable` `rows`, `message`, etc.)
+
+## Anti-patterns
+
+- Treating the golden page as the only allowed aesthetic
+- Asking nothing and always emitting `quiet`
+- Inventing a second component library to “match the reference”
+- Turning Ops into a marketing landing to “look less stiff”
+- Letting Frontend Design / Impeccable / UI-UX-Pro-Max swap stacks or ignore `M*` / `--m-*` (see [optional-companions.md](optional-companions.md))
+
+## Companion pairing
+
+| Preset | Pairs well with |
+| --- | --- |
+| `quiet` / `ink` | Impeccable Operate + `quieter` / `polish` |
+| `soft` / `studio` | Frontend Design hierarchy cues; Impeccable `bolder` (one signature only) |
+| `dense` | Impeccable Operate — scanability over decoration |
+| `rail` | Frontend Design brand panel taste on **chrome only** |
+| Express (no Ops preset) | Frontend Design design plan → Impeccable `polish` |