@imfusion/web-ui 0.5.1-dev.25.gf0207a31 → 0.5.1-dev.3.g8e0a047a

package/dist/{tabs-CVp_SgBl.js → tabs-DqBFSqq6.js}

@@ -3786,4 +3786,4 @@ function Mo({ className: e, ...t }) {
 }
 Mo.displayName = "Tabs.Panel";
 //#endregion
-export { Hn as $, ee as $n, Vt as $t, Kr as A, Je as An, xn as At, Tr as B, Ee as Bn, pn as Bt, ha as C, ct as Cn, Tn as Ct, gi as D, rt as Dn, kn as Dt, hi as E, it as En, wn as Et, Fr as F, Pe as Fn, vn as Ft, mr as G, V as Gn, en as Gt, Sr as H, _e as Hn, fn as Ht, Nr as I, Ae as In, yn as It, fr as J, F as Jn, Jt, pr as K, B as Kn, $t as Kt, Mr as L, je as Ln, hn as Lt, zr as M, qe as Mn, Cn as Mt, Ir as N, Ue as Nn, bn as Nt, mi as O, Xe as On, Dn as Ot, Pr as P, Z as Pn, _n as Pt, Kn as Q, f as Qn, Kt as Qt, kr as R, X as Rn, mn as Rt, _a as S, ut as Sn, jn as St, ra as T, st as Tn, En as Tt, br as U, J as Un, sn as Ut, Cr as V, be as Vn, ln as Vt, hr as W, U as Wn, tn as Wt, Gn as X, O as Xn, qt as Xt, gr as Y, N as Yn, Zt as Yt, Un as Z, T as Zn, Gt as Zt, Ta as _, _t as _n, In as _t, Do as a, jt as an, w as ar, Yn as at, fa as b, dt as bn, Fn as bt, to as c, Pt as cn, D as cr, ur as ct, Xa as d, Ot as dn, g as dr, Bn as dt, zt as en, u as er, Jn as et, Ua as f, gt as fn, v as fr, zn as ft, ka as g, vt as gn, Ln as gt, Oa as h, yt as hn, Rn as ht, jo as i, Dt as in, d as ir, er as it, Wr as j, Ke as jn, Sn as jt, ai as k, $e as kn, An as kt, $a as l, xt as ln, p as lr, qn as lt, Na as m, Ft as mn, E as mr, Vn as mt, Oo as n, At as nn, M as nr, $n as nt, ko as o, Et as on, m as or, sr as ot, Ra as p, bt as pn, y as pr, dr as pt, vr as q, L as qn, Qt as qt, Mo as r, St as rn, A as rr, Xn as rt, bo as s, Tt as sn, h as sr, cr as st, Ao as t, Lt as tn, k as tr, Qn as tt, Za as u, Ct as un, _ as ur, Zn as ut, ma as v, It as vn, Nn as vt, pa as w, ot as wn, On as wt, da as x, ft as xn, Mn as xt, ga as y, pt as yn, Pn as yt, Or as z, ke as zn, dn as zt };
+export { Hn as $, M as $n, Vt as $t, Kr as A, Ue as An, xn as At, Tr as B, J as Bn, pn as Bt, ha as C, st as Cn, Tn as Ct, gi as D, Je as Dn, kn as Dt, hi as E, $e as En, wn as Et, Fr as F, X as Fn, vn as Ft, mr as G, F as Gn, en as Gt, Sr as H, V as Hn, fn as Ht, Nr as I, ke as In, yn as It, fr as J, T as Jn, Jt, pr as K, N as Kn, $t as Kt, Mr as L, Ee as Ln, hn as Lt, zr as M, Pe as Mn, Cn as Mt, Ir as N, Ae as Nn, bn as Nt, mi as O, Ke as On, Dn as Ot, Pr as P, je as Pn, _n as Pt, Kn as Q, k as Qn, Kt as Qt, kr as R, be as Rn, mn as Rt, _a as S, ct as Sn, jn as St, ra as T, rt as Tn, En as Tt, br as U, B as Un, sn as Ut, Cr as V, U as Vn, ln as Vt, hr as W, L as Wn, tn as Wt, Gn as X, ee as Xn, qt as Xt, gr as Y, f as Yn, Zt as Yt, Un as Z, u as Zn, Gt as Zt, Ta as _, _t as _n, In as _t, Do as a, jt as an, D as ar, Yn as at, fa as b, ft as bn, Fn as bt, to as c, Pt as cn, g as cr, ur as ct, Xa as d, Ot as dn, E as dr, Bn as dt, zt as en, A as er, Jn as et, Ua as f, gt as fn, zn as ft, ka as g, vt as gn, Ln as gt, Oa as h, yt as hn, Rn as ht, jo as i, Dt as in, h as ir, er as it, Wr as j, Z as jn, Sn as jt, ai as k, qe as kn, An as kt, $a as l, xt as ln, v as lr, qn as lt, Na as m, Ft as mn, Vn as mt, Oo as n, At as nn, w as nr, $n as nt, ko as o, Et as on, p as or, sr as ot, Ra as p, bt as pn, dr as pt, vr as q, O as qn, Qt as qt, Mo as r, St as rn, m as rr, Xn as rt, bo as s, Tt as sn, _ as sr, cr as st, Ao as t, Lt as tn, d as tr, Qn as tt, Za as u, Ct as un, y as ur, Zn as ut, ma as v, It as vn, Nn as vt, pa as w, it as wn, On as wt, da as x, ut as xn, Mn as xt, ga as y, pt as yn, Pn as yt, Or as z, _e as zn, dn as zt };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imfusion/web-ui",
-  "version": "0.5.1-dev.25.gf0207a31",
+  "version": "0.5.1-dev.3.g8e0a047a",
   "description": "The official Web UI component library for ImFusion web apps",
   "author": "ImFusion GmbH",
   "license": "UNLICENSED",
