nuxt-unified-ui 0.5.17 → 0.5.18

package/README.md

@@ -20,7 +20,7 @@ vpr serve
 
 ## Agent Skills
 
-One installable Agent Skill lives under `skills/nuxt-unified-ui/` (`npx skills` compatible). It covers the layer API **and** mandatory Nuxt code style (forms, dialogs, radashi, formatting). When an agent finishes implementing work, it runs `/nuxt-unified-ui apply`: one subagent per `.vue`, `.ts`, or `.js` file applies the skill's logical, structural, and code-style rules — to every file on `dev` / `main` / `master`, or to the current branch's changed files elsewhere. You can also invoke `/nuxt-unified-ui apply` directly.
+One installable Agent Skill lives under `skills/nuxt-unified-ui/` (`npx skills` compatible). It covers the layer API **and** mandatory Nuxt code style (forms, dialogs, radashi, formatting). When an agent finishes implementing work, it runs `/nuxt-unified-ui apply`: one subagent per `.vue`, `.ts`, or `.js` file, launched using a cheap fast model, applies the skill's logical, structural, and code-style rules. On `dev`, `main`, or `master`, it targets uncommitted files and falls back to the whole project when the branch is clean; outside a Git worktree it also targets the whole project. On other branches, it targets files changed relative to the base branch. You can also invoke `/nuxt-unified-ui apply` directly.
 
 ```bash
 npx skills add . --list

package/app/components/un-table.vue

@@ -163,6 +163,16 @@ function handleRowSelect(_event, row) {
 }
 
 
+const rowSelectHandler = computed(() => {
+  if (!props.rowTo) {
+    return undefined;
+  }
+  else {
+    return handleRowSelect;
+  }
+});
+
+
 /* pagination */
 
 const pageSizeItems = computed(() => {
@@ -194,7 +204,7 @@ const pageSizeItems = computed(() => {
       :column-pinning="columnPinning"
       :ui="tableUi"
       :meta="props.meta"
-      @select="props.rowTo ? handleRowSelect : undefined">
+      :on-select="rowSelectHandler">
 
       <template v-for="(_, name) in $slots" #[name]="slotData">
         <slot

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-unified-ui",
   "type": "module",
-  "version": "0.5.17",
+  "version": "0.5.18",
   "main": "./nuxt.config.ts",
   "types": "./index.d.ts",
   "exports": {

package/skills/nuxt-unified-ui/SKILL.md

@@ -8,9 +8,10 @@ description: >-
   resource-manager, createUnifiedResourceController). Use when package.json
   depends on nuxt-unified-ui, nuxt.config extends it, or code uses these
   APIs. Whenever implementation work is finished, run `/nuxt-unified-ui
-  apply`, which applies the skill file by file to the whole project (on dev,
-  main, or master) or to the current branch's changed files; users can also
-  invoke it directly.
+  apply`, which applies the skill file by file to uncommitted work (on dev,
+  main, or master) or to the current branch's changed files, falling back to
+  the whole project when there is no Git worktree or the default branch is
+  clean; users can also invoke it directly.
 ---
 
 # nuxt-unified-ui
@@ -21,7 +22,7 @@ The main agent decides what code exists, where it lives, and which APIs it calls
 
 Whenever you finish implementing work that added or edited a `.vue`, `.js`, or `.ts` file, run `/nuxt-unified-ui apply` before your final reply: follow [references/apply.md](references/apply.md). Do the same when the skill is invoked with the argument `apply`, or the user asks to apply nuxt-unified-ui across the project or the current branch. Invoked without an argument, the skill only loads its guidance for the task at hand.
 
-On `dev`, `main`, or `master` it processes every `.vue`, `.js`, and `.ts` file; on any other branch, only the files that branch added or changed relative to its base branch. One subagent per file applies the logical, structural, and code-style rules, then the main agent carries out the cross-file follow-ups.
+On `dev`, `main`, or `master` it processes uncommitted `.vue`, `.js`, and `.ts` files; when that branch is clean, or the project is not a Git worktree, it processes every eligible file. On any other branch, it processes only the files that branch added or changed relative to its base branch. One subagent per file, launched using a cheap fast model, applies the logical, structural, and code-style rules, then the main agent carries out the cross-file follow-ups.
 
 ## APIs
 
@@ -116,7 +117,67 @@ Make these choices while implementing. The apply pipeline checks them again afte
 
 ## i18n
 
