@imfusion/web-ui 0.5.1-dev.53.gb710322e → 0.5.1-dev.6.g9d275fa8

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

@@ -1,87 +1,57 @@
 ---
 name: imf-web-ui-setup
 description:
-  "Plan and, after explicit approval, bootstrap an ImFusion frontend against the conventions baseline: library setup,
-  tooling, git, npm project, authentication, project structure, docs structure, data, testing, or agent tooling. Inspect
-  statically first and write only the approved files. Use imf-web-ui-audit for read-only health checks or topics with no
-  setup action."
-argument-hint: "[full|library-setup|tooling|git|npm-project|authentication|project-structure|docs-structure|data|testing|agent-tooling]"
-allowed-tools: Read Glob Grep Write
+  "One-time wiring of a consumer project: the @imfusion/web-ui styles import and WebUIProvider wrapper. Also covers what to
+  say about the Agent Skills a dependency ships. Load when installing the library for the first time, or when components
+  render unstyled or without theme context."
 ---
 
 # imf-web-ui-setup
 
-You are the frontend bootstrap planner. Inspect the repository statically, read the applicable `imf-web-ui-conventions`
-topics, and prepare a complete proposal for every file you would create or change. The project wins where it already has a
-working convention. This skill is plan-first: enter the host's plan mode before presenting the proposal, and do not create a
-report file as a substitute for the host plan.
+This is library wiring: the styles import and the provider. It applies to anyone using `@imfusion/web-ui`.
 
-## Workflow
+If the project is an **ImFusion** frontend and this is first-time setup, mention once that
+`imf-web-ui-imfusion-frontend-setup` sets up or audits the repo's tooling (formatting, linting, hooks, scripts) against the
+ImFusion baseline, and let the human decide. Offer it; never run it uninvited, and don't raise it again if they pass — the
+library works fine without any of it.
 
-1. Resolve the argument, not the prose. Bare means `full`; a topic argument selects one supported setup topic. A prompt that
-   merely _mentions_ one area ("wire up the tooling", "get the project set up") is still a `full` run — the words describe a
-   starting point, not a scope that excludes the rest. For a greenfield `full` run the application boundary (router, route
-   groups, current-user query, AppShell) is part of the deliverable even when the prompt never names it; propose it and let
-   the human remove it, never silently defer it as "out of scope." For an unsupported topic argument, list the available
-   setup topics and point the human to `imf-web-ui-audit` for a read-only report.
-2. Enter the host's plan mode. If it is not already active, use the host plan-mode control before inspecting and planning.
-3. Read the selected convention topics and inspect the repository with `Read`, `Glob`, and `Grep` only.
-4. Build the complete proposal in the host plan from the shared report contract at
-   [`../imf-web-ui-conventions/templates/REPORT.md`](../imf-web-ui-conventions/templates/REPORT.md). Include the concrete
-   content of every file the approved setup would create or change, with repository evidence for each decision.
-5. A greenfield `full` setup proposes the whole starter skeleton, not just tooling — tooling without the application boundary
-   is an unfinished setup. Include, as concrete files in the plan:
-   - the TanStack Router **package added to `package.json`** (with its router devtools as a dev dependency), not just
-     imported — code that imports an uninstalled package is an incomplete setup
-     ([project-structure.md](../imf-web-ui-conventions/topics/project-structure.md));
-   - pathless `_public/` and `_app/` route groups behind one server-backed current-user boundary
-     ([authentication.md](../imf-web-ui-conventions/topics/authentication.md));
-   - the minimal branded `AppShell` in `_app/` by default — omit the shell only when the human explicitly says the product
-     has no persistent authenticated navigation (ask first), but keep the `_app/` boundary either way;
-   - a per-topic `api/` folder for any data the first screen shows, never an inline fixture in the component
-     ([data.md](../imf-web-ui-conventions/topics/data.md)).
+Every consumer entry point needs exactly two lines, in this order:
 
-   The plan documents this starter shape as concrete file content; it does not copy a full external starter template.
-   Existing projects keep their working choices — propose only the gaps.
+```tsx
+import "@imfusion/web-ui/styles.css";
+import { WebUIProvider, Button } from "@imfusion/web-ui";
+```
 
