nuxt-unified-ui 0.5.16 → 0.5.17

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).
+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.
 
 ```bash
 npx skills add . --list

package/app/components/un-table.vue

@@ -134,15 +134,34 @@ function getExtraActionItems(row) {
           'href',
           'disabled',
           'onClick',
+          'onSelect',
         ]),
         href: resolveActionValue(it.href, row),
         to: resolveActionValue(it.to, row),
         disabled: resolveActionValue(it.disabled, row),
-        onClick: () => it.onClick?.(row.original),
+        onSelect: () => it.onClick?.(row.original),
       };
     });
 }
 
+function handleRowSelect(_event, row) {
+
+  if (!props.rowTo) {
+    return;
+  }
+
+
+  const destination = props.rowTo(row.original);
+
+  if (!destination) {
+    return;
+  }
+
+
+  return navigateTo(destination);
+
+}
+
 
 /* pagination */
 
@@ -174,7 +193,8 @@ const pageSizeItems = computed(() => {
       :data="props.data || []"
       :column-pinning="columnPinning"
       :ui="tableUi"
-      :meta="props.meta">
+      :meta="props.meta"
+      @select="props.rowTo ? handleRowSelect : undefined">
 
       <template v-for="(_, name) in $slots" #[name]="slotData">
         <slot

package/app/utils/unified-set.ts

@@ -11,8 +11,15 @@
  * @example
  * unSet({}, 'cards[0].value', 2)
  * // => { cards: [{ value: 2 }] }
+ *
+ * Paths that contain `__proto__`, `prototype`, or `constructor` are ignored.
  */
 
+function isUnsafePathSegment(segment: string) {
+  return segment === '__proto__' || segment === 'prototype' || segment === 'constructor';
+}
+
+
 export function unSet(target: any, key: string, value: any) {
 
   const segments = (
@@ -22,7 +29,7 @@ export function unSet(target: any, key: string, value: any) {
       .filter(Boolean)
   );
 
-  if (segments.length === 0) {
+  if (segments.length === 0 || segments.some(isUnsafePathSegment)) {
     return target;
   }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-unified-ui",
   "type": "module",
-  "version": "0.5.16",
+  "version": "0.5.17",
   "main": "./nuxt.config.ts",
   "types": "./index.d.ts",
   "exports": {
@@ -20,9 +20,9 @@
   ],
   "dependencies": {
     "@formkit/tempo": "1.1.0",
-    "@iconify-json/lucide": "1.2.136",
+    "@iconify-json/lucide": "1.2.138",
     "@nuxt/kit": "4.5.2",
-    "@nuxt/ui": "4.11.2",
+    "@nuxt/ui": "4.11.3",
     "@nuxtjs/i18n": "10.6.0",
     "@types/canvas-confetti": "1.9.0",
     "@vueuse/core": "15.0.0",

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

@@ -1,181 +1,122 @@
 ---
 name: nuxt-unified-ui
 description: >-
-  Single skill for the nuxt-unified-ui Nuxt layer and mandatory Nuxt code style:
-  install/extend the layer, required CSS, modules/config, radashi radXxx
-  auto-imports, un-form / useForm, launchFormPickerDialog /
-  launchChoicePickerDialog, toast helpers, un-card / un-typography / un-table
-  (attribute order, row actions, pagination), pages /
-  definePageMeta, page /* params */ and /* seo */ blocks, ufetch / useUFetch wrapping, unified resources
-  (server plugins, REST handleResource*, resource-manager dashboard /
-  customization), layer-private app/atoms and app/libs vs public
-  components/utils (relative imports), attribute order/defaults, and
-  whitespace/formatting conventions for all Nuxt-generated code. Use when
-  working in or consuming nuxt-unified-ui, declaring or customizing resources,
-  or whenever generating Vue/Nuxt code that must match unified code style.
+  Builds and edits Nuxt apps and layers that use nuxt-unified-ui: un-form /
+  useForm schema forms, un-card, un-table, launchFormPickerDialog /
+  launchChoicePickerDialog / launchDialog, toast helpers, radXxx radashi
+  auto-imports, and the companion unified stack (ufetch, useUFetch,
+  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.
 ---
 
 # nuxt-unified-ui
 
-Reusable **Nuxt layer** (Nuxt UI + helpers) **plus** the mandatory **code style** for Nuxt projects using this stack.
-
-Peer dependency: **Nuxt `>=4.5.2`**.
-
-This is the **only** installable skill in this repo. Deep topics live under `references/`.
-
-## When to use
-
-- Installing / extending `nuxt-unified-ui` as a Nuxt layer
-- Using `un-form`, dialogs, toasts, `un-card`, `un-table`, radashi `radXxx`, etc.
-- Declaring or customizing **unified resources** (plugins, REST, dashboard)
-- **Whenever generating or editing Nuxt/Vue/server code** that must follow the unified look (whitespace, wrapping, template shape, sectioning)
-
-## References (read as needed)
-
-| Topic | File |
-|-------|------|
-| **Code style (mandatory)** | [references/code-style.md](references/code-style.md) |
-| Unified resources (plugins → REST → dashboard) | [references/resources.md](references/resources.md) |
-| Pages / routing | [references/pages.md](references/pages.md) |
-| Data fetching (`ufetch` / `useUFetch`) | [references/data-fetching.md](references/data-fetching.md) |
-| Layer install + required CSS | [references/layer-setup.md](references/layer-setup.md) |
-| Public surface inventory | [references/public-surface.md](references/public-surface.md) |
-| Forms (`useForm` / `un-form`) | [references/forms.md](references/forms.md) |
-| Form field schema | [references/form-field-schema.md](references/form-field-schema.md) |
-| Form elements | [references/form-elements.md](references/form-elements.md) |
-| Dialogs / toasts / UI | [references/dialogs.md](references/dialogs.md) |
-| Dialog implementation | [references/dialogs-impl.md](references/dialogs-impl.md) |
-| Toast + `un-*` details | [references/toast-and-ui.md](references/toast-and-ui.md) |
-| Tables (`un-table`) | [references/tables.md](references/tables.md) |
-| Radashi `radXxx` catalog | [references/radashi.md](references/radashi.md) |
-
----
-
-## Code style (read [code-style.md](references/code-style.md) before writing code)
-
-**Always apply** to Vue SFCs and app/server `.ts` files. Higher-level idea: code should **scan vertically** — named sections, declaration-kind groups, multi-line literals, and predictable template wrapping.
-
-Absolute highlights:
-
-- `<script setup>` only — **never** `lang="ts"`; no TS annotations in Vue (runtime prop types)
-- 2-space indent; single quotes; semicolons; trailing commas in multi-line literals
-- **`.js` / `.ts` file start:** two leading blank lines, **except** when the file starts with imports — then **no** blank lines before the first `import`
-- Every `<script setup>` section starts with `/* section name */`, then a blank line
-- Within a section, group declarations by kind (imports, refs, computeds, watchers, functions, etc.): two blank lines between groups; no blanks between consecutive refs; one blank between consecutive members of other groups
-- Non-trivial async/functions: blank line after `{`, double blank between major steps, blank before `}`
-- A function whose body is one `for` / `while` / `if` or one connected `if` / `else` / `else if` or `try` / `catch` / `finally` chain stays flush: no blank lines between the function `{` / `}` and that block
-- A function dedicated to choosing a return value from multiple criteria uses one exhaustive `if` / `else if` / `else` chain; broader functions may use guard clauses and early returns
-- `else` / `catch` on their own line after `}`
-- Script object literals always multi-line (even one property)
-- Kebab-case tags (`u-button`, `un-card`)
-- `v-if` / `v-for` on `<template>` wrappers — not on rendered nodes
-- If a condition changes several component attributes, prefer explicit `<template v-if>` / `v-else` component variants over nested ternaries and overly dynamic bindings
-- Tags with children keep all attributes on one line with the opening tag unless a multiline attribute (multi-line array/object/function binding) forces a split — then the opening tag goes on its own line, one attribute per line, value styled like JS; childless tags are self-closing — one single-line attribute stays inline, otherwise tag and attributes each go on their own line with `/>` on its own line; attribute order + default omissions (`variant="subtle"`, **Cancel only → `ghost`**, omit neutral `color`, `loading-auto`); split non-self-closing `>` on same line as last attr; split self-closing `/>` on its own line
-- `{{ ... }}` on its own line (static + dynamic text may mix)
-- `/* section */` comments; imports co-located under the section that uses them
-- Light naming: `handleXxx` handlers, `it` in short callbacks, descriptive `for...of`, computeds use block + `return`
-- Pages: explicit `definePageMeta.name`, `/* params */` for `route.params` / `route.query`, required `/* seo */` (`useHead` + `useSeoMeta`, `useJsonld` when installed) → [pages.md](references/pages.md)
-- Fetching: `ufetch(url, {` one line; `useUFetch` with URL on next line + `data*Data` / `is*Loading` / `refresh*` → [data-fetching.md](references/data-fetching.md)
-- Layer modules: generate private first (`app/atoms/` components, `app/libs/` functions and similar); promote to `app/components/` / `app/utils/` only when another layer needs them; import `atoms`/`libs` with relative paths → [code-style.md](references/code-style.md)
-
----
-
-## Quick start (host app)
-
-1. Install the package.
-2. Create host `assets/css/main.css`:
-
-```css
-@import 'tailwindcss';
-@import '@nuxt/ui';
-@import 'nuxt-unified-ui/nuxt-ui-fixes.css';
-```
-
-3. Extend the layer (CSS wiring is **required**):
-
-```js
-import { pathRelativeToBase } from 'nuxt-unified-ui';
-
-export default defineNuxtConfig({
-  css: [
-    pathRelativeToBase(import.meta.url, './assets/css/main.css'),
-  ],
-  extends: [
-    'nuxt-unified-ui',
-  ],
-});
-```
-
-4. Wrap the app with `u-app`.
-5. Prefer layer helpers (`useForm`, `launchFormPickerDialog`, `toastSuccess`) over reinventing them.
-6. Generate all new code using [code-style.md](references/code-style.md).
-
-Details: [layer-setup.md](references/layer-setup.md).
-
-## Package surface
-
-| Export | Path |
-|--------|------|
-| `nuxt-unified-ui` | `./nuxt.config.ts` (also re-exports `pathRelativeToBase`) |
-| `nuxt-unified-ui/app` | `./app` |
-| `nuxt-unified-ui/nuxt-ui-fixes.css` | `./app/assets/css/nuxt-ui-fixes.css` |
-
-Published: `nuxt.config.ts`, `index.d.ts`, `app/`, `i18n/`, `modules/`.
-
-## Mental model (`app/`)
-
-| Path | Role |
-|------|------|
-| `app/components/` | `un-form`, `un-card`, `un-typography`, `un-spinner`, `un-table` |
-| `app/composables/` | `useForm`, `useFormExtraElements` |
-| `app/elements/` | Built-in form field renderers |
-| `app/dialogs/` | Form / choice picker modal UIs |
-| `app/utils/` | `launchDialog*`, `toast*`, `smartMatch`, `unSet`, dates, … |
-| `app/plugins/` | `$toaster` via `useToast()` |
-| `modules/radashi.ts` | Auto-imports radashi as `rad*` |
-| `i18n/locales/` | `en.json`, `de.json` |
-
-## Layer config (inherited)
-
-From `nuxt.config.ts`: `@vueuse/nuxt`, `@nuxt/ui`, `@nuxtjs/i18n`; `ui.colorMode: false`; default variant `neutral`; i18n `no_prefix` with `en`/`de`; `experimental.typedPages: true`.
-
-## Common tasks
-
-| Task | Prefer |
-|------|--------|
-| Schema form | `useForm` + `<form-tag />` / `<un-form>` → [forms.md](references/forms.md) |
-| Modal form | `launchFormPickerDialog` + `submitButton.onClick` → [dialogs.md](references/dialogs.md) |
-| Confirm / choice | `launchChoicePickerDialog` + button `onClick` (avoid `value`) |
-| Feedback | `toastSuccess` / `toastError` / `toastWarning` / `toastInfo` / `toast` |
-| Page chrome | `un-typography` + `un-card` |
-| Data table | `un-table` + parent-owned fetch / sort / filter → [tables.md](references/tables.md) |
-| Custom field | `registerFormExtraElement` in a plugin |
-| Utilities | `radXxx` → [radashi.md](references/radashi.md) |
-| New page / route | [pages.md](references/pages.md) |
-| List/detail fetch or mutation | [data-fetching.md](references/data-fetching.md) |
-| New / custom resource | [resources.md](references/resources.md) |
-| New component / util in a layer | Start in `app/atoms/` or `app/libs/`; relative imports; promote to `components/` / `utils/` only if another layer needs it → [code-style.md](references/code-style.md) |
-| Formatting any of the above | [code-style.md](references/code-style.md) |
-
-## Do / don’t
-
-**Do**
-
-- Extend via `extends: ['nuxt-unified-ui']`
-- Keep required host `main.css` + `pathRelativeToBase` CSS entry + `nuxt-ui-fixes.css`
-- Use field `identifier` for element kind; `type` only for HTML input types
-- Handle dialog actions in `onClick`
-- Follow code style for every generated file
-- Resources: plugin → full REST set → dashboard nav / custom `<resource-manager>` page → [resources.md](references/resources.md)
-- Start generated layer components in `app/atoms/` and functions in `app/libs/`; import them with relative paths; move to `app/components/` / `app/utils/` only when another layer needs them
-
-**Don’t**
-
-- Invent APIs not in source
-- Reference any local playground as consumer docs
-- Use PascalCase component tags in templates
-- Set choice-button `value` unless the await result must distinguish buttons
-- Assume color mode is enabled (layer disables it)
-- Reimplement resource CRUD in route files (use `handleResource*`; customize via dedicated pages + domain APIs)
-- Put a layer-private component or util in `components/` or `utils/` (becomes app-global)
-- Import `atoms`/`libs` via `~/`, `#layers`, or from another layer — use relative paths; promote first if another layer needs them
+The main agent decides what code exists, where it lives, and which APIs it calls. When the work is done, the apply pipeline runs one subagent per file to check the skill's rules and apply the code style; it is the only place formatting rules apply. The main agent does not load `references/code-style.md`.
+
+## Finishing work: `/nuxt-unified-ui apply`
+
+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.
+
+## APIs
+
+**Layer** APIs come from this layer and are auto-imported across the app and every layer. **Companion** APIs come from the companion unified layers, which real projects always include next to this one. When an API is not listed here, check the source before using it.
+
+| API | Use it to | From | Reference |
+|---|---|---|---|
+| `un-form` / `useForm` | Render a schema-driven form; `useForm` returns `{ form, formTag }` | layer | [forms.md](references/forms.md) |
+| `registerFormExtraElement` | Add a custom form element `identifier` (call from a Nuxt plugin) | layer | [forms.md](references/forms.md) |
+| `useFormExtraElements` | Read the registered custom elements (add them with `registerFormExtraElement`) | layer | [forms.md](references/forms.md) |
+| `un-card` | Card with icon / title / subtitle header, body, and action rows | layer | [toast-and-ui.md](references/toast-and-ui.md) |
+| `un-typography` | Icon + title + subtitle + text block | layer | [toast-and-ui.md](references/toast-and-ui.md) |
+| `un-spinner` | Show a loading spinner | layer | [toast-and-ui.md](references/toast-and-ui.md) |
+| `un-table` | Show one page of rows with row actions and a pagination footer | layer | [tables.md](references/tables.md) |
+| `launchFormPickerDialog` | Ask for form input in a modal; submit logic goes in `submitButton.onClick` | layer | [dialogs.md](references/dialogs.md) |
+| `launchChoicePickerDialog` | Confirm or choose in a modal; logic goes in each button's `onClick` | layer | [dialogs.md](references/dialogs.md) |
+| `launchDialog` | Open any dialog component; resolves with its `close` payload | layer | [dialogs.md](references/dialogs.md) |
+| `toast`, `toastSuccess`, `toastError`, `toastWarning`, `toastInfo` | Show a toast (typed helpers set icon and color) | layer | [toast-and-ui.md](references/toast-and-ui.md) |
+| `smartMatch` | Test a function, mongo-style filter, or truthy value against an object | layer | [forms.md](references/forms.md) |
+| `unSet` | Set a nested path on an object, creating missing levels (mutates) | layer | — |
+| `formatDate` / `parseDate` | Format and parse dates (`@formkit/tempo`) | layer | — |
+| `isSlotFilled` | Check whether a slot has content | layer | — |
+| `pathRelativeToBase` | Resolve a path against a file URL; also exported from the package for `nuxt.config` | layer | [layer-setup.md](references/layer-setup.md) |
+| `makeConfetti` | Fire confetti: `template` picks a built-in effect (`parade`, `on-top` / `on-left` / `on-right` / `on-bottom`, `on-frame`, `split-on-top`, `on-curtain`), `amount` sets particles per burst, other args go to `canvas-confetti` | layer | — |
+| `radXxx` | Any radashi function (`radGet`, `radPick`, …), in app and server | layer | [radashi.md](references/radashi.md) |
+| `ufetch` | Make a one-off API request (submit, delete, click) | companion | [data-fetching.md](references/data-fetching.md) |
+| `useUFetch` | Load reactive page data (`data`, `pending`, `refresh`) | companion | [data-fetching.md](references/data-fetching.md) |
+| `parseSchema` | Compile a resource schema DSL into `{ schema, type, inferred }` | companion | [resources.md](references/resources.md) |
+| `createUnifiedResourceController` / `UnifiedResourceController` | Create the typed Mongo controller (`dbo`) for a resource | companion | [resources.md](references/resources.md) |
+| `app` / `UnifiedAppRegistry` | Global typed registry of resources (`app.users.dbo`) | companion | [resources.md](references/resources.md) |
+| `handleResourceSchema`, `handleResourceList`, `handleResourceCreate`, `handleResourceCount`, `handleResourceRetrieve`, `handleResourceUpdate`, `handleResourceDelete` | Implement the standard REST routes of a resource | companion | [resources.md](references/resources.md) |
+| `useResourceName` | Derive a resource's API path and display titles from its name | companion | [resources.md](references/resources.md) |
+| `useResourceMeta` | Map a resource schema to form fields and table columns | companion | [resources.md](references/resources.md) |
+| `<resource-manager>` | Full CRUD dashboard card for a resource; exposes `refreshResources()` | companion | [resources.md](references/resources.md) |
+| `<resource-explorer-table>` | Filter bar + sortable headers + `un-table` for a resource | companion | [tables.md](references/tables.md) |
+| `assertBody` | Validate a request body against a schema in a server route | companion | — |
+| `assertRateLimit` | Rate-limit a server route | companion | — |
+| `createUnauthenticatedError` | Throw a 401 from a server route | companion | — |
+| `generateUuid` | Generate a UUID | companion | — |
+| `useToken` | Read or set the auth token | companion | — |
+| `is-authenticated` middleware; `dashboard` / `empty` layouts | Protect pages; dashboard and full-bleed page layouts | companion | [pages.md](references/pages.md) |
+| `useJsonld` | Emit JSON-LD on public pages, only when `nuxt-jsonld` is installed | `nuxt-jsonld` | [pages.md](references/pages.md) |
+
+## File structure
+
+The main agent decides where a file lives and which one job it has, and does it while implementing. Apply subagents only report misplaced files; they never move files or update callers.
+
+Each `.vue`, `.js`, and `.ts` file has one responsibility. When a file would have two independent jobs, create two files.
+
+Nuxt auto-imports `app/components/` and `app/utils/` across every layer. `app/composables/` is public in the same way. A file that must stay inside one layer does not go in those directories.
+
+| Role | Directory | Visibility |
+|---|---|---|
+| Private Vue component | `app/atoms/` | This layer only |
+| Private function, composable, or helper | `app/libs/` | This layer only |
+| Public Vue component | `app/components/` | Whole app, auto-imported |
+| Public util | `app/utils/` | Whole app, auto-imported |
+
+Generate private first. New components start in `app/atoms/`. New functions and similar helpers start in `app/libs/`. Promote a file to `app/components/` or `app/utils/` only when another layer needs it. After a promote, update every caller and remove the relative import; public modules are auto-imported.
+
+Import `atoms` and `libs` with relative paths only (`../atoms/foo.vue`, `../libs/bar`). Never use `~/`, `@/`, `#layers/`, or another alias. Never import another layer's `atoms` or `libs`; promote that file first, then use the public auto-import.
+
+Do not register `atoms` or `libs` with Nuxt `components` or `imports` config.
+
+## Before writing
+
+Read the reference that matches the task before creating or editing files. The details stay in that reference.
+
+| Task | Read first |
+|---|---|
+| Layer installation and required CSS | [references/layer-setup.md](references/layer-setup.md) |
+| Forms, field schema, built-in and custom elements | [references/forms.md](references/forms.md) |
+| Dialogs | [references/dialogs.md](references/dialogs.md) |
+| Toasts, `un-*` UI, button / badge / icon conventions | [references/toast-and-ui.md](references/toast-and-ui.md) |
+| Tables | [references/tables.md](references/tables.md) |
+| Pages and routing | [references/pages.md](references/pages.md) |
+| `ufetch` / `useUFetch` | [references/data-fetching.md](references/data-fetching.md) |
+| Unified resources | [references/resources.md](references/resources.md) |
+| Radashi `radXxx` exports | [references/radashi.md](references/radashi.md) |
+
+## Decisions the main agent owns
+
+Make these choices while implementing. The apply pipeline checks them again afterward.
+
+- Prefer the APIs above over hand-rolled equivalents (raw `$fetch`, hand-built `u-modal` flows, direct `radashi` imports).
+- A new resource includes its server plugin, the full REST route set, and a dashboard nav entry or a custom `<resource-manager>` page.
+- Use `ufetch` for a one-off request. Use `useUFetch` for reactive page data.
+- Every page has an explicit `definePageMeta.name` and sets SEO with `useHead` (title) and `useSeoMeta` (description).
+- Buttons, badges, and icons follow the component conventions in [references/toast-and-ui.md](references/toast-and-ui.md#component-conventions). Read them before writing any button.
+- When splitting or promoting a file, update its callers in the same task.
+- Installing the layer includes the required host `assets/css/main.css` and the `pathRelativeToBase` CSS entry in `nuxt.config`.
+
+## i18n
+
+- 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.

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

@@ -0,0 +1,135 @@
+# `/nuxt-unified-ui apply`
+
+The one pipeline that brings code in line with this skill. One subagent per file applies the skill's logical, structural, and code-style rules; the main agent picks the files, launches the subagents, and carries out the cross-file follow-ups they report.
+
+It runs:
+
+- **After implementation** — whenever the main agent finishes implementing work that added or edited a `.vue`, `.js`, or `.ts` file, before its final reply.
+- **On request** — when the skill is invoked with the argument `apply` (`/nuxt-unified-ui apply`), or the user asks to apply nuxt-unified-ui across the project or branch.
+
+Both run the same steps on the same file selection.
+
+## Main agent
+
+Do not edit files while subagents are running.
+
+### 1. Pick the files
+
+Run from the repository root.
+
+```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:
+
+```bash
+git ls-files --cached --others --exclude-standard -- '*.vue' '*.js' '*.ts' ':!*.d.ts'
+```
+
+**On any other branch** — files the branch added or changed relative to its base branch, including uncommitted and untracked work.
+
+Find the base: the closest of `dev`, `main`, `master` (local first, then `origin/`), measured by commits since the merge base. Ties go to the earlier name in that order.
+
+```bash
+for candidate in dev main master; do
+  for ref in "$candidate" "origin/$candidate"; do
+    git rev-parse --verify --quiet "$ref^{commit}" >/dev/null || continue
+    base=$(git merge-base HEAD "$ref") || continue
+    echo "$(git rev-list --count "$base"..HEAD) $ref $base"
+    break
+  done
+done | sort -s -n -k1,1
+```
+
+The first line is the base: `<commits> <ref> <merge-base sha>`. If there is no output, stop and ask the user for the base branch. Then list the files with the merge-base sha:
+
+```bash
+{
+  git diff --name-only --diff-filter=AMR "$base" -- '*.vue' '*.js' '*.ts' ':!*.d.ts'
+  git ls-files --others --exclude-standard -- '*.vue' '*.js' '*.ts' ':!*.d.ts'
+} | 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.
+
+### 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.
+
+Use this prompt:
+
+```text
+Apply nuxt-unified-ui to this file only:
+<absolute target path>
+
+Read and follow, in full:
+<absolute skill path>/references/apply.md (section "Per-file subagent")
+
+Return the report described there.
+```
+
+### 3. Carry out the follow-ups
+
+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.
+- **`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.
+
+### 5. Verify and summarize
+
+Run the project's `lint` and `typecheck` scripts when `package.json` defines them, and fix failures caused by this run. Then report: files processed, files changed, follow-ups applied, follow-ups left for the user, and any subagent that failed.
+
+## Per-file subagent
+
+You bring one `.vue`, `.js`, or `.ts` file in line with the nuxt-unified-ui skill.
+
+**Boundaries**
+
+- Edit only the target file. Never create, move, rename, or delete files, and never edit locale files — report those needs as follow-ups.
+- You may read and search the rest of the codebase to understand callers and context.
+- Keep every feature of the file working. Changes required by the skill's conventions (button variants, `$t` keys, SEO, API swaps) are expected; other behavior changes are not.
+- Do not change the file's public API (exports, props, emits, exposed members) unless the skill requires it; report callers that would need updating as `other` follow-ups.
+- Leave generated, vendored, or third-party code unchanged and report `unchanged`.
+
+**Steps**
+
+1. Read `SKILL.md` (next to this `references/` folder) in full, then the whole target file.
+2. Decide what the file is (page, component, dialog, form element, server route, plugin, util, config, …) and read the references the `SKILL.md` "Before writing" table lists for it.
+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.
+   - 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.
+   - Wrong directory for its visibility (`SKILL.md` file structure) → `move` or `promote` follow-up. Search for callers in other layers before proposing it.
+   - Anything else that needs another file changed → `other` follow-up.
+5. **Style pass** — read [code-style.md](code-style.md) in full, then:
+   - Add or correct the `/* responsibility */` header. When the file needs a split, describe its current main job and keep the `split` follow-up.
+   - Apply every relevant rule in `code-style.md` to the whole file.
+   - Run every item of its "Checklist before finishing an edit" and correct what remains.
+6. Re-read the whole result and confirm the file still does everything it did.
+
+**Report**
+
+```text
+applied: <absolute path>
+changes:
+- <one line per change>
+follow-ups:
+- i18n: <key> = "<English text>"
+- split: <responsibility> -> <suggested path>
+- move: <current path> -> <suggested path> (<reason>)
+- promote: <current path> -> <suggested path> (<layer that needs it>)
+- other: <file> — <change needed and why>
+```
+
+Omit empty sections. If nothing needed changing, return `unchanged: <absolute path>`.