+**i18n is optional. Conform to the project's current state.**
+
+- If the project does not translate its own strings (literal text, no `$t`, no locale files of its own), keep writing literal strings. Do not introduce `$t`, locale files, or i18n config unless the user decides to integrate i18n.
+- If the project already uses i18n in another layout, follow that layout.
+- The rules below apply once the project has decided to integrate i18n, or already follows them. This layer's own `$t` usage does not count as a decision for the project.
+- Examples in the references often use English literals for brevity. In an i18n project those strings are `$t('...')` keys.
+
+**When i18n is integrated**
+
 - Every user-facing string goes through `$t`, in templates and in script. `$t` is available in both without calling `useI18n()`.
-- Add each new key to every locale file the project has (the layer ships `en.json` and `de.json` in `i18n/locales/`).
-- `un.*` keys belong to this layer. `common.*` holds shared labels such as submit and cancel. App keys go under a feature namespace (`patients.single.title`).
-- Examples in the references often use English literals for brevity. In real code those strings are `$t('...')` keys.
+- Global i18n settings — `strategy`, `defaultLocale`, and the full `locales` list (codes, names, languages) — go in the `nuxt.config.ts` of the **aarde layer**: the project's base app layer that extends `nuxt-unified-ui` (for example `layers/100-aarde/`). If the project has no aarde layer, use the layer that extends `nuxt-unified-ui`.
+- Every other layer (feature) keeps its own locale files in its own `i18n/locales/<code>.json`. In its own `nuxt.config.ts` it declares only those files — `i18n: { locales: [{ code, file }] }` — and no other i18n settings. `@nuxtjs/i18n` loads a layer's locale files only when that layer lists them, then merges the same locale from every layer into one message tree.
+- The layer that owns a file is the nearest directory above it with a `nuxt.config`. Its strings go in that layer's locale files only — never in another layer's or the host's.
+- Each layer's locale file has **exactly one top-level key**: the layer's namespace, such as `patients` or `billing`. Every key nests under it (`$t('patients.single.title')`), so merged trees never clash.
+- Add every new key to each locale that layer declares.
+- This layer owns two top-level keys: `un` for its components and `common` for shared labels (`common.submit`, `common.cancel`, `common.close`, …). Reuse `common.*` instead of duplicating those labels, but never add keys to `un` or `common` from another layer.
+
+Aarde layer `nuxt.config.ts` (fragment):
+
+```ts
+i18n: {
+  strategy: 'no_prefix',
+  defaultLocale: 'en',
+  locales: [
+    {
+      code: 'en',
+      name: 'English',
+      file: 'en.json',
+    },
+    {
+      code: 'de',
+      name: 'Deutsch',
+      file: 'de.json',
+    },
+  ],
+},
+```
+
+Feature layer `nuxt.config.ts` (fragment) and its `i18n/locales/en.json`:
+
+```ts
+i18n: {
+  locales: [
+    {
+      code: 'en',
+      file: 'en.json',
+    },
+    {
+      code: 'de',
+      file: 'de.json',
+    },
+  ],
+},
+```
+
+```json
+{
+  "patients": {
+    "single": {
+      "title": "Patient"
+    }
+  }
+}
+```

package/skills/nuxt-unified-ui/references/apply.md

@@ -17,13 +17,36 @@ Do not edit files while subagents are running.
 
 Run from the repository root.
 
+First check whether the project is a Git worktree:
+
+```bash
+git rev-parse --is-inside-work-tree >/dev/null 2>&1
+```
+
+If it is not, select every eligible file in the project:
+
+```bash
+rg --files --hidden -g '*.vue' -g '*.js' -g '*.ts' -g '!*.d.ts'
+```
+
+Otherwise, get the branch:
+
 ```bash
 branch=$(git branch --show-current)
 ```
 
 If `branch` is empty (detached HEAD), stop and ask the user which files to process.
 
-**On `dev`, `main`, or `master`** — every tracked or new, non-ignored file:
+**On `dev`, `main`, or `master`** — select only added or changed, uncommitted files (staged, unstaged, or untracked):
+
+```bash
+{
+  git diff --name-only --diff-filter=AMR HEAD -- '*.vue' '*.js' '*.ts' ':!*.d.ts'
+  git ls-files --others --exclude-standard -- '*.vue' '*.js' '*.ts' ':!*.d.ts'
+} | sort -u
+```
+
+If this selects no files because all work has been committed, select every tracked or new, non-ignored eligible file instead:
 
 ```bash
 git ls-files --cached --others --exclude-standard -- '*.vue' '*.js' '*.ts' ':!*.d.ts'
@@ -53,12 +76,14 @@ The first line is the base: `<commits> <ref> <merge-base sha>`. If there is no o
 } | sort -u
 ```
 
