@fui-org/fui-cli 2.1.3 → 2.2.0

package/skills/{fui-skill → fui}/references/design-modes.md

@@ -1,57 +1,57 @@
-# Design System — App-mode vs Web-mode
-
-> Owns: **aesthetic mode decision, `border-radius` limits, the `{projectId}/DESIGN.md` accumulation loop**. Approved class/prop/style: [controls-styling-vocabulary.md](controls-styling-vocabulary.md). Standard dialog/form anatomy: `fui design read fui`.
-
-Before writing any `controls`, decide the module's mode. This is the first, **hard** decision — each mode has its own aesthetic rules; never borrow across.
-
----
-
-## 1. The two modes
-
-|                                        | **App-mode** (default)                                                    | **Web-mode**                                                           |
-| -------------------------------------- | ------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
-| Applies to                             | Management software: CRUD, lists, forms, internal dashboards, permissions | Landing pages, product intros, public pages (usually `HTMLOnly: true`) |
-| Aesthetic source                       | **ONLY** `fui design read fui` + `controls-styling-vocabulary.md`         | Brand DESIGN.md (`fui design list` → `fui design read <brand>`)        |
-| Brand DESIGN.md (nike, linear, bmw...) | **FORBIDDEN** — even "just the colors"                                    | Allowed, pick by tone/industry                                         |
-| Custom style/class                     | **FORBIDDEN** (per `controls-styling-vocabulary.md`)                      | Allowed in `header.html`                                               |
-| Component preference                   | `f-*` / `v-*` per FUI standard                                            | Free HTML/CSS                                                          |
-
-**Web-mode signals**: `HTMLOnly: true` in `_moduleInfo.json`, or user says "landing page / intro page / public home page". Everything else → App-mode. Unsure → **ask the user**.
-
-⚠️ `HTMLOnly: true` is not just an aesthetic signal: the server then embeds **no** V2/V3 JS/CSS library (not Vue, Vuetify, jQuery, lodash, MDI, `projectdefaultstyle.css`) — declare everything needed in the module itself. Read [module-structure.md §HTMLOnly=true: no library is embedded](module-structure.md#htmlonlytrue-no-library-is-embedded) **before** writing the first tag.
-
-**Mandatory in App-mode**: before writing/editing layout, dialog or form, load `fui design read fui` (if not loaded this session) for the standard anatomy (f-dialog-style `v-dialog`, floating-label form, color/icon palette), and read `controls-styling-vocabulary.md`. Finish this reading **before sketching or writing controls** — never design while guessing rules from memory.
-
-Before designing, confirm the three core UI rule groups from their owner files: icon sizes and styling vocabulary (`controls-styling-vocabulary.md`), dialog anatomy/actions (`fui design read fui` + `ui-dialog-patterns.md`), and vertical alignment of controls in a row (`controls-patterns.md` §Vertical centering). If the task has a dialog, also read `ui-dialog-patterns.md` before sketching it.
-
----
-
-## 2. Per-project override — `{projectId}/DESIGN.md`
-
-If `{projectId}/DESIGN.md` exists in the workspace, it **overrides** same-topic rules of the active mode (unmentioned topics follow the common standard). **Always check it before designing.**
-
----
-
-## 3. Design-rule accumulation loop (MANDATORY)
-
-When the user critiques a UI detail ("dialog must...", "this button's color...", "don't use..."):
-
-1. Fix the module per the feedback.
-2. **Immediately write the rule into `{projectId}/DESIGN.md`** (create it if missing — use the template at the end of `fui design read fui`), phrased as a **general rule + correct/incorrect JSON examples**, not just the specific incident.
-3. If the rule clearly applies to EVERY project → tell the user "this rule should go into the common standard `fui/DESIGN.md`" and propose the content — **only the user decides** to update the common standard.
-
----
-
-## 4. `border-radius` limits
-
-Apply to **EVERY brand/style, even when a brand DESIGN.md suggests larger values**:
-
-| Frame type                                                         | Max `border-radius` |
-| ------------------------------------------------------------------ | ------------------- |
-| Large frames (card container, dialog, section wrapper, main panel) | `12px`              |
-| Medium frames (large button, input group, sub-panel, toolbar)      | `8px`               |
-| Small frames (small button, chip, badge, tag, icon container)      | `6px`               |
-
-If a brand DESIGN.md suggests a larger radius (heavily rounded brands like Airbnb, Notion, Nike...) → **lower it to the allowed max**; never use the original value.
-
-**Exception**: fully round elements (avatar, round dot icon button) use `border-radius: 50%` — outside these limits.
+# Design System — App-mode vs Web-mode
+
+> Owns: **aesthetic mode decision, `border-radius` limits, the `{projectId}/DESIGN.md` accumulation loop**. Approved class/prop/style: [controls-styling-vocabulary.md](controls-styling-vocabulary.md). Standard dialog/form anatomy: `fui design read fui`.
+
+Before writing any `controls`, decide the module's mode. This is the first, **hard** decision — each mode has its own aesthetic rules; never borrow across.
+
+---
+
+## 1. The two modes
+
+|                                        | **App-mode** (default)                                                    | **Web-mode**                                                           |
+| -------------------------------------- | ------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
+| Applies to                             | Management software: CRUD, lists, forms, internal dashboards, permissions | Landing pages, product intros, public pages (usually `HTMLOnly: true`) |
+| Aesthetic source                       | **ONLY** `fui design read fui` + `controls-styling-vocabulary.md`         | Brand DESIGN.md (`fui design list` → `fui design read <brand>`)        |
+| Brand DESIGN.md (nike, linear, bmw...) | **FORBIDDEN** — even "just the colors"                                    | Allowed, pick by tone/industry                                         |
+| Custom style/class                     | **FORBIDDEN** (per `controls-styling-vocabulary.md`)                      | Allowed in `header.html`                                               |
+| Component preference                   | `f-*` / `v-*` per FUI standard                                            | Free HTML/CSS                                                          |
+
+**Web-mode signals**: `HTMLOnly: true` in `_moduleInfo.json`, or user says "landing page / intro page / public home page". Everything else → App-mode. Unsure → **ask the user**.
+
+⚠️ `HTMLOnly: true` is not just an aesthetic signal: the server then embeds **no** V2/V3 JS/CSS library (not Vue, Vuetify, jQuery, lodash, MDI, `projectdefaultstyle.css`) — declare everything needed in the module itself. Read [module-structure.md §HTMLOnly=true: no library is embedded](module-structure.md#htmlonlytrue-no-library-is-embedded) **before** writing the first tag.
+
+**Mandatory in App-mode**: before writing/editing layout, dialog or form, load `fui design read fui` (if not loaded this session) for the standard anatomy (f-dialog-style `v-dialog`, floating-label form, color/icon palette), and read `controls-styling-vocabulary.md`. Finish this reading **before sketching or writing controls** — never design while guessing rules from memory.
+
+Before designing, confirm the three core UI rule groups from their owner files: icon sizes and styling vocabulary (`controls-styling-vocabulary.md`), dialog anatomy/actions (`fui design read fui` + `ui-dialog-patterns.md`), and vertical alignment of controls in a row (`controls-patterns.md` §Vertical centering). If the task has a dialog, also read `ui-dialog-patterns.md` before sketching it.
+
+---
+
+## 2. Per-project override — `{projectId}/DESIGN.md`
+
+If `{projectId}/DESIGN.md` exists in the workspace, it **overrides** same-topic rules of the active mode (unmentioned topics follow the common standard). **Always check it before designing.**
+
+---
+
+## 3. Design-rule accumulation loop (MANDATORY)
+
+When the user critiques a UI detail ("dialog must...", "this button's color...", "don't use..."):
+
+1. Fix the module per the feedback.
+2. **Immediately write the rule into `{projectId}/DESIGN.md`** (create it if missing — use the template at the end of `fui design read fui`), phrased as a **general rule + correct/incorrect JSON examples**, not just the specific incident.
+3. If the rule clearly applies to EVERY project → tell the user "this rule should go into the common standard `fui/DESIGN.md`" and propose the content — **only the user decides** to update the common standard.
+
+---
+
+## 4. `border-radius` limits
+
+Apply to **EVERY brand/style, even when a brand DESIGN.md suggests larger values**:
+
+| Frame type                                                         | Max `border-radius` |
+| ------------------------------------------------------------------ | ------------------- |
+| Large frames (card container, dialog, section wrapper, main panel) | `12px`              |
+| Medium frames (large button, input group, sub-panel, toolbar)      | `8px`               |
+| Small frames (small button, chip, badge, tag, icon container)      | `6px`               |
+
+If a brand DESIGN.md suggests a larger radius (heavily rounded brands like Airbnb, Notion, Nike...) → **lower it to the allowed max**; never use the original value.
+
+**Exception**: fully round elements (avatar, round dot icon button) use `border-radius: 50%` — outside these limits.