-6. Keep the plan as the approval gate. After the host approves and exits plan mode, write only the listed files. Complete any
-   immediately requested bootstrap work covered by that approved plan, then invoke `imf-web-ui-audit full` as a verification
-   step and review the findings it reports back before declaring the setup complete. The audit stays out of plan mode here —
-   the human has just left it to let this work happen.
+Wrap the app root in `<WebUIProvider>` once. Components rendered outside it won't have the theme/CSS-variable context they
+expect.
 
-Installer and hook runs stay with the human: an `agent-tooling` proposal lists the `npx web-ui-install` commands as human
-steps, applies the judgment from the topic (read existing registrations first, never stack a hook on a covered event), and
-includes the topic's Codex trust follow-up whenever hooks are part of the plan.
+Never import a Base UI (or other upstream) stylesheet or component directly — everything a web-ui component needs is already
+inside `styles.css` and the package's own exports; reaching around web-ui to the upstream library is always wrong, even if
+the upstream docs show it that way.
 
-## Checklist
+## Dependency-shipped skills
 
-The post-implementation audit uses the shared
-[convention audit checklist](../imf-web-ui-conventions/templates/AUDIT_CHECKLIST.md) to verify the complete baseline, not
-only the setup topic selected at the start.
+Some libraries ship Agent Skills inside their npm package; TanStack does across much of the suite.
+[`@tanstack/intent`](https://github.com/TanStack/intent) is the CLI that surfaces them — an agent holding a dependency but
+not its guidance writes plausible code against a half-remembered API.
 
-## Safety
+Setting it up is the project's own call, not something web-ui does on its behalf. Point it out:
 
-Use only static inspection: `Read`, `Glob`, and `Grep`. Do not use a shell or invoke Node, npm, npx, package scripts, hooks,
-config imports, linters, tests, builds, Git commands, project binaries, installers, or package managers. Read config as text
-and report runtime or machine-local state that cannot be established statically as unverified. After approval, `Write` is
-limited to the files listed in the approved report; anything needing execution goes in the plan for the human.
+> This project has TanStack dependencies that ship their own Agent Skills. `@tanstack/intent` can make them reachable — worth
+> a look if you want your agent working from the library's own guidance.
 
-## Setup topics
+Intent offers two things: a fenced instructions block in `AGENTS.md`, and a `PreToolUse` hook that blocks an edit until a
+matching skill has been read. The house preference is both — the block alone is advice an agent can walk past. The hook
+refuses every edit while no matching skill is loadable, so a project adopting it wants the current docs open; that sequencing
+belongs to whoever runs it.
 
-`full` covers every topic below. A one-topic run assesses only that topic.
+Whatever the project decides, guidance you didn't read is not guidance you have: use `npx @tanstack/cli` for TanStack docs,
+and never guess at a skill name.
 
-| Topic               | Assess and plan                                                                |
-| ------------------- | ------------------------------------------------------------------------------ |
-| `library-setup`     | styles import, `WebUIProvider`, and library package wiring                     |
-| `tooling`           | dependency selection, devtools, Prettier, ESLint, TypeScript, and verification |
-| `git`               | tracked hooks, verification scopes, and staleness wiring                       |
-| `npm-project`       | package metadata, scripts, pins, npm, and Node configuration                   |
-| `authentication`    | current-user query, public/app guards, login, and logout                       |
-| `project-structure` | source tree, route groups, optional app shell, naming, and placement           |
-| `docs-structure`    | README, AGENTS, docs index, and content boundaries                             |
-| `data`              | transport, schemas, query/mutation options, keys, and invalidation             |
-| `testing`           | test boundaries and verification coverage                                      |
-| `agent-tooling`     | vendored skills, AGENTS fence, lifecycle hooks, registrations, and staleness   |
+## Symptoms of a broken setup
 
-Setup has no file-creation action for `react`, `typescript`, `class-names`, `validation`, `components`, `styling`, `assets`,
-`library-boundary`, or `tokens`; select those in `imf-web-ui-audit`.
+- **Components render but look unstyled** — the `styles.css` import is missing from the entry point.
+- **Components render but ignore the theme (wrong colors, no CSS variables resolving)** — they're mounted outside
+  `<WebUIProvider>`.
+- **An integration component throws on import** — its optional peer dependency isn't installed; check the component's
+  description in the docgen index (`imf-web-ui-components`) for which peer to add to your `package.json`.

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

@@ -11,7 +11,7 @@ description:
 Most teams consuming `@imfusion/web-ui` don't have a designer on call. This skill stands in: it encodes the library authors'
 UX experience — the whole experience of a screen, its visual design, and the usability where both meet. Follow it by default;
 deviate when the product has a real reason to. Code-level patterns (tokens, layers, wrappers) live in
-`imf-web-ui-conventions`; project wiring lives in the `library-setup` topic of `imf-web-ui-conventions`.
+`imf-web-ui-frontend-patterns`; project wiring lives in `imf-web-ui-setup`.
 
 Component names below are real — verify any API against the docgen index (`imf-web-ui-components`) before use. Never invent a
 component this library doesn't ship.
@@ -82,13 +82,13 @@ Every screen ships four states, not one:
 
 Custom UI the library doesn't cover should be indistinguishable from library UI: build it from `--imf-ui-*` tokens and
 compose it with library primitives. The goal lives here; the mechanics (tokens, layers, wrappers) live in
-`imf-web-ui-conventions`.
+`imf-web-ui-frontend-patterns`.
 
 ## Experimental components
 
 The identity index marks each component `stable` or `experimental`. Experimental ones are fine to use, but expect API
-movement across releases — prefer wrapping them once (see `imf-web-ui-conventions`) so a breaking change lands in one file,
-not forty call sites.
+movement across releases — prefer wrapping them once (see `imf-web-ui-frontend-patterns`) so a breaking change lands in one
+file, not forty call sites.
 
 ## Deep dives
 

package/src/llms/skills/imf-web-ui-ux/references/forms.md

@@ -8,8 +8,8 @@ non-compliant ones. Read before building any form beyond two fields.
 
 The library ships the controls (`Input`, `Select`, `Checkbox`, `Switch`, `Slider`) but no form or field wrapper, so labels,
 grouping, and where errors appear are composed by you. That's exactly where these rules apply. Composing the markup is not
-the same as owning the state: form state and validation belong to a form library (see `imf-web-ui-conventions`), and these
-rules govern how its errors get presented.
+the same as owning the state: form state and validation belong to a form library (see `imf-web-ui-frontend-patterns`), and
+these rules govern how its errors get presented.
 
 ## Structure
 

package/bin/install.js

@@ -1,428 +0,0 @@
-#!/usr/bin/env node
-
-// Installs this package's agent tooling into the consumer project: the
-// skill family (../src/llms/skills/imf-web-ui*/) and the agent lifecycle
-// hooks in the installer-owned template home. Runs in the
-// CONSUMER's environment, so it may only use this package's real runtime
-// dependencies (@clack/prompts). Never wire this into a postinstall hook:
-// ambient script execution on `npm install` is a live supply-chain attack
-// vector — install stays an explicit, user-run command.
-//
-// The skills cross-reference each other, so they install as one bundle.
-// When both targets are selected, .agents/skills/ holds the real copy and
-// .claude/skills/ symlinks it (this repo's own convention) so the two
-// can't drift apart.
-//
-// Flags: bare = skills only; --hooks adds the agent lifecycle hooks after the
-// consumer checks the repo's existing hooks and still installs the skills.
-// --target claude|agents
-// (repeatable) selects scripted install targets,
-// --reconfigure to re-open the target prompt on an existing install.
-
-import {
-  chmodSync,
-  cpSync,
-  existsSync,
-  lstatSync,
-  mkdirSync,
-  readdirSync,
-  readFileSync,
-  rmSync,
-  symlinkSync,
-  writeFileSync
-} from "node:fs";
-import { spawnSync } from "node:child_process";
-import { dirname, relative, resolve } from "node:path";
-import { fileURLToPath } from "node:url";
-import * as p from "@clack/prompts";
-
-const SKILL_PREFIX = "imf-web-ui";
-const VERSION_MARKER = ".imf-web-ui-skill-version.json";
-
-const here = dirname(fileURLToPath(import.meta.url));
-// Source is relative to THIS SCRIPT's location (inside node_modules), not
-// the consumer's cwd — the script is invoked from the consumer's project
-// root, but the skills it copies ship alongside this file in the package.
-const skillsRoot = resolve(here, "..", "src", "llms", "skills");
-const packageJson = JSON.parse(readFileSync(resolve(here, "..", "package.json"), "utf-8"));
-const currentVersion = packageJson.version;
-
-// Destination is relative to the consumer's project root (cwd), since
-// that's where their `.claude/` or `.agents/` directory lives.
-const projectRoot = process.cwd();
-
-const TARGETS = {
-  claude: { label: "Claude Code", root: resolve(projectRoot, ".claude", "skills") },
-  agents: { label: "Vendor-neutral (.agents/)", root: resolve(projectRoot, ".agents", "skills") }
-};
-
-function discoverSkills() {
-  if (!existsSync(skillsRoot)) return [];
-  return readdirSync(skillsRoot, { withFileTypes: true })
-    .filter(entry => entry.isDirectory() && entry.name.startsWith(SKILL_PREFIX))
-    .map(entry => entry.name)
-    .sort();
-}
-
-function displayPath(absPath) {
-  return `./${relative(projectRoot, absPath)}`;
-}
-
-function readInstalledVersion(dir) {
-  const markerPath = resolve(dir, VERSION_MARKER);
-  if (!existsSync(markerPath)) return null;
-  try {
-    return JSON.parse(readFileSync(markerPath, "utf-8")).version ?? null;
-  } catch {
-    return null;
-  }
-}
-
-function writeRealCopy(sourceDir, destDir) {
-  mkdirSync(dirname(destDir), { recursive: true });
-  // force: true makes re-running after a version bump overwrite cleanly.
-  cpSync(sourceDir, destDir, { recursive: true, force: true });
-  writeFileSync(resolve(destDir, VERSION_MARKER), JSON.stringify({ version: currentVersion }, null, 2) + "\n");
-}
-
-function writeSymlink(linkPath, targetPath) {
-  mkdirSync(dirname(linkPath), { recursive: true });
-  // lstat (not existsSync, which follows symlinks) catches a broken/stale
-  // symlink left over from a prior run, not just a real file or directory.
-  if (lstatSync(linkPath, { throwIfNoEntry: false })) {
-    rmSync(linkPath, { recursive: true, force: true });
-  }
-  symlinkSync(relative(dirname(linkPath), targetPath), linkPath);
-}
-
-function removeOrphanedSkills(selected, skills, both) {
-  const bundledSkills = new Set(skills);
-  const selectedTargets = both ? ["agents", "claude"] : selected;
-
-  for (const key of selectedTargets) {
-    const { root } = TARGETS[key];
-    if (!existsSync(root)) continue;
-
-    const orphanedSkills = readdirSync(root).filter(name => name.startsWith(`${SKILL_PREFIX}-`) && !bundledSkills.has(name));
-    for (const name of orphanedSkills) {
-      rmSync(resolve(root, name), { recursive: true, force: true });
-      // In the two-target layout, .claude/ is a symlinked view of the
-      // canonical .agents/ copy. Remove its matching link along with the
-      // orphaned canonical skill.
-      if (both && key === "agents") {
-        rmSync(resolve(TARGETS.claude.root, name), { recursive: true, force: true });
-      }
-      p.log.info(`Removed orphaned skill: ${name} (no longer in this bundle)`);
-    }
-  }
-}
-
-// A prior install is recoverable from the filesystem, so a re-run doesn't
-// re-ask: a target counts as chosen when any bundled skill is present under
-// it. Symlinks count — they're how the both-targets layout represents
-// .claude/, and lstat avoids following them into the real copy.
-function detectInstalledTargets(skills) {
-  return Object.keys(TARGETS).filter(key =>
-    skills.some(name => lstatSync(resolve(TARGETS[key].root, name), { throwIfNoEntry: false }))
-  );
-}
-
-// Hook templates are installer-owned; the installer copies the scripts into the
-// consumer's .agents/hooks/ and merges the registrations into the host
-// registration files: .claude/settings.json from settings.json, .codex/hooks.json
-// from codex-hooks.json. One pristine template per host, merged verbatim.
-const installTemplatesRoot = resolve(here, "..", "src", "llms", "install-templates");
-const hooksSourceDir = resolve(installTemplatesRoot, "hooks");
-const hooksSettingsTemplate = resolve(installTemplatesRoot, "settings.json");
-const codexHooksTemplate = resolve(installTemplatesRoot, "codex-hooks.json");
-// Installer-owned subdirectory: refreshed wholesale on every run, so a repo's
-// own hooks in .agents/hooks/ are never touched.
-const hooksDestDir = resolve(projectRoot, ".agents", "hooks", "imf-web-ui");
-const settingsPath = resolve(projectRoot, ".claude", "settings.json");
-const codexHooksPath = resolve(projectRoot, ".codex", "hooks.json");
-
-// Serializing the file reflows entries this installer doesn't own; the
-// consumer's own Prettier puts them back. Best-effort: absent, or the path is
-// .prettierignore'd, nothing happens.
-function formatSettings(path) {
-  let toolRoot = projectRoot;
-  while (toolRoot !== dirname(toolRoot) && !existsSync(resolve(toolRoot, "node_modules", ".bin"))) {
-    toolRoot = dirname(toolRoot);
-  }
-  const prettier = resolve(toolRoot, "node_modules", ".bin", "prettier");
-  if (!existsSync(prettier)) return;
-  spawnSync(prettier, ["--write", path], { cwd: projectRoot, stdio: "ignore" });
-}
-
-function installHookScripts() {
-  const scripts = readdirSync(hooksSourceDir).filter(name => name.endsWith(".sh"));
-  mkdirSync(hooksDestDir, { recursive: true });
-  for (const name of scripts) {
-    const dest = resolve(hooksDestDir, name);
-    cpSync(resolve(hooksSourceDir, name), dest, { force: true });
-    chmodSync(dest, 0o755);
-  }
-  // The directory is installer-owned: a script dropped from the template is
-  // removed on refresh, so a stale hook can't keep running after an upgrade.
-  const removed = readdirSync(hooksDestDir).filter(name => name.endsWith(".sh") && !scripts.includes(name));
-  for (const name of removed) {
-    rmSync(resolve(hooksDestDir, name), { force: true });
-  }
-  return { installed: scripts, removed };
-}
-
-// A registration is identified by the script it runs, not the command string:
-// "$VAR/..." and "${VAR}/..." are the same hook.
-const HOOKS_DIR_SEGMENT = ".agents/hooks/imf-web-ui/";
-
-function hookScriptId(command) {
-  if (typeof command !== "string") return null;
-  const at = command.lastIndexOf(HOOKS_DIR_SEGMENT);
-  if (at === -1) return null;
-  // Only a bare script name (plus an optional closing quote) identifies a
-  // registration as installer-owned. Trailing arguments or redirection mean
-  // the consumer customized the command; that counts as foreign, so the
-  // stale-prune below can never delete it.
-  const match = command.slice(at + HOOKS_DIR_SEGMENT.length).match(/^([\w.-]+)["']?$/);
-  return match ? match[1] : null;
-}
-
-function entryScriptIds(entry) {
-  return (entry.hooks ?? []).map(hook => hookScriptId(hook.command)).filter(Boolean);
-}
-
-// Merge, never clobber: a registration is added only when no existing entry
-// for that event already runs the same script, so re-runs are idempotent and
-// hand-written settings survive. The one exception is entries that only run
-// scripts from the installer-owned directory that are no longer shipped —
-// those are pruned, or they would point at a script the refresh just removed.
-// A run that changes nothing writes nothing.
-function mergeHookRegistrations(targetPath, templateHooks, shippedScripts) {
-  let settings = {};
-  if (existsSync(targetPath)) {
-    try {
-      settings = JSON.parse(readFileSync(targetPath, "utf-8"));
-    } catch {
-      return null;
-    }
-  }
-  settings.hooks ??= {};
-  let added = 0;
-  let removed = 0;
-  // Pruning is per hook, not per entry: only an individual hook that
-  // unambiguously runs a no-longer-shipped installer-owned script goes;
-  // consumer hooks sharing the same entry stay.
-  const emptiedEvents = [];
-  for (const [event, entries] of Object.entries(settings.hooks)) {
-    if (!Array.isArray(entries)) continue;
-    let pruned = 0;
-    const kept = entries
-      .map(entry => {
-        if (!Array.isArray(entry.hooks)) return entry;
-        const hooks = entry.hooks.filter(hook => {
-          const script = hookScriptId(hook.command);
-          return script === null || shippedScripts.includes(script);
-        });
-        pruned += entry.hooks.length - hooks.length;
-        return hooks.length === entry.hooks.length ? entry : { ...entry, hooks };
-      })
-      .filter(entry => !Array.isArray(entry.hooks) || entry.hooks.length > 0);
-    if (pruned === 0) continue;
-    removed += pruned;
-    if (kept.length === 0 && !(event in templateHooks)) emptiedEvents.push(event);
-    else settings.hooks[event] = kept;
-  }
-  // An event whose entries were all pruned disappears instead of lingering as [].
-  if (emptiedEvents.length > 0) {
-    settings.hooks = Object.fromEntries(Object.entries(settings.hooks).filter(([event]) => !emptiedEvents.includes(event)));
-  }
-  for (const [event, entries] of Object.entries(templateHooks)) {
-    settings.hooks[event] ??= [];
-    for (const entry of entries) {
-      const scripts = entryScriptIds(entry);
-      const present = settings.hooks[event].some(existing =>
-        entryScriptIds(existing).some(script => scripts.includes(script))
-      );
-      if (!present) {
-        settings.hooks[event].push(entry);
-        added++;
-      }
-    }
-  }
-  if (added === 0 && removed === 0) return { added, removed };
-  mkdirSync(dirname(targetPath), { recursive: true });
-  writeFileSync(targetPath, JSON.stringify(settings, null, 2) + "\n");
-  formatSettings(targetPath);
-  return { added, removed };
-}
-
-// The AGENTS.md baseline note lives inside a fenced block owned by this
-// installer. The template between the markers is the source of truth; an
-// existing AGENTS.md gets the block replaced in place (or appended when
-// absent), everything outside the fence is untouched. No AGENTS.md at all
-// is left alone — scaffolding one is the setup skill's job.
-const AGENTS_BLOCK_BEGIN = "<!-- imf-web-ui:begin";
-const AGENTS_BLOCK_END = "<!-- imf-web-ui:end -->";
-const agentsTemplatePath = resolve(installTemplatesRoot, "AGENTS.md");
-const agentsPath = resolve(projectRoot, "AGENTS.md");
-
-function extractAgentsBlock(content) {
-  const begin = content.indexOf(AGENTS_BLOCK_BEGIN);
-  const end = content.indexOf(AGENTS_BLOCK_END);
-  if (begin === -1 || end === -1) return null;
-  return content.slice(begin, end + AGENTS_BLOCK_END.length);
-}
-
-function upsertAgentsBlock() {
-  if (!existsSync(agentsPath)) return "absent";
-  const block = extractAgentsBlock(readFileSync(agentsTemplatePath, "utf-8"));
-  if (!block) return "absent";
-  const current = readFileSync(agentsPath, "utf-8");
-  const existing = extractAgentsBlock(current);
-  const next = existing ? current.replace(existing, block) : `${current.trimEnd()}\n\n${block}\n`;
-  if (next === current) return "unchanged";
-  writeFileSync(agentsPath, next);
-  return existing ? "updated" : "added";
-}
-
-// --target claude|agents (repeatable) selects targets without the
-// interactive prompt — for CI and scripted installs.
-function parseTargetFlags(argv) {
-  const targets = [];
-  for (let i = 0; i < argv.length; i++) {
-    if (argv[i] !== "--target") continue;
-    const value = argv[i + 1];
-    if (!value || !(value in TARGETS)) {
-      console.error(`--target expects one of: ${Object.keys(TARGETS).join(", ")}`);
-      process.exit(1);
-    }
-    targets.push(value);
-    i++;
-  }
-  return targets;
-}
-
-async function main() {
-  const skills = discoverSkills();
-  const argv = process.argv.slice(2);
-  const flagTargets = parseTargetFlags(argv);
-  const reconfigure = argv.includes("--reconfigure");
-  // Every install includes the skill bundle. Hooks are opt-in via --hooks —
-  // the consumer's setup workflow drives that after checking what the repo
-  // already registers, but hooks without their companion skills are invalid.
-  const wantHooks = argv.includes("--hooks");
-  const wantSkills = true;
-
-  const components = [wantSkills && `${skills.length} skills`, wantHooks && "agent hooks"].filter(Boolean);
-  p.intro(`@imfusion/web-ui install — ${components.join(" + ")}`);
-
-  if (wantSkills && skills.length === 0) {
-    p.log.error(`No skills found at ${skillsRoot}. Reinstall @imfusion/web-ui and try again.`);
-    p.outro("Nothing installed.");
-    process.exitCode = 1;
-    return;
-  }
-
-  if (wantHooks) {
-    const { installed, removed } = installHookScripts();
-    p.log.success(`Agent hooks -> ${displayPath(hooksDestDir)} (${installed.length} scripts)`);
-    if (removed.length > 0) {
-      p.log.info(`Removed stale hook script(s): ${removed.join(", ")} (no longer shipped)`);
-    }
-    const registrations = [
-      [settingsPath, JSON.parse(readFileSync(hooksSettingsTemplate, "utf-8")).hooks],
-      [codexHooksPath, JSON.parse(readFileSync(codexHooksTemplate, "utf-8")).hooks]
-    ];
-    for (const [path, hooks] of registrations) {
-      const result = mergeHookRegistrations(path, hooks, installed);
-      if (result === null) {
-        p.log.warn(`${displayPath(path)} is not valid JSON — registrations not merged, fix it and re-run.`);
-      } else if (result.added > 0 || result.removed > 0) {
-        const changes = [
-          result.added > 0 && `registered ${result.added}`,
-          result.removed > 0 && `removed ${result.removed} stale`
-        ].filter(Boolean);
-        p.log.success(`${changes.join(", ")} hook registration(s) in ${displayPath(path)}`);
-      } else {
-        p.log.info(`Hook registrations already present in ${displayPath(path)}`);
-      }
-    }
-  }
-
-  const installedTargets = detectInstalledTargets(skills);
-
-  const existingVersions = Object.values(TARGETS)
-    .flatMap(({ root }) => skills.map(name => readInstalledVersion(resolve(root, name))))
-    .filter(Boolean);
-  if (existingVersions.length > 0 && existingVersions.every(v => v === currentVersion)) {
-    p.log.info(`Already up to date (v${currentVersion}). Re-running will overwrite with the same content.`);
-  } else if (existingVersions.some(v => v !== currentVersion)) {
-    const from = existingVersions.find(v => v !== currentVersion);
-    p.log.info(`Updating installed skills from v${from} to v${currentVersion}.`);
-  }
-
-  p.log.message(`Skills in this bundle:\n${skills.map(name => `  - ${name}`).join("\n")}`);
-
-  let selected;
-  if (flagTargets.length > 0) {
-    selected = flagTargets;
-    p.log.info(`Targets from --target flags: ${selected.join(", ")}`);
-  } else if (installedTargets.length > 0 && !reconfigure) {
-    selected = installedTargets;
-    p.log.info(
-      `Refreshing the existing install: ${selected.map(key => displayPath(TARGETS[key].root)).join(", ")}` +
-        ` — pass --reconfigure to choose different targets.`
-    );
-  } else {
-    selected = await p.multiselect({
-      message: "Install into which skill directory (or directories)?",
-      options: Object.entries(TARGETS).map(([key, { label, root }]) => ({
-        value: key,
-        label,
-        hint: displayPath(root)
-      })),
-      required: true
-    });
-
-    if (p.isCancel(selected)) {
-      p.cancel("Cancelled — nothing installed.");
-      return;
-    }
-  }
-
-  const both = selected.includes("claude") && selected.includes("agents");
-
-  for (const name of skills) {
-    const sourceDir = resolve(skillsRoot, name);
-    if (both) {
-      // .agents/ is the canonical real copy; .claude/ aliases it via symlink.
-      const realDir = resolve(TARGETS.agents.root, name);
-      writeRealCopy(sourceDir, realDir);
-      writeSymlink(resolve(TARGETS.claude.root, name), realDir);
-    } else {
-      for (const key of selected) {
-        writeRealCopy(sourceDir, resolve(TARGETS[key].root, name));
-      }
-    }
-  }
-
-  removeOrphanedSkills(selected, skills, both);
-
-  if (both) {
-    p.log.success(`Vendor-neutral (.agents/) -> ${displayPath(TARGETS.agents.root)}/${SKILL_PREFIX}*`);
-    p.log.success(`Claude Code -> ${displayPath(TARGETS.claude.root)}/${SKILL_PREFIX}* (symlinks -> .agents/)`);
-  } else {
-    for (const key of selected) {
-      p.log.success(`${TARGETS[key].label} -> ${displayPath(TARGETS[key].root)}/${SKILL_PREFIX}*`);
-    }
-  }
-
-  const agentsResult = upsertAgentsBlock();
-  if (agentsResult === "updated" || agentsResult === "added") {
-    p.log.success(`Refreshed the imf-web-ui block in ${displayPath(agentsPath)}`);
-  }
-
-  p.outro(`Done — ${skills.length} skills installed${wantHooks ? " + agent hooks" : ""}.`);
-}
-
-await main();