-Deleted files are excluded. Tell the user the branch, the base (when there is one), and how many files were selected. If none were selected, stop.
+Deleted files are excluded. Tell the user whether the project is outside Git or on a branch, the base (when there is one), whether the clean default-branch fallback was used, and how many files were selected. If none were selected, stop.
 
 ### 2. Launch one subagent per file
 
 Launch exactly one subagent per selected file — never several files in one subagent. Run them in parallel batches. Each subagent edits only its own file, so parallel runs do not conflict.
 
+**Model:** launch every per-file subagent using a cheap fast model. The main agent keeps its own model for steps 1, 3, and 5.
+
 Use this prompt:
 
 ```text
@@ -75,13 +100,13 @@ Return the report described there.
 
 When every subagent has reported, collect their follow-ups, remove duplicates, and apply them **one at a time** in the main agent:
 
-- **`i18n`** — add each key to every locale file the project has. Use the reported English text for English; translate for other locales when confident, otherwise use the English text and list those keys in the summary.
+- **`i18n`** — add each key to the locale files of the layer that owns the reporting file, following the i18n rules in `SKILL.md` (that layer's `i18n/locales/`, under its single top-level key, in every locale it declares). When the layer has no locale files yet, create them and add its `i18n: { locales: [{ code, file }] }` declaration for the locales the aarde layer defines; global i18n settings stay in the aarde layer. Use the reported English text for English; translate for other locales when confident, otherwise use the English text and list those keys in the summary.
 - **`split`** / **`move`** / **`promote`** — apply the file-structure rules from `SKILL.md`: create or move the files, then update every caller and import.
 - **`other`** — apply cross-file changes that follow directly from the skill (for example a missing REST route of a resource). List anything that needs a product decision in the summary instead of guessing.
 
 ### 4. Second round for what step 3 touched
 
-Launch the same per-file subagent (step 2) for every `.vue`, `.js`, or `.ts` file created or edited in step 3, then apply their `i18n` follow-ups. Do not start a third round: list any other follow-ups from this round in the summary.
+Launch the same per-file subagent (step 2, using a cheap fast model) for every `.vue`, `.js`, or `.ts` file created or edited in step 3, then apply their `i18n` follow-ups. Do not start a third round: list any other follow-ups from this round in the summary.
 
 ### 5. Verify and summarize
 
@@ -106,7 +131,7 @@ You bring one `.vue`, `.js`, or `.ts` file in line with the nuxt-unified-ui skil
 3. **Logical pass** — fix in place:
    - Replace hand-rolled code with the APIs in `SKILL.md`: raw `$fetch` / `useFetch` → `ufetch` / `useUFetch`; hand-built modals → dialog launchers; direct `radashi` imports → `radXxx`; and so on.
    - Apply the decisions in `SKILL.md` and the rules of the references you read: page `definePageMeta.name` and SEO, dialog logic in `onClick`, named routes, `to` for navigation-only actions, a dumb `un-table`, reactive fetch gates, component conventions.
-   - Move user-facing literals to `$t('...')` keys. Record each new key as an `i18n` follow-up.
+   - Only when the project has integrated i18n (`SKILL.md` i18n rules): move user-facing literals to `$t('...')` keys under the owning layer's top-level key. Reuse existing keys, including this layer's `common.*` labels. Record each new key as an `i18n` follow-up with its full path. In a project without i18n, leave literal strings as they are.
    - Make `atoms` / `libs` imports relative.
 4. **Structural pass** — decide, do not execute:
    - Two or more independent responsibilities → `split` follow-up with each responsibility and its suggested path.

package/skills/nuxt-unified-ui/references/code-style.md

@@ -53,10 +53,10 @@ Shape, in this order:
 2. The line `/* responsibility */`
 3. One blank line
 4. The job, as short `//` comments. Use several short lines. Do not write one long line, and do not put the job in a second `/* */` block
-5. One blank line
+5. **Two** blank lines
 6. The rest of the file
 
