@imfusion/web-ui 0.6.4-dev.57.g664ba66a → 0.6.4-dev.58.g88c8fcaa

package/src/docgen/doc.gen.json

@@ -65,7 +65,7 @@
   "button": {
     "root": {
       "name": "Button",
-      "description": "Button component",
+      "description": "Button",
       "props": [
         {
           "name": "chamfer",
@@ -165,7 +165,7 @@
   "callout": {
     "root": {
       "name": "Callout.Root",
-      "description": "Callout.Root — the banner container. Sets the `variant` (which tints the\nsurface and colours the icon and text) and lays out a leading `Callout.Icon`\nbeside a text region of `Callout.Title` / `Callout.Description`. `maxWidth`\ncaps the banner so it reads as a block region rather than stretching full\ncontainer width. A persistent element in the content flow — not a transient\nToast, not a modal Alert Dialog.",
+      "description": "Callout.Root — the banner container. Sets `variant` (tints surface, icon, and text) and lays\nout a leading `Callout.Icon` beside `Callout.Title` / `Callout.Description`. `maxWidth` caps\nthe banner so it reads as a block region, not full container width. A persistent content-flow\nelement — not a transient Toast, not a modal Alert Dialog.",
       "props": [
         {
           "name": "maxWidth",
@@ -191,7 +191,7 @@
       },
       {
         "name": "Callout.Icon",
-        "description": "Callout.Icon — the leading status glyph. With no children it renders the\nvariant's default local icon; pass a custom icon as children to override.\n`aria-hidden` (the variant is conveyed by copy, not the glyph) and inherits\nthe status colour via `currentColor`.",
+        "description": "Callout.Icon — the leading status glyph. Renders the variant's default icon when no children\nare passed; pass a custom icon as children to override. `aria-hidden` (variant is conveyed by\ncopy) and inherits colour via `currentColor`.",
         "props": []
       },
       {
@@ -204,7 +204,7 @@
   "card": {
     "root": {
       "name": "Card.Root",
-      "description": "Card.Root — a surface container composed of slots: an optional `Card.Image`\n(bleeds edge-to-edge, no padding), then `Card.Header` / `Card.Content` /\n`Card.Footer`. `density` sets one scale that drives both each slot's padding\nand the gap between slots. `variant` picks the look — neutral tonal surfaces\n(`main`/`support`/`minor`) carry a hairline border; coloured intent fills\n(`primary`/`brand`) flip to contrast text and drop the border. `shadow` and\n`radius` layer on top. Also called a panel, tile, or paper.\n\nThe image is always the first entry in the stack, so `orientation` just\nswitches the stack between a column and a row without reordering slots.\n\nThe ImFusion brand ships flat (`shadow=\"none\"`), but the shadow scale is a\nfirst-class opt-in axis for third-party consumers. `shadow` picks the elevation\nlevel only — how hard or spread that shadow reads is a global lighting decision,\nowned by the `--imf-ui-shadow-hardness` / `--imf-ui-shadow-spread` tokens.",
+      "description": "Card.Root — a surface container composed of slots: an optional `Card.Image`\n(bleeds edge-to-edge, no padding), then `Card.Header` / `Card.Content` /\n`Card.Footer`. `density` sets one scale that drives both each slot's padding\nand the gap between slots. `variant` picks the look — neutral tonal surfaces\n(`main`/`support`/`minor`) carry a hairline border; coloured intent fills\n(`primary`/`brand`) flip to contrast text and drop the border. `shadow` and\n`radius` layer on top. Also called a panel, tile, or paper.\n\nThe image is always the first entry in the stack, so `orientation` just\nswitches the stack between a column and a row without reordering slots.\n\n`shadow` defaults to `lg`; `shadow=\"none\"` gives the flat surface. It picks the elevation level only: how hard or\nspread the shadow reads is global, set by `--imf-ui-shadow-hardness` and `--imf-ui-shadow-spread`.",
       "props": [
         {
           "name": "density",
@@ -602,7 +602,7 @@
       },
       {
         "name": "Code.InlineLink",
-        "description": "Code.InlineLink — the inline-code chip rendered as a link: the same hairline\nbox, with an optional directional arrow behind the separator instead of a copy button.\nSibling of `Code.Inline`, sharing its chip visual (`.inline`) — never both a\ncopy button and a link on the same chip. Mirrors `ChipLink`'s shape (anchor\nis the chip root, trailing icon nudges on hover, `data-kind` picks the icon).",
+        "description": "Code.InlineLink — the inline-code chip rendered as a link: the same hairline\nbox, with an optional directional arrow behind the separator instead of a copy button.\nSibling of `Code.Inline`, sharing its chip visual (`.inline`). Never both a\ncopy button and a link on the same chip. Mirrors `ChipLink`'s shape (anchor\nis the chip root, trailing icon nudges on hover, `data-kind` picks the icon).",
         "props": [
           {
             "name": "kind",
@@ -2097,7 +2097,7 @@
           "required": true,
           "type": "ReactNode",
           "defaultValue": null,
-          "description": "Logo source — an image URL or an inline SVG node. Required; this primitive carries no brand default (see `ImFusionLogo` for our own mark)."
+          "description": "Logo source — an image URL or inline SVG node. No brand default; see `ImFusionLogo` for the ImFusion mark."
         },
         {
           "name": "variant",
@@ -2313,7 +2313,7 @@
       },
       {
         "name": "NavigationMenu.FlyoutLink",
-        "description": "NavigationMenu.FlyoutLink — a quiet text link inside a flyout `Content`, the\nlightweight alternative to a `LinkCard` when a card is too heavy. Renders an\n`<a>`. A trailing `ArrowRight` slides in on hover/focus and the label nudges to\nmeet it; the current page is marked in primary. When a custom `render` is\nsupplied the icon is omitted — the consumer's element owns its content.",
+        "description": "NavigationMenu.FlyoutLink — a quiet text link inside a flyout `Content`, the lightweight\nalternative to `LinkCard`. Renders an `<a>`; a trailing `ArrowRight` slides in on hover/focus,\nand the current page is marked in primary. A custom `render` omits the icon.",
         "props": [
           {
             "name": "active",
@@ -2395,7 +2395,7 @@
       },
       {
         "name": "NavigationMenu.InlineSubmenu",
-        "description": "NavigationMenu.InlineSubmenu — a master/detail submenu that stays inside one\nflyout: a category rail beside (or, on narrow viewports, above) its detail.\n\nA curated partial over the namespace's own primitives (a nested vertical\n`Root` without a `Portal`, plus the rail/detail layout). Drop it directly\ninside a `NavigationMenu.Content`. It bakes in Base UI's viewport\nresponsiveness: the nested Root flips `orientation` at `md` via `useMediaQuery`\nand the CSS flips the rail from a horizontal tab strip to a side rail at the\nsame breakpoint — no work for the consumer, no container queries.",
+        "description": "NavigationMenu.InlineSubmenu — a master/detail submenu that stays inside one\nflyout: a category rail beside (or, on narrow viewports, above) its detail.\n\nA curated partial over the namespace's own primitives (a nested vertical\n`Root` without a `Portal`, plus the rail/detail layout). Drop it directly\ninside a `NavigationMenu.Content`. Switches from a tab strip to a side rail\nat `md` — no work for the consumer, no container queries.",
         "props": [
           {
             "name": "defaultValue",
@@ -2824,14 +2824,14 @@
       },
       {
         "name": "NavigationMenu.Trigger",
-        "description": "NavigationMenu.Trigger — opens an item's flyout on hover or click. Renders a\n`<button>`. Ships a built-in `ChevronDown` (rotates when open) so consumers\ndon't hand-author an indicator; pass `hideChevron` to supply a custom `Icon`,\nand `nested` when the trigger opens a submenu from inside another flyout.",
+        "description": "NavigationMenu.Trigger — opens an item's flyout on hover or click. Renders a\n`<button>` with a built-in `ChevronDown` that rotates when open; pass\n`hideChevron` for a custom `Icon`, and `nested` for a trigger inside a flyout.",
         "props": [
           {
             "name": "active",
             "required": false,
             "type": "boolean",
             "defaultValue": "false",
-            "description": "Marks this section as the current page so it shows the active treatment even\nwhen its flyout is closed — the \"active trail\" anchor for a nav where the\nopen section isn't the current one. Base UI's Trigger has no active state of\nits own, so this stamps `data-active`."
+            "description": "Marks this section as the current page, showing the active treatment even when its\nflyout is closed. Base UI's Trigger has no active state of its own, so this stamps\n`data-active`."
           },
           {
             "name": "className",
@@ -3519,7 +3519,7 @@
             "required": false,
             "type": "ReactNode",
             "defaultValue": null,
-            "description": "Content rendered above the field as a drag handle: pressing it and moving\nsideways changes the value. Usually the field's label. The scrub cursor is\nsupplied automatically."
+            "description": "Drag handle rendered above the field: press and move sideways to change the value, usually\nthe field's label. The scrub cursor is supplied automatically."
           },
           {
             "name": "size",
@@ -4276,7 +4276,7 @@
   "select": {
     "root": {
       "name": "Select.Root",
-      "description": "Select.Root — accessible select / listbox primitive.\n\nRenders a thin wrapper div so that a sibling Select.Label stacks above the\nSelect.Trigger regardless of the parent's layout. Select.Portal is unaffected\n(it renders to document.body).",
+      "description": "Select.Root — accessible select / listbox primitive.\n\nWraps children in a div so a sibling Select.Label stacks above Select.Trigger\nregardless of the parent's layout. Select.Portal is unaffected (it renders to\ndocument.body).",
       "props": [
         {
           "name": "actionsRef",
@@ -5774,7 +5774,7 @@
   "stack": {
     "root": {
       "name": "Stack",
-      "description": "Stack — vertical layout primitive.\n\nCopied and adapted from Mantine's Stack; no upstream runtime\ndependency. Pure column flex container with token-driven gap and constrained\nalign/justify unions.",
+      "description": "Stack — vertical layout primitive.\n\nAdapted from Mantine's Stack, no upstream runtime dependency: a pure column\nflex container with token-driven gap and constrained align/justify unions.",
       "props": [
         {
           "name": "align",
@@ -6003,7 +6003,7 @@
       },
       {
         "name": "Table.SortableHeaderCell",
-        "description": "Table.SortableHeaderCell — a partial: a header cell whose label is a sort\ntoggle, pre-composing HeaderCell + HeaderButton so the `aria-sort` state and\ndirection indicator don't get re-derived per consumer app. Headless-upstream-\nagnostic: feed it `sortDirection` and `onToggle` (e.g. from a TanStack\ncolumn). Omit `onToggle` and it renders a plain non-sortable header cell.",
+        "description": "Table.SortableHeaderCell — a header cell whose label is a sort toggle,\npre-composing HeaderCell + HeaderButton so `aria-sort` and the direction\nindicator aren't re-derived per consumer. Omit `onToggle` for a plain cell.",
         "props": [
           {
             "name": "sortDirection",
@@ -6082,7 +6082,7 @@
     "subComponents": [
       {
         "name": "Tabs.Indicator",
-        "description": "Tabs.Indicator — the bordered box marking the active tab, overlapping the\nshared hairline border to visually fuse the active tab with the panel\nframe beneath it. Positioned via the `--active-tab-*` CSS custom\nproperties Base UI writes onto it; render once per Tabs.List, after the\nTabs.Tab list.",
+        "description": "Tabs.Indicator — the bordered box marking the active tab, positioned via\nthe `--active-tab-*` CSS custom properties Base UI writes onto it. Render\nonce per Tabs.List, after the Tabs.Tab list.",
         "props": [
           {
             "name": "className",
@@ -6226,7 +6226,7 @@
       },
       {
         "name": "Tabs.PanelViewport",
-        "description": "Tabs.PanelViewport — the shared frame Tabs.Panel elements render inside.\nNo Base UI equivalent exists (upstream leaves this as a plain wrapper div\nin its own reference); we surface it as a named part since its hairline\nborder is what Tabs.Indicator visually fuses into.",
+        "description": "Tabs.PanelViewport — the shared frame Tabs.Panel elements render inside.\nNo Base UI equivalent exists; it's surfaced as a named part since its\nhairline border is what Tabs.Indicator visually fuses into.",
         "props": []
       },
       {
@@ -7237,7 +7237,7 @@
       },
       {
         "name": "Tooltip.Positioner",
-        "description": "Tooltip.Positioner — positions the popup relative to the trigger via\nfloating-point layout.\n\n`sideOffset` defaults to `--arrow-size` (tooltip.module.css) + 4px — enough\ngap for the arrow to bridge with a few px of breathing room past its tip,\nrather than landing flush on the trigger. Keep the two in sync if either\nchanges.",
+        "description": "Tooltip.Positioner — positions the popup relative to the trigger via\nfloating-point layout.\n\n`sideOffset` defaults to `--arrow-size` (tooltip.module.css) + 4px, for\ngap past the arrow tip. Keep the two values in sync.",
         "props": [
           {
             "name": "align",
@@ -7410,7 +7410,7 @@
             "required": false,
             "type": "number",
             "defaultValue": "250",
-            "description": "Milliseconds to wait before opening on hover. Defaults to a snappier value\nthan Base UI's 600ms — a deliberate imf default per \"make the correct\nchoice the easy one\". Grouped triggers under a `Tooltip.Provider` open\ninstantly after the first regardless of this value."
+            "description": "Milliseconds to wait before opening on hover. Defaults to less than Base\nUI's 600ms, deliberately. Grouped triggers under a `Tooltip.Provider` open instantly\nafter the first, regardless of this value."
           },
           {
             "name": "disabled",
@@ -7746,7 +7746,7 @@
       },
       {
         "name": "Typo.InlineCode",
-        "description": "Typo.InlineCode — inline code fragment. Thin wrapper over `Code.Inline`, which\nowns the inline-code styling; the rendered `<code>` carries the `Code.Inline`\nidentity. Unlike other Typo members it has no color-`variant` axis — inline\ncode is a fixed neutral chip.",
+        "description": "Typo.InlineCode — inline code fragment. Thin wrapper over `Code.Inline`, which\nowns the styling and identity. No color-`variant` axis — it's a fixed neutral chip.",
         "props": [
           {
             "name": "children",
@@ -8054,7 +8054,7 @@
       },
       {
         "name": "CodeHighlight.InlineLink",
-        "description": "Code.InlineLink — the inline-code chip rendered as a link: the same hairline\nbox, with an optional directional arrow behind the separator instead of a copy button.\nSibling of `Code.Inline`, sharing its chip visual (`.inline`) — never both a\ncopy button and a link on the same chip. Mirrors `ChipLink`'s shape (anchor\nis the chip root, trailing icon nudges on hover, `data-kind` picks the icon).",
+        "description": "Code.InlineLink — the inline-code chip rendered as a link: the same hairline\nbox, with an optional directional arrow behind the separator instead of a copy button.\nSibling of `Code.Inline`, sharing its chip visual (`.inline`). Never both a\ncopy button and a link on the same chip. Mirrors `ChipLink`'s shape (anchor\nis the chip root, trailing icon nudges on hover, `data-kind` picks the icon).",
         "props": [
           {
             "name": "kind",

package/src/llms/install-templates/AGENTS.md

@@ -20,11 +20,11 @@ or suggesting a command.
 
 <The installer owns only the fenced block below. It refreshes that block on every install; the rest belongs to the project.>
 
-<!-- imf-web-ui:begin — managed by `npx web-ui-install`; edits inside the fence are overwritten -->
+<!-- imf-web-ui:begin — managed by `npx web-ui install`; edits inside the fence are overwritten -->
 
-`.agents/skills/imf-web-ui-*` is vendored from `@imfusion/web-ui` and resynced with `npx web-ui-install`. Do not edit the
-vendored copy or put project-specific conventions there. Load the matching skill before changing UI, styles, data, tests, or
-docs.
+`.agents/skills/imf-web-ui-*` is vendored from `@imfusion/web-ui` and resynced with `npx web-ui install skills`. Do not edit
+the vendored copy or put project-specific conventions there. Load the matching skill before changing UI, styles, data, tests,
+or docs.
 
 <!-- imf-web-ui:end -->
 

package/src/llms/install-templates/hooks/baseline-staleness.sh

@@ -6,11 +6,18 @@ PKG=node_modules/@imfusion/web-ui/package.json
 [ -f "$PKG" ] || exit 0
 CURRENT=$(node -p "require('./$PKG').version" 2>/dev/null) || exit 0
 
-for marker in .agents/skills/imf-web-ui-*/.imf-web-ui-skill-version.json; do
+# .claude/skills may be a symlink to .agents/skills; skip markers already read.
+seen=""
+for marker in .agents/skills/imf-web-ui*/.imf-web-ui-skill-version.json .claude/skills/imf-web-ui*/.imf-web-ui-skill-version.json; do
   [ -f "$marker" ] || continue
+  real=$(cd "$(dirname "$marker")" && pwd -P)/$(basename "$marker")
+  case " $seen " in
+    *" $real "*) continue ;;
+  esac
+  seen="$seen $real"
   INSTALLED=$(node -p "require('./$marker').version" 2>/dev/null) || continue
   if [ "$INSTALLED" != "$CURRENT" ]; then
-    echo "imf-web-ui skills are stale ($INSTALLED installed, package is $CURRENT) — run: npx web-ui-install"
+    echo "imf-web-ui skills are stale ($INSTALLED installed, package is $CURRENT) — run /imf-web-ui-update, or: npx web-ui install skills && npx web-ui install hooks"
     break
   fi
 done

package/src/llms/skills/imf-web-ui/SKILL.md

@@ -42,15 +42,14 @@ one-file edit.
 
 Read only the matching page under `node_modules/@imfusion/web-ui/docs/user-guide/` in the consumer project:
 
-| Question                                                        | Page                 |
-| --------------------------------------------------------------- | -------------------- |
-| What the library provides                                       | `Introduction.mdx`   |
-| Installation, stylesheet, and provider wiring                   | `GettingStarted.mdx` |
-| Favicons, social sharing images, and static brand files         | `BrandAssets.mdx`    |
-| Composition, CSS overrides, state attributes, and color schemes | `UsagePatterns.mdx`  |
-| Token families and customization                                | `Tokens.mdx`         |
-| Agent skills and their installation                             | `AiAgents.mdx`       |
-| Library boundaries and implementation choices                   | `HowItsBuilt.mdx`    |
+| Question                                                                 | Page                 |
+| ------------------------------------------------------------------------ | -------------------- |
+| What the library provides, installation, stylesheet, and provider wiring | `GettingStarted.mdx` |
+| Favicons, social sharing images, and static brand files                  | `BrandAssets.mdx`    |
+| Composition, CSS overrides, state attributes, and color schemes          | `UsagePatterns.mdx`  |
+| Token families and customization                                         | `Tokens.mdx`         |
+| Agent skills, hooks, and their installation                              | `AgentTooling.mdx`   |
+| Library boundaries and implementation choices                            | `HowItsBuilt.mdx`    |
 
 Read MDX as text. Its imports, JSX previews, and Storybook navigation are presentation, not instructions to install or run
 Storybook in the consumer. Cite the packaged page when answering a library question. Use `imf-web-ui-components` for exact

package/src/llms/skills/imf-web-ui-audit/SKILL.md

@@ -13,11 +13,11 @@ allowed-tools: Read Glob Grep
 This is a read-only audit. Its job is to align a project with its conventions: compare the project against the selected
 `imf-web-ui-conventions` topics, report evidence, and end with work the human can approve.
 
-A gap against a convention is high severity. The project agreed to those conventions, so the finding carries no argument
-about whether it matters, and a deliberate reason to differ is the only thing that lowers it. Say what that reason is.
+A gap against a convention is high severity: the project agreed to the conventions. Only a deliberate, stated reason to
+differ lowers it.
 
-Anything else you notice belongs under `Suggestions`: what running the code revealed, what an investigation turned up, what a
-reader would tidy on the way past. Report it, keep it low, and do not let it crowd the sections a consumer has to act on.
+Anything else belongs under `Suggestions`: findings from running the code, investigating, or reading through. Report it, keep
+it low, and do not let it crowd the sections a consumer has to act on.
 
 ## Workflow
 

package/src/llms/skills/imf-web-ui-components/SKILL.md

@@ -39,6 +39,9 @@ Use the generated package indexes. They are smaller and more reliable than readi
 Use `doc.gen.json` for Web UI props. A linked upstream page is useful for behavior, composition, and accessibility, but its
 prop table is not authoritative for this package.
 
+A `variant` value belongs to the component that defines it; one component's list is not a global one. `brand` means identity
+color and `primary` means the action color, even where they look alike.
+
 ## If the component is missing
 
 Treat a missing identity-index entry as a real gap. Do not invent an API or silently import the upstream component. Report

package/src/llms/skills/imf-web-ui-conventions/templates/AUDIT_CHECKLIST.md

@@ -37,7 +37,6 @@ sections one to one — change a topic's sections and this file follows in the s
 - [ ] Compose, don't configure
 - [ ] Put state where its truth lives
 - [ ] Effects: last resort, and named
-- [ ] Reading list
 
 ## Components — `components`
 

package/src/llms/skills/imf-web-ui-conventions/topics/agent-tooling.md

@@ -1,33 +1,38 @@
 # Agent tooling
 
-`npx web-ui-install` manages the Web UI skills and optional lifecycle hooks in a consumer project. This topic explains the
-choices around that installer.
+`npx web-ui install` manages the Web UI skills and optional lifecycle hooks in a consumer project.
 
 ## The skill bundle
 
-Run:
+Run, on a first install:
 
 ```sh
-npx web-ui-install
+npx web-ui install skills --harness=claude
 ```
 
 It installs or refreshes the `imf-web-ui-*` skills, updates the managed `AGENTS.md` fence, and removes skills that the
-package no longer ships. The installer remembers `.claude/skills/`, `.agents/skills/`, or both. Use `--target claude|agents`
-to choose explicitly and `--reconfigure` to choose again.
+package no longer ships. The skills always live in `.agents/skills/`. `--harness` selects `claude`, which also links each
+skill into `.claude/skills/`, `codex`, or `all`; without it, the command prompts and remembers the choice. Pass
+`--reconfigure` to choose again. On a project that already has an install, re-running `install skills` without `--harness`
+reuses the remembered harness instead of narrowing it.
 
 Skill version markers (`.imf-web-ui-skill-version.json`) show which package version installed each skill. Refresh them with
 the installer; do not hand-edit the vendored files.
 
 ## The hooks
 
-Install the optional lifecycle hooks with:
+`install hooks` requires the skills to already be installed for the target harness; without them, it errors and tells you to
+run `install skills` first:
 
 ```sh
-npx web-ui-install --hooks
+npx web-ui install skills --harness=claude
+npx web-ui install hooks --harness=claude
 ```
 
-The installer owns the scripts under `.agents/hooks/imf-web-ui/` and merges its registrations into Claude Code and Codex
-settings. It refreshes scripts and removes retired registrations without replacing unrelated entries.
+The installer owns the scripts under `.agents/hooks/imf-web-ui/` and merges its registrations into the registration file for
+the chosen harness only: Claude Code's `.claude/settings.json`, Codex's `.codex/hooks.json`, or both with `--harness=all`. It
+refreshes scripts and removes retired registrations without replacing unrelated entries, and removes its registrations from a
+harness that is not selected.
 
 The shipped events are:
 

package/src/llms/skills/imf-web-ui-conventions/topics/git.md

@@ -27,4 +27,5 @@ The scripts under `scripts/verify/` own the step lists. Hooks and npm scripts on
 ## Staleness at commit time
 
 Pre-commit also runs advisory checks for vendored skill markers and documentation drift. If a staged change makes a doc
-stale, update the doc in the same commit. For an outdated installed skill, run `npx web-ui-install` in the consumer project.
+stale, update the doc in the same commit. For an outdated installed skill, run `npx web-ui install skills` (also
+`npx web-ui install hooks` if the project uses hooks) with the project's existing `--harness` in the consumer project.

package/src/llms/skills/imf-web-ui-conventions/topics/styling.md

@@ -45,7 +45,7 @@ Do not target generated CSS Module class names and do not use `!important` to fi
 hook, not a state flag.
 
 ```css
-[data-imf-ui-component="Switch"][data-checked] {
+[data-imf-ui-component="Switch.Root"][data-checked] {
   outline: var(--imf-ui-border-size-2) solid var(--imf-ui-color-fg-positive);
 }
 ```

package/src/llms/skills/imf-web-ui-conventions/topics/tooling.md

@@ -1,6 +1,6 @@
 # Tooling
 
-Read this topic before adding a dependency or configuring a tool. Use the tool's current documentation rather than memory.
+Use the tool's current documentation rather than memory.
 
 ## Topic-to-tool map
 

package/src/llms/skills/imf-web-ui-setup/SKILL.md

@@ -50,7 +50,7 @@ The plan describes the exact starter files. It does not copy a generic starter p
 
 ## Installer steps
 
-For `agent-tooling`, list the `npx web-ui-install` commands as steps for the human. Read existing registrations first and do
+For `agent-tooling`, list the `npx web-ui install` commands as steps for the human. Read existing registrations first and do
 not stack a hook on an event the project already covers. Include the Codex trust review when hooks are part of the plan.
 
 ## Safety

package/src/llms/skills/imf-web-ui-update/SKILL.md

@@ -18,12 +18,11 @@ Never overwrite user changes or commit without fresh approval.
 1. Work from the frontend package root. In a monorepo, find the package that owns the Web UI dependency.
 2. Read its `package.json`, lockfile, and repository instructions. npm with `package-lock.json` is the expected setup; stop
    if another lockfile is the active one.
-3. Record `git status --short`, the installed Web UI version, the installed skill targets, hooks, registrations, and
+3. Record `git status --short`, the installed Web UI version, the installed skill harness(es), hooks, registrations, and
    `AGENTS.md` fence.
 4. Check for another npm process and stop on a conflict. Uncommitted work is also a conflict: report it and stop before the
-   first mutating command, rather than deciding it falls outside this workflow's paths. What the update touches is not
-   knowable until it runs, and the person can commit, stash, or wave it through in one reply. Never reset, clean, restore, or
-   hide their work.
+   first mutating command, even if it looks unrelated to this workflow: what the update touches is only known once it runs,
+   and the person can commit, stash, or wave it through in one reply. Never reset, clean, restore, or hide it.
 5. With `--dry-run`, stop after reporting what would happen. Do not install, format, stage, commit, or ask for commit
    approval.
 
@@ -41,22 +40,25 @@ whether to use `latest` or `dev` before proceeding. Resolve the selected tag or
 registry lookup fails. Report "already current" only when the pre-update version matches this resolved target; npm's "up to
 date" message alone does not prove that.
 
-Install the resolved version, then refresh the existing installer target:
+Install the resolved version, then refresh the existing installer harness (run `install hooks` too only if the project
+already has hooks installed):
 
 ```sh
 npm install @imfusion/web-ui@<resolved-version>
-npx web-ui-install
-npx web-ui-install --hooks
+npx web-ui install skills
+npx web-ui install hooks
 ```
 
-Stop on install failure. Preserve the installer's existing target. Do not use `--force` or `--legacy-peer-deps`.
+Both commands reuse the recorded harness. An install from the old `web-ui-install` has no record: pass the project's existing
+harness once, e.g. `--harness=all`. Stop on install failure. Do not use `--force` or `--legacy-peer-deps`.
 
-The installer owns the vendored skills, its `AGENTS.md` fence, and hook scripts. Run both installer commands after the
-package update even when the existing registrations look complete: they refresh scripts, prune retired registrations, and
-merge installer-owned entries idempotently into `.claude/settings.json` and `.codex/hooks.json`. Stop on malformed settings
-or installer conflicts. Read existing host registrations first and do not stack an event the project already covers.
+The installer owns the vendored skills, its `AGENTS.md` fence, and hook scripts. Run the installer commands after the package
+update even when the existing registrations look complete: they refresh scripts, prune retired registrations, and merge
+installer-owned entries idempotently into the registration file for the chosen harness (`.claude/settings.json`,
+`.codex/hooks.json`, or both). Stop on malformed settings or installer conflicts. Read existing host registrations first and
+do not stack an event the project already covers.
 
-After both installer commands, inspect the installed skill diffs and briefly report any guidance changes; version-marker
+After the installer command, inspect the installed skill diffs and briefly report any guidance changes; version-marker
 changes alone do not count. Re-read changed skills and references relevant to the remaining work, including this update skill
 if it changed. Continue from the current step using the updated guidance, keeping the original baseline, user choices, and
 completed changes in mind. Check for newly required steps without repeating completed mutations or expanding the approved