@@ -9,17 +9,10 @@
     "access": "restricted"
   },
   "type": "module",
-  "engines": {
-    "node": ">=24"
-  },
-  "imports": {
-    "#/*": "./src/*",
-    "#/storybook/*": "./.storybook/*"
-  },
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "bin": {
-    "web-ui-install": "bin/install.js"
+    "web-ui-install-skills": "./bin/install-skill.js"
   },
   "exports": {
     ".": {
@@ -30,10 +23,6 @@
       "types": "./dist/integrations/*/index.d.ts",
       "import": "./dist/integrations/*.js"
     },
-    "./build/*": {
-      "types": "./dist/build/*/index.d.ts",
-      "import": "./dist/build/*.js"
-    },
     "./styles.css": "./dist/style.css",
     "./docgen.json": "./src/docgen/doc.gen.json",
     "./llms.txt": "./src/llms/llms.gen.txt",
@@ -47,36 +36,37 @@
     "bin"
   ],
   "scripts": {
+    "codegen:docgen": "tsx src/docgen/gen-docgen.ts",
+    "codegen:llms": "tsx src/llms/gen-llms.ts",
+    "codegen:watch": "tsx watch src/codegen/run.ts",
+    "codegen:storybook": "tsx src/codegen/run.ts --storybook",
+    "codegen": "tsx src/codegen/run.ts",
+    "build": "npm run codegen && rm -rf dist && vite build && npm run codegen:docgen && npm run codegen:llms",
     "dev": "tsx scripts/dev.ts",
     "dev:host": "tsx scripts/dev.ts --host",
     "dev:lib": "concurrently -n codegen,lib -c yellow,blue \"npm run codegen:watch\" \"vite build --watch\"",
-    "build": "npm run codegen && rm -rf dist && vite build && npm run codegen:docgen && npm run codegen:llms",
-    "build:storybook": "npm run codegen:storybook && storybook build",
-    "storybook": "npm run codegen:storybook && storybook dev -p 6006 --no-open",
-    "storybook:free-ports": "tsx scripts/free-storybook-ports.ts",
-    "codegen": "tsx src/codegen/run.ts",
-    "codegen:watch": "tsx watch src/codegen/run.ts",
-    "codegen:storybook": "tsx src/codegen/run.ts --storybook",
-    "codegen:docgen": "tsx src/docgen/gen-docgen.ts",
-    "codegen:llms": "tsx src/llms/gen-llms.ts",
-    "verify:format": "prettier --check .",
-    "verify:lint": "eslint . --cache --max-warnings=0",
-    "verify:typecheck": "npm run codegen && tsc -p tsconfig.lib.json --noEmit && tsc -p .storybook/tsconfig.json --noEmit",
-    "verify:tests": "vitest run",
-    "verify:deps": "tsx scripts/check-pinned-dependencies.ts",
-    "verify:changelog": "tsx scripts/verify/changelog.ts",
-    "verify:staged": "tsx scripts/verify/staged.ts",
-    "verify:full": "tsx scripts/verify/full.ts && npm run verify:tests",
+    "typecheck": "npm run codegen && tsc -p tsconfig.lib.json --noEmit && tsc -p .storybook/tsconfig.json --noEmit",
     "format": "prettier --write .",
-    "lint": "eslint . --cache --fix",
+    "format:check": "prettier --check .",
+    "lint": "eslint . --cache --max-warnings=0",
+    "lint:fix": "eslint . --cache --fix",
     "lint:inspect": "npx @eslint/config-inspector@latest",
-    "test:unit": "vitest run --project unit",
-    "test:stories": "vitest run --project storybook",
-    "test:watch": "vitest",
     "skills:eval": "node src/llms/evals/run.mjs",
     "skills:eval:dev": "WEB_UI_SKILL_EVAL_ROOT=/private/tmp/web-ui-dev-skill-evals WEB_UI_SKILL_EVAL_RESULTS_DIR=.agents/evals/results WEB_UI_SKILL_EVAL_REPORT_PATH=.agents/evals/REPORT.md WEB_UI_SKILL_EVAL_SKILL_FAMILY=web-ui-dev WEB_UI_SKILL_EVAL_WORKSPACE_LABEL='development repository' node src/llms/evals/run.mjs --scenarios-dir .agents/evals/scenarios --setup .agents/evals/setup-env.sh",
     "skills:eval:compare": "node src/llms/evals/compare.mjs",
     "skills:eval:report": "node src/llms/evals/report.mjs",
+    "storybook": "npm run codegen:storybook && storybook dev -p 6006 --no-open",
+    "storybook:free-ports": "tsx scripts/free-storybook-ports.ts",
+    "build:storybook": "npm run codegen:storybook && storybook build",
+    "test": "vitest run",
+    "test:unit": "vitest run --project unit",
+    "test:stories": "vitest run --project storybook",
+    "test:watch": "vitest",
+    "verify:preflight": "tsx scripts/verify/full.ts",
+    "verify:full": "npm run verify:preflight && npm run test",
+    "worktree:create": "tsx scripts/worktrees.ts create",
+    "worktree:close": "tsx scripts/worktrees.ts close",
+    "worktree:discard": "tsx scripts/worktrees.ts discard",
     "knip": "knip",
     "git:config": "git config core.hooksPath .githooks && git config pull.rebase true && git config merge.ff only"
   },