-That last blank line is the blank line the next section or the first statement already requires. Do not add a second one.
+Those two blank lines are the whole gap between the header and what follows — whether that is a section comment, an import, or the first statement. Never one, never three.
 
 `.js` / `.ts`: this block is the start of the file. Nothing comes before the leading blank line. Imports, when the file has them, start after step 5.
 
@@ -69,6 +69,7 @@ That last blank line is the blank line the next section or the first statement a
 // Issues a session token
 // after checking the login payload.
 
+
 import { join } from 'node:path';
 ```
 
@@ -80,6 +81,7 @@ import { join } from 'node:path';
 // Renders the login form
 // and submits credentials.
 
+
 /* login */
 ```
 
@@ -96,6 +98,17 @@ import { join } from 'node:path';
 <script setup>
 ```
 
+```ts
+// ❌ only one blank line under the // lines
+
+/* responsibility */
+
+// Issues a session token
+// after checking the login payload.
+
+import { join } from 'node:path';
+```
+
 The `//` lines name the job. They do not narrate steps, list options, or repeat the file name.
 
 ---
@@ -433,6 +446,24 @@ const form = {
 };
 ```
 
+### Parameter type literals
+
+The multi-line rule covers object **values**, not types. An object type written inline as the type of a function parameter stays on **one line**, however many members it has:
+
+```ts
+export async function launchDialog(options: { component: any, props: any }) {
+  ...
+}
+
+// ❌
+export async function launchDialog(options: {
+  component: any,
+  props: any,
+}) {
+  ...
+}
+```
+
 ### Multiline assignment isolation
 
 A **multiline assignment** is any `const` / `let` / `var` / `export const` declaration, or any `=` reassignment, whose statement spans more than one line (usually a multi-line object, array, call, or destructure: `useUFetch`, `computed(() => { … })`, `defineProps({ … })`, …).
@@ -484,6 +515,7 @@ How this combines with other spacing:
 | Next to a single-line statement (including consecutive refs) | Isolation **wins**: one blank before and after |
 | First statement after a function `{` that already wants a blank, or last before a `}` that wants one | **Share** that blank — do not add a second |
 | Declaration-group or major-step boundary (already **two** blanks) | Keep the **two** |
+| First statement right after the responsibility header | Keep the header's **two** |
 | Blank already required after `/* section */` | That blank **is** the before-blank |
 | Single-line assignment, including `{}` / `[]` | Not multiline — no isolation |
 | Tiny / single-block function whose only statement is the assignment | Stay **flush** with the braces |
@@ -584,7 +616,7 @@ Omit unused properties; keep the rest in this order:
 
 | Object | Order |
 |--------|-------|
-| Action objects (`:actions`, `:append-actions`, table row actions) | `vIf` → `actionType` → `variant` → `color` → `icon` → `label` → `tooltip` → `warning` → `disabled` → `to` → `href` → `onClick` → `items` |
+| Action objects (`:actions`, `:append-actions`, table row actions) | `vIf` → `actionType` → `variant` → `color` → `icon` → `label` → `trailingIcon` → `tooltip` → `warning` → `disabled` → `to` → `href` → `onClick` → `items` |
 | Table column defs | `accessorKey` (or `id`) → `header` → others |
 | Tab / select / menu item objects | `value` → `icon` → `label` → others |
 | `ufetch` options | see [Fetch calls](#fetch-calls) |
@@ -681,7 +713,7 @@ A lone `v-if` with no `v-else` is one child and stays flush. Each tag looks only
   <u-button
     variant="subtle"
     icon="lucide:log-out"
-    @click="handleLogout"
+    @click="handleLogout()"
   />
 
 </p>
@@ -723,7 +755,7 @@ A lone `v-if` with no `v-else` is one child and stays flush. Each tag looks only
 - **Childless, more than one attribute or any multiline attribute:** opening `<tag` on its own line, one attribute per line, `/>` on its own line.
 - **Tags with children:** all attributes stay on the **same line** as the opening tag, regardless of count or length. This applies to every tag, including `u-modal` and structural `<template>` wrappers.
 - **The only split trigger for tags with children is a multiline attribute**: an array, object, or function literal bound to an attribute that spans multiple lines. Then the opening `<tag` goes on its own line, every attribute gets its own line, and the multiline value is formatted like a JS literal.
-- References, calls, and scalar expressions (`:field="field"`, `v-bind="radOmit(action, [...])"`, `@click="handleSave"`) are **not** multiline attributes. A single-pair object with scalar values (`:ui="{ content: 'max-w-5xl' }"`) stays inline. Multi-key or nested object / array bindings are multiline attributes.
+- References, calls, and scalar expressions (`:field="field"`, `v-bind="radOmit(action, [...])"`, `@click="handleSave()"`) are **not** multiline attributes. A single-pair object with scalar values (`:ui="{ content: 'max-w-5xl' }"`) stays inline. Multi-key or nested object / array bindings are multiline attributes.
 
 ```vue
 <!-- ✅ children, no multiline attribute — one line -->
@@ -744,13 +776,13 @@ A lone `v-if` with no `v-else` is one child and stays flush. Each tag looks only
 <u-button
   variant="subtle"
   icon="lucide:refresh-ccw"
-  @click="refresh"
+  @click="refresh()"
 />
 ```
 
 ```vue
 <!-- ❌ childless multi-attribute tag on one line -->
-<u-button variant="subtle" icon="lucide:refresh-ccw" @click="refresh" />
+<u-button variant="subtle" icon="lucide:refresh-ccw" @click="refresh()" />
 
 <!-- ❌ empty open/close pair -->
 <div class="grow"></div>
@@ -800,7 +832,8 @@ Applies whenever attributes are on separate lines:
 
 Shortcuts:
 
-- `u-button`: `variant` → `color` → `size` → `icon` → label/value → `block` → `disabled` → `loading-auto` → events
+- `img`: `src` / `:src` is always the **first** attribute, before everything else (including `ref` and `id`); the rest follow the order above
+- `u-button`: `variant` → `color` → `size` → `icon` → label/value → `trailing-icon` → `block` → `disabled` → `loading-auto` → events
 - `u-input` / `u-select*`: `:placeholder`, `:label` → `:loading`, `:disabled` → `:items` → `class` → `v-model` → events
 - `un-table`: `:columns` → `class` / `:ui` → `:loading` → `:data` → `hide-pagination` → `:total-items` → `:items-per-page-items` → `:row-to` → `v-model:items-per-page` → `v-model:current-page` → `sticky-actions` → `:actions` → `:extra-actions` → `:meta` (page size model always before page model)
 
@@ -809,13 +842,55 @@ Shortcuts:
 - Simple scalars and simple ternaries stay inline.
 - When one condition changes several attributes, labels / icons, or an object binding such as `to`, use sibling `<template v-if>` / `v-else-if` / `v-else` branches with explicit component variants instead of nested ternaries.
 