@@ -134,7 +124,6 @@
     "globals": "15.15.0",
     "jiti": "2.7.0",
     "knip": "6.14.2",
-    "lightningcss": "1.32.0",
     "nano-staged": "1.0.2",
     "playwright": "1.60.0",
     "prettier": "3.8.3",

package/src/docgen/doc.gen.json

@@ -1194,333 +1194,6 @@
       }
     ]
   },
-  "field": {
-    "root": {
-      "name": "Field.Root",
-      "description": "Field.Root — groups a label, control, validation state, and supporting copy.",
-      "props": [
-        {
-          "name": "actionsRef",
-          "required": false,
-          "type": "RefObject<FieldRootActions | null>",
-          "defaultValue": null,
-          "description": ""
-        },
-        {
-          "name": "className",
-          "required": false,
-          "type": "string | ((state: FieldRootState) => string)",
-          "defaultValue": null,
-          "description": ""
-        },
-        {
-          "name": "dirty",
-          "required": false,
-          "type": "boolean",
-          "defaultValue": null,
-          "description": ""
-        },
-        {
-          "name": "disabled",
-          "required": false,
-          "type": "boolean",
-          "defaultValue": "false",
-          "description": ""
-        },
-        {
-          "name": "invalid",
-          "required": false,
-          "type": "boolean",
-          "defaultValue": null,
-          "description": ""
-        },
-        {
-          "name": "name",
-          "required": false,
-          "type": "string",
-          "defaultValue": null,
-          "description": ""
-        },
-        {
-          "name": "render",
-          "required": false,
-          "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, FieldRootState>",
-          "defaultValue": null,
-          "description": ""
-        },
-        {
-          "name": "style",
-          "required": false,
-          "type": "| CSSProperties\n| ((state: FieldRootState) => CSSProperties)",
-          "defaultValue": null,
-          "description": ""
-        },
-        {
-          "name": "touched",
-          "required": false,
-          "type": "boolean",
-          "defaultValue": null,
-          "description": ""
-        },
-        {
-          "name": "validate",
-          "required": false,
-          "type": "(\n  value: unknown,\n  formValues: Record<string, any>\n) =>\n  | string\n  | string[]\n  | Promise<string | string[] | null>\n  | null",
-          "defaultValue": null,
-          "description": ""
-        },
-        {
-          "name": "validationDebounceTime",
-          "required": false,
-          "type": "number",
-          "defaultValue": "0",
-          "description": ""
-        },
-        {
-          "name": "validationMode",
-          "required": false,
-          "type": "FormValidationMode",
-          "defaultValue": "onSubmit",
-          "description": ""
-        }
-      ]
-    },
-    "subComponents": [
-      {
-        "name": "Field.Control",
-        "description": "Field.Control — a native input control with Field labeling and validation.",
-        "props": [
-          {
-            "name": "className",
-            "required": false,
-            "type": "string | ((state: FieldControlState) => string)",
-            "defaultValue": null,
-            "description": ""
-          },
-          {
-            "name": "defaultValue",
-            "required": false,
-            "type": "string | number | readonly string[]",
-            "defaultValue": null,
-            "description": ""
-          },
-          {
-            "name": "onValueChange",
-            "required": false,
-            "type": "(\n  value: string,\n  eventDetails: {\n    reason: \"none\";\n    event: Event;\n    cancel: () => void;\n    allowPropagation: () => void;\n    isCanceled: boolean;\n    isPropagationAllowed: boolean;\n    trigger: Element;\n  }\n) => void",
-            "defaultValue": null,
-            "description": ""
-          },
-          {
-            "name": "render",
-            "required": false,
-            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, FieldControlState>",
-            "defaultValue": null,
-            "description": ""
-          },
-          {
-            "name": "style",
-            "required": false,
-            "type": "| CSSProperties\n| ((state: FieldControlState) => CSSProperties)",
-            "defaultValue": null,
-            "description": ""
-          }
-        ]
-      },
-      {
-        "name": "Field.Description",
-        "description": "Field.Description — supporting information for a field.",
-        "props": [
-          {
-            "name": "className",
-            "required": false,
-            "type": "| string\n| ((state: FieldDescriptionState) => string)",
-            "defaultValue": null,
-            "description": ""
-          },
-          {
-            "name": "render",
-            "required": false,
-            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, FieldDescriptionState>",
-            "defaultValue": null,
-            "description": ""
-          },
-          {
-            "name": "style",
-            "required": false,
-            "type": "| CSSProperties\n| ((state: FieldDescriptionState) => CSSProperties)",
-            "defaultValue": null,
-            "description": ""
-          }
-        ]
-      },
-      {
-        "name": "Field.Error",
-        "description": "Field.Error — an inline validation message shown when its match condition fails.",
-        "props": [
-          {
-            "name": "className",
-            "required": false,
-            "type": "string | ((state: FieldErrorState) => string)",
-            "defaultValue": null,
-            "description": ""
-          },
-          {
-            "name": "match",
-            "required": false,
-            "type": "boolean | keyof ValidityState",
-            "defaultValue": null,
-            "description": ""
-          },
-          {
-            "name": "render",
-            "required": false,
-            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, FieldErrorState>",
-            "defaultValue": null,
-            "description": ""
-          },
-          {
-            "name": "style",
-            "required": false,
-            "type": "| CSSProperties\n| ((state: FieldErrorState) => CSSProperties)",
-            "defaultValue": null,
-            "description": ""
-          }
-        ]
-      },
-      {
-        "name": "Field.Item",
-        "description": "Field.Item — groups one checkable option with its label and description.",
-        "props": [
-          {
-            "name": "className",
-            "required": false,
-            "type": "string | ((state: FieldItemState) => string)",
-            "defaultValue": null,
-            "description": ""
-          },
-          {
-            "name": "disabled",
-            "required": false,
-            "type": "boolean",
-            "defaultValue": "false",
-            "description": ""
-          },
-          {
-            "name": "render",
-            "required": false,
-            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, FieldItemState>",
-            "defaultValue": null,
-            "description": ""
-          },
-          {
-            "name": "style",
-            "required": false,
-            "type": "| CSSProperties\n| ((state: FieldItemState) => CSSProperties)",
-            "defaultValue": null,
-            "description": ""
-          }
-        ]
-      },
-      {
-        "name": "Field.Label",
-        "description": "Field.Label — an accessible label automatically associated with the control.",
-        "props": [
-          {
-            "name": "className",
-            "required": false,
-            "type": "string | ((state: FieldLabelState) => string)",
-            "defaultValue": null,
-            "description": ""
-          },
-          {
-            "name": "nativeLabel",
-            "required": false,
-            "type": "boolean",
-            "defaultValue": "true",
-            "description": ""
-          },
-          {
-            "name": "render",
-            "required": false,
-            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, FieldLabelState>",
-            "defaultValue": null,
-            "description": ""
-          },
-          {
-            "name": "style",
-            "required": false,
-            "type": "| CSSProperties\n| ((state: FieldLabelState) => CSSProperties)",
-            "defaultValue": null,
-            "description": ""
-          }
-        ]
-      },
-      {
-        "name": "Field.Validity",
-        "description": "Field.Validity — renderless access to the field validity data for custom messages.\nIts function child owns the rendered element and therefore its identity and styling.",
-        "props": []
-      }
-    ]
-  },
-  "fieldset": {
-    "root": {
-      "name": "Fieldset.Root",
-      "description": "Fieldset.Root — semantic grouping for related form controls and a shared legend.",
-      "props": [
-        {
-          "name": "className",
-          "required": false,
-          "type": "string | ((state: FieldsetRootState) => string)",
-          "defaultValue": null,
-          "description": ""
-        },
-        {
-          "name": "render",
-          "required": false,
-          "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, FieldsetRootState>",
-          "defaultValue": null,
-          "description": ""
-        },
-        {
-          "name": "style",
-          "required": false,
-          "type": "| CSSProperties\n| ((state: FieldsetRootState) => CSSProperties)",
-          "defaultValue": null,
-          "description": ""
-        }
-      ]
-    },
-    "subComponents": [
-      {
-        "name": "Fieldset.Legend",
-        "description": "Fieldset.Legend — the accessible label for its related controls.",
-        "props": [
-          {
-            "name": "className",
-            "required": false,
-            "type": "string | ((state: FieldsetLegendState) => string)",
-            "defaultValue": null,
-            "description": ""
-          },
-          {
-            "name": "render",
-            "required": false,
-            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, FieldsetLegendState>",
-            "defaultValue": null,
-            "description": ""
-          },
-          {
-            "name": "style",
-            "required": false,
-            "type": "| CSSProperties\n| ((state: FieldsetLegendState) => CSSProperties)",
-            "defaultValue": null,
-            "description": ""
-          }
-        ]
-      }
-    ]
-  },
   "input": {
     "root": {
       "name": "Input",

package/src/llms/llms.gen.txt

@@ -73,18 +73,6 @@ Off-canvas panel that slides in from a screen edge. Use for mobile navigation, s
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .drawer (jq: jq '.drawer' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 - further reading (usage/anatomy, not props): https://base-ui.com/react/components/drawer.md
 
-## Field
-- category: Inputs, status: stable
-Accessible field composition for a label, form control, supporting description, and inline validation message. Use it to associate a control such as Input, Checkbox, or Select with field state including valid, invalid, dirty, touched, filled, and focused.
-- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .field (jq: jq '.field' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
-- further reading (usage/anatomy, not props): https://base-ui.com/react/components/field.md
-
-## Fieldset
-- category: Inputs, status: stable
-Semantic grouping for related form controls with a shared legend. Also called a form group; use it to communicate a common topic and propagate disabled state without introducing a decorative container.
-- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .fieldset (jq: jq '.fieldset' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
-- further reading (usage/anatomy, not props): https://base-ui.com/react/components/fieldset.md
-
 ## ImageDisplayOptions
 - category: Inputs, status: experimental
 A panel or toolbar of controls bound to an image dataset's display options.

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

@@ -2,8 +2,8 @@
 name: imf-web-ui
 description:
   "Entry point for UI work in a project that depends on @imfusion/web-ui. Decides whether guidance is needed at all, then
-  routes to the right companion skill — component reference, UX guidance, or frontend conventions. Load when adding or
-  editing UI in a consumer repo."
+  routes to the right companion skill — component reference, UX guidance, or frontend patterns. Load when adding or editing
+  UI in a consumer repo."
 ---
 
 # imf-web-ui
@@ -24,17 +24,16 @@ Guidance skills exist to fill gaps, not to add ceremony to clear tasks.
 
 ## Routing
 
-| The task at hand                                                                                          | Open                              |
-| --------------------------------------------------------------------------------------------------------- | --------------------------------- |
-| Using a specific component; checking props, sub-components, or defaults                                   | `imf-web-ui-components`           |
-| First-time setup, adding a library dependency, or components rendering unstyled/broken                    | `imf-web-ui-library-setup`        |
-| Building/reshaping a screen or flow; choosing between components; layout, density, hierarchy, states      | `imf-web-ui-ux`                   |
-| Writing wrappers or custom UI; styling beyond defaults; adding files; TypeScript, naming, testing         | `imf-web-ui-frontend-conventions` |
-| Setting up or auditing an **ImFusion** repo's tooling: formatting, linting, hooks, scripts, structure     | `imf-web-ui-frontend-setup`       |
-| Setting up or refreshing agent tooling: vendored skills, lifecycle hooks, dependency-shipped Agent Skills | `imf-web-ui-agent-setup`          |
+| The task at hand                                                                                      | Open                                 |
+| ----------------------------------------------------------------------------------------------------- | ------------------------------------ |
+| Using a specific component; checking props, sub-components, or defaults                               | `imf-web-ui-components`              |
+| First-time setup, adding a library dependency, or components rendering unstyled/broken                | `imf-web-ui-setup`                   |
+| Building/reshaping a screen or flow; choosing between components; layout, density, hierarchy, states  | `imf-web-ui-ux`                      |
+| Writing wrappers or custom UI; styling beyond defaults; adding files; TypeScript, naming, testing     | `imf-web-ui-frontend-patterns`       |
+| Setting up or auditing an **ImFusion** repo's tooling: formatting, linting, hooks, scripts, structure | `imf-web-ui-imfusion-frontend-setup` |
 
-The two setup rows are narrow on purpose. They're for "what is this project missing?" — a question about the repo as a whole.
-Being asked to add one config file is just that edit; make it, and don't open a skill to do so.
+The last row is narrow on purpose. It's for "what is this project missing?" — a question about the repo as a whole. Being
+asked to add one config file is just that edit; make it, and don't open a skill to do so.
 
 Tasks routinely span two: building a screen usually means `imf-web-ui-ux` for the shape and `imf-web-ui-components` for the
 APIs. That's normal — open both, in that order.
@@ -44,9 +43,6 @@ APIs. That's normal — open both, in that order.
 TanStack is the recommended tooling library — routing, server state, forms, tables. When a task needs one of those and the
 project has no incumbent, propose it, and read the library's own docs (`npx @tanstack/cli`) rather than working from memory.
 
-Much of the suite also ships Agent Skills inside the package, reachable via TanStack Intent. Wiring that up is
-`imf-web-ui-agent-setup`.
-
 ## When to interview the human
 
 `imf-web-ui-ux` contains a short per-feature interview. Run it **only** when both hold:

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

@@ -3,7 +3,7 @@ name: imf-web-ui-components
 description:
   "Look up @imfusion/web-ui component APIs without reading their source: the two-hop lookup (identity index -> prop data),
   compound components, and integrations. Load when you need the props, sub-components, or defaults of a specific component —
-  not for choosing between components (imf-web-ui-ux) or first-time setup (imf-web-ui-library-setup)."
+  not for choosing between components (imf-web-ui-ux) or first-time setup (imf-web-ui-setup)."
 ---
 
 # imf-web-ui-components

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

@@ -0,0 +1,93 @@
+---
+name: imf-web-ui-frontend-patterns
+description:
+  "Raise the quality of frontend code written around @imfusion/web-ui — including quickly vibe-coded frontends. Library
+  boundary contract (tokens, CSS layers, type derivation), component roles, state placement, effects discipline, code
+  conventions (TypeScript, naming, file organisation, testing), and stack defaults. Load when writing wrapper components,
+  custom UI, styling beyond the defaults, adding new files to a consumer app, or choosing a routing, data-fetching, form, or
+  table library."
+---
+
+# imf-web-ui-frontend-patterns
+
+One guard, once: **if the host project already has a convention — a styling system, a state library, a folder shape — the
+project wins.** These defaults fill vacuums. They are not a license to refactor a consumer codebase toward this document.
+
+Everything else below is how to build.
+
+## Stay behind the library
+
+Never import Base UI (or any other upstream this library wraps) directly — no upstream stylesheets, no upstream components,
+even when upstream docs show it that way. Everything a component needs ships in `@imfusion/web-ui`. If the library is missing
+something upstream has, report the gap (see `imf-web-ui-components`); don't reach around it.
+
+## Style through the sanctioned seams
+
+All library styles live in the `imf-ui.components` CSS layer, so **any plain selector you write wins** — that's the whole
+override contract:
+
+- Target the stable hooks: `data-imf-ui-component` attributes and your own classes/wrappers.
+- Never target the library's internal class names — they are generated and change without notice.
+- Never `!important` — if you think you need it, you're targeting the wrong thing.
+
+## Build custom UI from tokens
+
+Anything you build that the library doesn't cover — a stat widget, a custom panel — uses `--imf-ui-*` variables for color,
+spacing, radius, and type instead of hardcoded values. That's what makes custom UI look native next to library components,
+and what keeps it correct when the theme changes. A hex code or a magic `px` next to a concept the tokens already name is a
+defect.
+
+## Derive types, don't import them
+
+Prop types come from the components themselves: `React.ComponentProps<typeof Button>`. The library deliberately exports no
+`Props` types — don't look for them, and don't re-declare prop shapes by hand.
+
+## Integrations own their peers
+
+Components under `@imfusion/web-ui/integrations/*` depend on optional peers (e.g. `@tanstack/highlight` for `CodeHighlight`).
+Add the peer explicitly to the consumer's `package.json` — never rely on hoisting.
+
+## React patterns
+
+The full treatment — component roles with an example, state placement, effects discipline, and the react.dev sources to
+consult while building — lives in [references/react-patterns.md](references/react-patterns.md). Read it before writing new
+screens or wrappers. The core in one breath:
+
+- **Three roles.** Dumb components own how things look, layout components own arrangement, smart containers own data and
+  logic. Styling never lives in containers.
+- **State lives where its truth lives.** URL → query cache → context → store → local state; walk the list, stop at the first
+  match.
+- **Effects are a last resort**, and always extracted into purpose-named hooks.
+- **Compose, don't configure.** If a component's prop list reads like a settings page, it wanted to be two or three
+  components.
+
+## Everything else about the code
+
+TypeScript, naming, where files go, and what's worth testing live in
+[references/code-conventions.md](references/code-conventions.md). Read it when you're adding files rather than editing
+existing ones — that's when these choices get made and then inherited by everything after.
+
+The split between the two references: `react-patterns.md` covers **writing React** — component roles, where state lives,
+effects discipline, composition. `code-conventions.md` covers **the code around it** — TypeScript, JS style, naming, file
+layout, testing. Starting a new feature usually wants both.
+
+## Stack defaults
+
+TanStack is the default for the tooling around web-ui, whether the app is greenfield or you're adding one screen to something
+that already exists. The ones you'll reach for most: **Router** (URL state, type-safe search params), **Query** (server
+state), **Form** (form state), and **Table** for data grids, which you pair with web-ui's styled `Table` parts
+(`Table.SortableHeaderCell` carries the sort glue). The suite goes wider than those four — check what exists before adding a
+non-TanStack dependency. This is the stack the state ladder assumes.
+
+`useState` is the right tool for local UI state, and most of it is local: whether a panel is open, which tab is active, a
+draft value being typed, a hover flag. Keep those in the component and don't reach for a library.
+
+The line is what the state is _for_, not how much of it there is. A library owns the layer once you find yourself rebuilding
+what it does: validation timing and cross-field rules (**Form**), caching and refetching (**Query**), URL as the source of
+truth (**Router**), sorting and pagination over rows (**Table**). web-ui ships none of that logic, and that absence is not an
+argument for writing it yourself. Adding the library mid-project is normal and cheap; unpicking a hand-rolled version of it
+later is not.
+
+For best practices and patterns within any of these libraries, go to the library's own guidance rather than working from
+memory: `npx @tanstack/cli` for docs. Where a project has wired up `@tanstack/intent`, use it to reach the Agent Skills its
+TanStack dependencies ship, and read those too.