+### Event handlers
+
+A function bound with `@event` is always called explicitly, with its arguments written out — never passed as a bare reference:
+
+| The function receives | Write |
+|-----------------------|-------|
+| No argument | `@event="handleSave()"` |
+| The event's one argument | `@event="handleSelect($event)"` |
+| Several event arguments | `@event="(value, index) => handleMove(value, index)"` |
+
+Name arrow parameters after what the event passes.
+
+When converting a bare reference (`@click="handleSave"`), keep what Vue passed it: if the function declares parameters, pass the event's arguments explicitly (`$event` for one, an arrow for several); if it declares none, call it with `()`. If a component event's argument count is unclear, check its `emits` / docs; if still unclear, pass `$event`.
+
+Inline statements that are not a single function call (`@update:page="currentPage = $event"`, `@update:open="!$event && emit('close')"`) stay as they are. This rule covers `@` bindings only — `onClick` in action objects and watcher callbacks still take references (see [Naming](#naming)).
+
+```vue
+<!-- ✅ -->
+<u-button
+  variant="subtle"
+  icon="lucide:save"
+  @click="handleSave()"
+/>
+
+<u-select
+  :items="statusItems"
+  @update:model-value="handleStatusChange($event)"
+/>
+
+<draggable-list
+  :items="items"
+  @move="(item, index) => handleMove(item, index)"
+/>
+
+<!-- ❌ bare references -->
+<u-button
+  variant="subtle"
+  icon="lucide:save"
+  @click="handleSave"
+/>
+```
+
 ### Default attribute values
 
 Omit props that restate a default:
 
 | Component / context | Convention |
 |---------------------|------------|
-| `un-table` `actions` / `extraActions` objects | omit `variant: 'subtle'` — `un-table` already sets it. Keep `variant` on every other button and action object; it is not a default there |
+| `un-table` `actions` / `extraActions` objects | omit `variant: 'subtle'` — `un-table` already sets it. Do not add or remove `variant` on any other button or action object; which variant it uses is a design choice, not formatting |
 | `u-badge` | omit `color` for neutral (`undefined` in ternaries, never `color="neutral"`); no `size` |
 | `u-tooltip` | do not set `:delay-duration` |
 
@@ -869,6 +944,7 @@ Same whitespace, brace, literal, and call rules as script blocks, starting with
 // Creates an authentication token
 // after checking the login body.
 
+
 export default defineEventHandler(async event => {
 
   await assertRateLimit({
@@ -906,7 +982,7 @@ export default defineEventHandler(async event => {
 
 ## Checklist before finishing an edit
 
-- [ ] Responsibility header: blank line, `/* responsibility */`, blank line, short `//` lines, blank line; in Vue inside `<script setup>`; nothing above it
+- [ ] Responsibility header: blank line, `/* responsibility */`, blank line, short `//` lines, two blank lines; in Vue inside `<script setup>`; nothing above it
 - [ ] `<script setup>` without `lang="ts"`; no TS annotations in Vue
 - [ ] 2-space indent; single quotes; semicolons; trailing commas in multi-line literals
 - [ ] Every domain section starts with `/* section name */` + blank line; sections separated by two blank lines; imports co-located
@@ -914,7 +990,7 @@ export default defineEventHandler(async event => {
 - [ ] Multiline assignments have exactly one blank line before and after (shared with required blanks; group boundaries keep two)
 - [ ] Workflow functions: blank after `{`, double blanks between major steps, blank before `}`; tiny helpers tight; single-block functions flush; return-only decisions as one `if` / `else if` / `else` chain
 - [ ] Braces everywhere; `else` / `catch` on their own line
-- [ ] Script literals multi-line, except `{}` / `[]`; no statement wrapped only for length; `fn(arg, {` on one line
+- [ ] Script literals multi-line, except `{}` / `[]`; inline object types of function parameters on one line; no statement wrapped only for length; `fn(arg, {` on one line
 - [ ] Page scripts: section order, `/* params */` shape, `/* seo */` placement and call order
 - [ ] `useUFetch` shape; `ufetch` options order; destructure names `xxxData` / `isXxxPending` / `refreshXxx`; `response` for `ufetch` results
 - [ ] `handleXxx` handlers; `it` for short callbacks; descriptive loop names; structure-returning computeds use block + `return`; handler references, not wrappers
@@ -923,6 +999,7 @@ export default defineEventHandler(async event => {
 - [ ] Child spacing: one child flush; 2+ children with exactly one blank after the opener, between children, and before the closer (each branch counts)
 - [ ] Attribute wrapping: tags with children single-line unless a multiline attribute forces a split; childless tags self-closing, split when more than one attribute; `>` / `/>` placement
 - [ ] Attribute order; redundant defaults omitted
+- [ ] `@event` bindings call their function explicitly: `fn()`, `fn($event)`, or `(a, b) => fn(a, b)`; no bare references
 - [ ] Text / `{{ }}` on its own line
 - [ ] `atoms` / `libs` imports relative; file not moved
 - [ ] No behavior change

package/skills/nuxt-unified-ui/references/dialogs.md

@@ -22,7 +22,6 @@ await launchChoicePickerDialog({
   text: 'Are you sure you want to submit your application?',
   startButtons: [
     {
-      variant: 'subtle',
       icon: 'lucide:check',
       label: 'Submit',
       onClick: async () => {
@@ -63,7 +62,6 @@ await launchFormPickerDialog({
     firstName: 'John',
   },
   submitButton: {
-    variant: 'subtle',
     icon: 'lucide:send',
     label: 'Submit',
     onClick: async form => {

package/skills/nuxt-unified-ui/references/forms.md

@@ -12,6 +12,7 @@ Schema-driven forms via `useForm` / `un-form`. Field type is selected with **`id
 // Collects the applicant's
 // personal details.
 
+
 /* form */
 
 const { form, formTag } = useForm({
@@ -178,6 +179,7 @@ A custom element is a layer-private component in `app/atoms/`. It receives the `
 // Renders a text input
 // for a custom form field.
 
+
 /* interface */
 
 const props = defineProps({
@@ -206,6 +208,7 @@ Register it once from a Nuxt plugin. The identifier must be unique among built-i
 // Registers the custom text
 // form element.
 
+
 export default defineNuxtPlugin(() => {
   registerFormExtraElement({
     identifier: 'custom-text',

package/skills/nuxt-unified-ui/references/layer-setup.md

@@ -21,6 +21,7 @@ Consumers must:
 // Configures the host app
 // on top of nuxt-unified-ui.
 
+
 import { pathRelativeToBase } from 'nuxt-unified-ui';
 
 

package/skills/nuxt-unified-ui/references/pages.md

@@ -12,6 +12,7 @@ What every page in this stack contains and how it navigates.
 // Shows one patient
 // and the actions for that record.
 
+
 /* page */
 
 definePageMeta({

package/skills/nuxt-unified-ui/references/resources.md

@@ -50,6 +50,7 @@ Minimal example:
 // Registers the users resource
 // on the unified app registry.
 
+
 const { schema, type, inferred } = parseSchema({
   'name': 'string',
   'username': 'string',
@@ -161,6 +162,7 @@ Every file is a thin wrapper:
 // Lists flash cards
 // for admins.
 
+
 export default defineEventHandler(async event => {
   return handleResourceList({
     resource: 'flashCards',
@@ -192,6 +194,7 @@ Generic page (one page for all standard resources), `pages/dashboard/resources/[
 // Manages any standard resource
 // named by the route.
 
+
 /* page */
 
 definePageMeta({
@@ -263,6 +266,7 @@ Example: `pages/resources/users.vue` (named route, not necessarily under `dashbo
 // Manages users with onboarding
 // and password reset actions.
 
+
 /* page */
 
 definePageMeta({
@@ -307,7 +311,6 @@ async function handleOnboardUser() {
       },
     ],
     submitButton: {
-      variant: 'subtle',
       label: 'Onboard',
       onClick: async form => {
 
@@ -335,7 +338,6 @@ async function handleResetPassword(user) {
     text: `Send a password reset to ${user.name}?`,
     startButtons: [
       {
-        variant: 'subtle',
         icon: 'lucide:check',
         label: 'Reset',
         onClick: async () => {

package/skills/nuxt-unified-ui/references/toast-and-ui.md

@@ -7,9 +7,10 @@ Toast helpers, the `un-*` layout components, and the button / badge / icon conve
 This is the only place these rules are stated.
 
 - **Icons** are always Lucide: `lucide:*`.
-- **Buttons** set `variant: 'subtle'` (`variant="subtle"`) explicitly: every `u-button` and every action object — `un-card` `actions` / `subtitleActions` / `appendActions`, dialog `submitButton` / `startButtons` / `endButtons`, `<resource-manager>` `actions`. Nuxt UI's default variant is `solid`, so leaving `variant` out is not the same.
-- **`un-table` row actions are the one exception**: `actions` / `extraActions` (and `<resource-manager>` `resource-actions`, which feed them) omit `variant`, because `un-table` already renders them subtle.
-- **Cancel / dismiss** actions use `variant: 'ghost'` instead. Never use `ghost` on primary, submit, row, or any other non-Cancel action.
+- **Bottom-of-card action buttons use the default variant — set no `variant`**: `un-card` `actions` (also with `verticalActions`), form picker `submitButton`, and choice picker `startButtons` / `endButtons`.
+- **All other buttons set `variant: 'subtle'` (`variant="subtle"`) explicitly**: top-of-card buttons — `un-card` `appendActions` / `subtitleActions`, `<resource-manager>` `actions` (rendered as its card's `appendActions`) — and standalone `u-button`s. Nuxt UI's default variant is `solid`, so leaving `variant` out is not the same.
+- **`un-table` row actions** (`actions` / `extraActions`, and `<resource-manager>` `resource-actions`, which feed them) omit `variant`, because `un-table` already renders them subtle.
+- **Cancel / dismiss** actions use `variant: 'ghost'`, including in a bottom action row. Never use `ghost` on primary, submit, row, or any other non-Cancel action.
 - **Async buttons** use `loading-auto` instead of a hand-rolled `isLoading` flag, unless something else depends on that flag.
 - **Badges** (`u-badge`) are always `variant="subtle"` with `icon` + `:label` (no default-slot text), no `size`, and no `color` for neutral states.