@imfusion/web-ui 0.8.1-dev.3.g40eaad1c → 0.8.1-dev.36.g641eac85

package/src/docgen/doc.gen.json

@@ -499,6 +499,19 @@
             "description": "Width divided by height, or \"auto\" to use the image's intrinsic ratio."
           }
         ]
+      },
+      {
+        "name": "Card.Status",
+        "description": "Card.Status — a tinted slot that marks the card's status with the variant's glyph. Pass\nchildren to replace the glyph. Like `Card.Image`, place it first among the slots: a column\nbeside the body in a horizontal card, a band above it in a vertical one. Decorative\n(`aria-hidden`); the card's text carries the status.",
+        "props": [
+          {
+            "name": "variant",
+            "required": false,
+            "type": "| \"info\"\n| \"positive\"\n| \"warning\"\n| \"negative\"\n| null",
+            "defaultValue": "info",
+            "description": ""
+          }
+        ]
       }
     ]
   },
@@ -1963,7 +1976,7 @@
       },
       {
         "name": "Field.Error",
-        "description": "Field.Error — an inline validation message shown when its match condition fails.",
+        "description": "Field.Error — an inline validation message shown when its match condition fails.\nIt announces itself with `role=\"alert\"`; pass another `role` to quiet it.",
         "props": [
           {
             "name": "className",
@@ -5556,7 +5569,7 @@
   "slider": {
     "root": {
       "name": "Slider.Root",
-      "description": "Slider.Root — value selector along a continuous or stepped track.",
+      "description": "Slider.Root — value selector along a continuous or stepped track.\n\n`variant=\"position\"` draws a scrollbar-like trough and bar thumb for picking one position\nbetween `min` and `max`, such as a slice or frame; `onValueChange` reports the position.",
       "props": [
         {
           "name": "className",
@@ -5704,6 +5717,13 @@
           "type": "number | readonly number[]",
           "defaultValue": null,
           "description": "The value of the slider.\nFor ranged sliders, provide an array with two values."
+        },
+        {
+          "name": "variant",
+          "required": false,
+          "type": "\"default\" | \"position\" | null",
+          "defaultValue": "default",
+          "description": ""
         }
       ]
     },
@@ -7787,6 +7807,13 @@
             "type": "| \"main\"\n| \"support\"\n| \"minor\"\n| \"brand\"\n| \"primary\"\n| \"negative\"\n| \"positive\"\n| \"warning\"\n| \"info\"\n| \"oncolor\"\n| \"accent-1\"\n| \"accent-2\"\n| \"accent-3\"\n| null",
             "defaultValue": "support",
             "description": ""
+          },
+          {
+            "name": "weight",
+            "required": false,
+            "type": "\"strong\" | \"regular\" | \"medium\"",
+            "defaultValue": null,
+            "description": "Font weight. Omit to keep the member's default; `medium` firms up short body text on cards."
           }
         ]
       },
@@ -7814,6 +7841,40 @@
             "type": "| \"main\"\n| \"support\"\n| \"minor\"\n| \"brand\"\n| \"primary\"\n| \"negative\"\n| \"positive\"\n| \"warning\"\n| \"info\"\n| \"oncolor\"\n| \"accent-1\"\n| \"accent-2\"\n| \"accent-3\"\n| null",
             "defaultValue": "main",
             "description": ""
+          },
+          {
+            "name": "weight",
+            "required": false,
+            "type": "\"strong\" | \"regular\" | \"medium\"",
+            "defaultValue": null,
+            "description": "Font weight. Omit to keep the member's default; `medium` firms up short body text on cards."
+          }
+        ]
+      },
+      {
+        "name": "Typo.Eyebrow",
+        "description": "Typo.Eyebrow — short uppercase label above a heading. Also called a kicker or overline.",
+        "props": [
+          {
+            "name": "ref",
+            "required": false,
+            "type": "Ref<HTMLHeadingElement>",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, {}>",
+            "defaultValue": null,
+            "description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+          },
+          {
+            "name": "variant",
+            "required": false,
+            "type": "| \"main\"\n| \"support\"\n| \"minor\"\n| \"brand\"\n| \"primary\"\n| \"negative\"\n| \"positive\"\n| \"warning\"\n| \"info\"\n| \"oncolor\"\n| \"accent-1\"\n| \"accent-2\"\n| \"accent-3\"\n| null",
+            "defaultValue": "support",
+            "description": ""
           }
         ]
       },
@@ -7997,6 +8058,13 @@
             "type": "| \"main\"\n| \"support\"\n| \"minor\"\n| \"brand\"\n| \"primary\"\n| \"negative\"\n| \"positive\"\n| \"warning\"\n| \"info\"\n| \"oncolor\"\n| \"accent-1\"\n| \"accent-2\"\n| \"accent-3\"\n| null",
             "defaultValue": "oncolor",
             "description": ""
+          },
+          {
+            "name": "weight",
+            "required": false,
+            "type": "\"strong\" | \"regular\" | \"medium\"",
+            "defaultValue": null,
+            "description": "Font weight. Omit to keep the member's default; `medium` firms up short body text on cards."
           }
         ]
       },
@@ -8058,6 +8126,13 @@
             "type": "| \"main\"\n| \"support\"\n| \"minor\"\n| \"brand\"\n| \"primary\"\n| \"negative\"\n| \"positive\"\n| \"warning\"\n| \"info\"\n| \"oncolor\"\n| \"accent-1\"\n| \"accent-2\"\n| \"accent-3\"\n| null",
             "defaultValue": "main",
             "description": ""
+          },
+          {
+            "name": "weight",
+            "required": false,
+            "type": "\"strong\" | \"regular\" | \"medium\"",
+            "defaultValue": null,
+            "description": "Font weight. Omit to keep the member's default; `medium` firms up short body text on cards."
           }
         ]
       },
@@ -8092,6 +8167,13 @@
             "type": "| \"main\"\n| \"support\"\n| \"minor\"\n| \"brand\"\n| \"primary\"\n| \"negative\"\n| \"positive\"\n| \"warning\"\n| \"info\"\n| \"oncolor\"\n| \"accent-1\"\n| \"accent-2\"\n| \"accent-3\"\n| null",
             "defaultValue": "primary",
             "description": ""
+          },
+          {
+            "name": "weight",
+            "required": false,
+            "type": "\"strong\" | \"regular\" | \"medium\"",
+            "defaultValue": null,
+            "description": "Font weight. Omit to keep the member's default; `medium` firms up short body text on cards."
           }
         ]
       },
@@ -8119,6 +8201,13 @@
             "type": "| \"main\"\n| \"support\"\n| \"minor\"\n| \"brand\"\n| \"primary\"\n| \"negative\"\n| \"positive\"\n| \"warning\"\n| \"info\"\n| \"oncolor\"\n| \"accent-1\"\n| \"accent-2\"\n| \"accent-3\"\n| null",
             "defaultValue": "main",
             "description": ""
+          },
+          {
+            "name": "weight",
+            "required": false,
+            "type": "\"strong\" | \"regular\" | \"medium\"",
+            "defaultValue": null,
+            "description": "Font weight. Omit to keep the member's default; `medium` firms up short body text on cards."
           }
         ]
       },
@@ -8146,6 +8235,13 @@
             "type": "| \"main\"\n| \"support\"\n| \"minor\"\n| \"brand\"\n| \"primary\"\n| \"negative\"\n| \"positive\"\n| \"warning\"\n| \"info\"\n| \"oncolor\"\n| \"accent-1\"\n| \"accent-2\"\n| \"accent-3\"\n| null",
             "defaultValue": "main",
             "description": ""
+          },
+          {
+            "name": "weight",
+            "required": false,
+            "type": "\"strong\" | \"regular\" | \"medium\"",
+            "defaultValue": null,
+            "description": "Font weight. Omit to keep the member's default; `medium` firms up short body text on cards."
           }
         ]
       },
@@ -8173,6 +8269,13 @@
             "type": "| \"main\"\n| \"support\"\n| \"minor\"\n| \"brand\"\n| \"primary\"\n| \"negative\"\n| \"positive\"\n| \"warning\"\n| \"info\"\n| \"oncolor\"\n| \"accent-1\"\n| \"accent-2\"\n| \"accent-3\"\n| null",
             "defaultValue": "minor",
             "description": ""
+          },
+          {
+            "name": "weight",
+            "required": false,
+            "type": "\"strong\" | \"regular\" | \"medium\"",
+            "defaultValue": null,
+            "description": "Font weight. Omit to keep the member's default; `medium` firms up short body text on cards."
           }
         ]
       },
@@ -8200,6 +8303,13 @@
             "type": "| \"main\"\n| \"support\"\n| \"minor\"\n| \"brand\"\n| \"primary\"\n| \"negative\"\n| \"positive\"\n| \"warning\"\n| \"info\"\n| \"oncolor\"\n| \"accent-1\"\n| \"accent-2\"\n| \"accent-3\"\n| null",
             "defaultValue": "main",
             "description": ""
+          },
+          {
+            "name": "weight",
+            "required": false,
+            "type": "\"strong\" | \"regular\" | \"medium\"",
+            "defaultValue": null,
+            "description": "Font weight. Omit to keep the member's default; `medium` firms up short body text on cards."
           }
         ]
       }
@@ -8309,6 +8419,43 @@
       }
     ]
   },
+  "frame-selection": {
+    "root": {
+      "name": "FrameSelection",
+      "description": "FrameSelection - a position slider bound to the focused frame of the multi-frame image sets in `data`.\nEvery matching image set follows the slider, and a `{focus} | {count}` readout sits beside it.\nRenders nothing when `data` holds no multi-frame image set.\n\nMust render inside an `ImFusionProvider`.",
+      "props": [
+        {
+          "name": "data",
+          "required": true,
+          "type": "HandleArray<Data>",
+          "defaultValue": null,
+          "description": "Datasets to scan, for example from `useVisibleData()`. Non-image data, single-frame image sets, and image sets whose\nframe count differs from the first multi-frame set are ignored."
+        },
+        {
+          "name": "disabled",
+          "required": false,
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": "Whether the slider ignores user interaction."
+        },
+        {
+          "name": "label",
+          "required": false,
+          "type": "string",
+          "defaultValue": "Frame",
+          "description": "Accessible name of the slider thumb."
+        },
+        {
+          "name": "orientation",
+          "required": false,
+          "type": "\"horizontal\" | \"vertical\"",
+          "defaultValue": "horizontal",
+          "description": "Direction of the slider; the vertical layout stacks the readout under it."
+        }
+      ]
+    },
+    "subComponents": []
+  },
   "image-display-options": {
     "root": {
       "name": "ImageDisplayOptions",

package/src/llms/llms.gen.txt

@@ -38,7 +38,7 @@ Persistent, in-place status message for information, success, warnings, and erro
 
 ## Card
 - category: Layout, status: stable
-Surface container for related content on a tonal background. Also called a panel or tile; compose it from optional image, header, content, and footer parts.
+Surface container for related content on a tonal background. Also called a panel or tile; compose it from optional image, status, header, content, and footer parts.
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .card (jq: jq '.card' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 
 ## Checkbox
@@ -96,6 +96,12 @@ Semantic group for related form controls with a shared legend. Also called a for
 - 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
 
+## FrameSelection
+- category: Inputs, status: experimental
+Frame or slice picker bound to the focused frame of ImFusion image sets, with a focus and count readout. For a position picker not tied to the SDK, use Slider with variant="position".
+- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .frame-selection (jq: jq '.frame-selection' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
+- further reading (usage/anatomy, not props): https://docs.imfusion.com/
+
 ## Icon
 - category: Display, status: stable
 Renders a Web UI icon with an optional semantic foreground color. The default inherits the surrounding currentColor.
@@ -160,7 +166,7 @@ Line that divides content horizontally or vertically. Also called a divider or r
 
 ## Slider
 - category: Inputs, status: stable
-Numeric input for choosing one value or a range by dragging a thumb. Also called a range input; use it when relative magnitude matters.
+Numeric input for choosing one value or a range by dragging a thumb. Also called a range input; use it when relative magnitude matters. The position variant is a scrubber for picking one slice or frame.
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .slider (jq: jq '.slider' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 - further reading (usage/anatomy, not props): https://base-ui.com/react/components/slider.md
 

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

@@ -11,6 +11,8 @@ description:
 Start here for UI work and library questions in a project that uses `@imfusion/web-ui`. This skill is a map, not a second
 copy of every convention.
 
+Invoke `imf-web-ui-user-profile` first and explain at its levels throughout.
+
 ## 1. Decide whether guidance is needed
 
 Skip a companion when the task is explicit and small, an existing local pattern already solves it in the file being changed,

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

@@ -1,11 +1,11 @@
 ---
 name: imf-web-ui-audit
 description:
-  "Audit an existing ImFusion frontend against the @imfusion/web-ui conventions without changing files. Use this for a
-  project health check, a pre-setup review, or one named topic. Report broken and missing pieces, working deviations,
+  "Audit an existing ImFusion frontend against the @imfusion/web-ui conventions without changing project files. Use this for
+  a project health check, a pre-setup review, or one named topic. Report broken and missing pieces, working deviations,
   evidence, and an ordered plan."
 argument-hint: "[full|<topic>]"
-allowed-tools: Read Glob Grep
+allowed-tools: Read Glob Grep Skill
 ---
 
 # Audit a consumer project
@@ -21,6 +21,8 @@ it low, and do not let it crowd the sections a consumer has to act on.
 
 ## Workflow
 
+Invoke `imf-web-ui-user-profile` first and explain at its levels throughout.
+
 1. Resolve the argument. Bare means `full`; an unknown topic is an error, not a reason to widen the scope.
 2. Enter plan mode unless this audit is being called as verification by another skill or the host has no plan mode.
 3. Read the report template and existing reviewer notes, then dispatch one investigator per in-scope topic. Tell each

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

@@ -4,13 +4,15 @@ description:
   "Look up @imfusion/web-ui component APIs, compound parts, defaults, and icon glyphs without reading source. Use this
   whenever a consumer task names a Web UI component or icon and you need to choose a prop, part, default, or glyph. Do not
   use it to choose between components or bootstrap a project."
-allowed-tools: Bash
+allowed-tools: Bash Skill
 ---
 
 # Look up components
 
 Use the generated package indexes. They are smaller and more reliable than reading the library source.
 
+Invoke `imf-web-ui-user-profile` first and explain at its levels throughout.
+
 ## Component lookup
 
 1. Read the identity index first, even when you already know the component's name: it gives the docgen key and the status.

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

@@ -50,6 +50,7 @@ sections one to one — change a topic's sections and this file follows in the s
 
 - [ ] Types
 - [ ] Immutability & expressions
+- [ ] Functions
 - [ ] Naming
 
 ## Styling — `styling`
@@ -102,8 +103,9 @@ sections one to one — change a topic's sections and this file follows in the s
 - [ ] When a library owns a layer
 - [ ] Devtools
 - [ ] Docs over memory
-- [ ] Prettier
-- [ ] ESLint and TypeScript
+- [ ] Vite+
+- [ ] Oxfmt
+- [ ] Oxlint and TypeScript
 - [ ] Pre-commit checks
 - [ ] Vite plugins
 

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

@@ -19,7 +19,8 @@ Use one server-backed current-user query as the identity source:
 
 - Put it in `api/auth/queries.ts` and define its key and schema with the [data.md](data.md) pattern.
 - Expose query options as `context.api.auth.getUser()`.
-- Call `ensureQueryData` in a loader or a query hook in a component.
+- Call `queryClient.query({ ...options, staleTime: "static" })` in a loader (see [data.md](data.md)) or a query hook in a
+  component.
 - Keep credentials and access tokens out of React state.
 - Do not infer authentication from local storage, decoded tokens, route flags, or permission-gated UI.
 

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

@@ -85,9 +85,11 @@ export function getDetails(options?: QueryOptions<User>) {
 }
 ```
 
-Callers choose `ensureQueryData`, `useSuspenseQuery`, or another Query API. Mutation factories likewise return
-`mutationOptions`, own their mutation key and parsing, and are passed to `useMutation`; do not inline those options at the
-call site.
+Callers choose `queryClient.query`, `useSuspenseQuery`, or another Query API. A router loader reads the cache with
+`queryClient.query({ ...options, staleTime: "static" })`, not the deprecated `ensureQueryData` or `fetchQuery`. Keep
+`"static"`: without it the factory's `staleTime` applies (default 0), so every loader run waits on the network and the page's
+`useQuery` refetches on mount. Mutation factories likewise return `mutationOptions`, own their mutation key and parsing, and
+are passed to `useMutation`; do not inline those options at the call site.
 
 ## Router context access
 

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

@@ -18,11 +18,10 @@ The hooks are tracked in `.githooks/`. Check both the Git setting and the direct
 
 There are two scopes:
 
-- **commit**: `verify:staged`, run by pre-commit. It checks whole-repository lint and formatting, then runs project checks
-  for staged inputs.
+- **commit**: the pre-commit hook, which runs `vp staged` as `tooling.md` describes under Pre-commit checks.
 - **full**: `verify:full`, the build and complete verification used by CI.
 
-The scripts under `scripts/verify/` own the step lists. Hooks and npm scripts only launch them.
+The `staged` block and the scripts under `scripts/verify/` own the step lists. Hooks and npm scripts only launch them.
 
 ## Staleness at commit time
 

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

@@ -17,12 +17,11 @@ Use the same names for the same checks where the project supports them:
 | ------------------ | --------------------------------------- |
 | `dev`              | Start local development.                |
 | `build`            | Create a production build.              |
-| `verify:format`    | Check Prettier.                         |
-| `verify:lint`      | Check ESLint.                           |
+| `verify:format`    | Run `vp fmt --check`.                   |
+| `verify:lint`      | Run `vp lint`.                          |
 | `verify:typecheck` | Run TypeScript without emitting.        |
-| `verify:tests`     | Run tests once.                         |
+| `verify:tests`     | Run `vp test run`.                      |
 | `verify:knip`      | Check dead code and unused exports.     |
-| `verify:staged`    | Run the pre-commit scope.               |
 | `verify:full`      | Run the CI scope.                       |
 | `format`           | Rewrite formatting.                     |
 | `lint`             | Rewrite fixable lint issues.            |

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

@@ -7,6 +7,8 @@ Use native CSS and Web UI's public seams. The library's CSS Modules and token na
 - Use CSS Modules with native nesting. Do not add Sass, CSS-in-JS, or a utility-class framework for ordinary component
   styles.
 - Nest states, pseudo-elements, and child selectors under the root.
+- Write declarations before nested rules; browsers before Chrome 130, Firefox 132, and Safari 18 move later ones above them.
+- Do not nest under a selector list whose selectors differ in specificity. The nested rule takes the highest one.
 - Lift repeated values into custom properties, especially when a state or variant changes several descendants.
 - Keep structurally different rules explicit; not every repeated value needs an abstraction.
 
@@ -85,8 +87,8 @@ Foreground roles are for text, icons, borders, and focus rings. Background roles
 
 ## Browser floor
 
-The library targets Safari 16.2 or newer. `color-mix(in oklch, …)` is available at that floor. Relative color syntax needs a
-guarded fallback for older Safari:
+The library targets Safari 17.5, Chrome 123, and Firefox 120 or newer, the first versions with native `light-dark()`.
+`color-mix(in oklch, …)` is available at that floor. Relative color syntax needs a guarded fallback for older Safari:
 
 ```css
 .subtle {

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

@@ -6,18 +6,18 @@ Use the tool's current documentation rather than memory.
 
 | Need                  | Default                                      |
 | --------------------- | -------------------------------------------- |
-| Build                 | Vite                                         |
+| Toolchain             | Vite+ (`vite-plus`), driven through `vp`     |
 | Routing and URL state | TanStack Router                              |
 | Server state          | TanStack Query                               |
 | Forms                 | TanStack Form                                |
 | Data grids            | TanStack Table plus Web UI `Table` parts     |
 | App-wide client state | TanStack Store, after URL/server/local state |
 | Schema validation     | Zod at the boundary                          |
-| Tests                 | Vitest                                       |
-| Format                | Prettier                                     |
-| Lint                  | ESLint flat config                           |
+| Tests                 | Vitest through `vp test`                     |
+| Format                | Oxfmt through `vp fmt`                       |
+| Lint                  | Oxlint through `vp lint`, type-aware         |
 | Types                 | `tsc --noEmit`                               |
-| Pre-commit checks     | Whole-repository lint and format checks      |
+| Pre-commit checks     | `vp staged` against the staged state         |
 | Dead code             | Knip via `verify:knip`                       |
 
 ## When a library owns a layer
@@ -36,47 +36,85 @@ devtools package whenever a new TanStack dependency is added.
 Use `npx @tanstack/cli` for TanStack documentation. If TanStack Intent is configured, use it for the Agent Skills the
 TanStack package provides.
 
-## Prettier
+## Vite+
 
-Use a config file. The repo's values are:
+Vite+ runs development, build, tests, format, lint, and staged checks through one `vp` binary configured in `vite.config.ts`.
+Pin `vite-plus` exactly, alias `vite` to `npm:@voidzero-dev/vite-plus-core@<vite-plus version>`, pin `vitest` to the version
+`vp toolchain vitest` reports, and repeat both pins under `overrides`. Import `defineConfig` from `vite-plus` and Vitest APIs
+from `vite-plus/test`. It needs Node `^22.22.1 || ^24.11 || >=26` and Git 2.32 or later.
+
+`vp <command>` is a built-in; `vp run <script>` runs a package script.
+
+Move an existing Vite, Vitest, ESLint, or Prettier project with `vp migrate --no-hooks` (`vp help migrate` lists its
+options), then check the result against this topic. The hook lives in `.githooks/`, as `git.md` describes.
+
+## Oxfmt
+
+Configure formatting in the `fmt` block of `vite.config.ts`. The repo's values:
 
 ```ts
-import type { Config } from "prettier";
-
-const config: Config = {
-  printWidth: 125,
-  tabWidth: 2,
-  useTabs: false,
-  trailingComma: "none",
-  arrowParens: "avoid",
-  semi: true,
-  singleQuote: false,
-  proseWrap: "always"
-};
-
-export default config;
+export default defineConfig({
+  fmt: {
+    printWidth: 125,
+    tabWidth: 2,
+    useTabs: false,
+    trailingComma: "none",
+    arrowParens: "avoid",
+    semi: true,
+    singleQuote: false,
+    proseWrap: "always",
+    sortPackageJson: false
+  }
+});
 ```
 
-## ESLint and TypeScript
+## Oxlint and TypeScript
 
-Use flat ESLint config with type-aware rules and the repo's ignore file. The baseline bans `as` and non-null `!` outside
-tests, requires the `#/` alias instead of parent-relative imports, and uses project-service type information.
+Configure linting in the `lint` block with type-aware rules on. The baseline bans `as` and non-null `!` outside tests and
+requires the `#/` alias instead of parent-relative imports:
+
+```ts
+export default defineConfig({
+  lint: {
+    options: { typeAware: true },
+    overrides: [
+      {
+        files: ["src/**/*.{ts,tsx}"],
+        rules: {
+          "typescript/consistent-type-assertions": ["error", { assertionStyle: "never" }],
+          "typescript/no-non-null-assertion": "error",
+          "no-restricted-imports": [
+            "error",
+            { patterns: [{ group: ["../*"], message: "Use the #/ alias for anything outside the current folder." }] }
+          ]
+        }
+      },
+      {
+        files: ["**/*.test.{ts,tsx}"],
+        rules: { "typescript/consistent-type-assertions": "off", "typescript/no-non-null-assertion": "off" }
+      }
+    ]
+  }
+});
+```
 
 Use strict TypeScript with bundler module resolution, `verbatimModuleSyntax`, unused-value checks, and `#/` paths. Keep
 `import type` for type-only imports.
 
 ## Pre-commit checks
 
-The pre-commit hook checks the whole repository with ESLint and Prettier, then runs project checks for staged inputs that can
-affect generated files, types, dependencies, or TeamCity configuration. It does not rewrite files during a commit; use
-`npm run format` to apply Prettier changes explicitly.
+`.githooks/pre-commit` runs `vp staged --hide-unstaged --fail-on-changes --revert --diff-filter=ACMRD` with `set -e`. Those
+flags make the checks see only the staged state, include deletion-only commits, fail the commit when a check would change a
+file, and restore the tree afterwards, so the hook never rewrites or stages files. The `staged` block in `vite.config.ts` is
+a function returning path-free commands such as `npm run --silent verify:lint`, so each project-wide check runs once. Use
+`npm run format` to apply formatting explicitly.
 
 ## Vite plugins
 
 Register Web UI's Vite plugins in the application configuration:
 
 ```ts
-import { defineConfig } from "vite";
+import { defineConfig } from "vite-plus";
 import react from "@vitejs/plugin-react";
 import { imfusionBrandAssets, readableCssModuleNames } from "@imfusion/web-ui/vite";
 

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

@@ -30,6 +30,20 @@ input. Use `toSorted` and `toReversed` instead of their mutating counterparts.
 A loop is fine when it has a real early exit or measured hot-path benefit. A long chain or a `reduce` with several jobs wants
 named intermediate values.
 
+## Functions
+
+Declare a named function with `function`, including a local helper inside a component. A callback passed inline as a prop or
+argument stays an arrow.
+
+```tsx
+function resetCaptcha() {
+  captcha.current?.reset();
+}
+
+<Button onClick={() => setOpen(true)}>Open</Button>;
+items.map(item => item.id);
+```
+
 ## Naming
 
 Name what a value is, not how it is built. Booleans read as assertions (`isOpen`, `hasAccess`, `canSubmit`). Props use `onX`;

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

@@ -15,6 +15,8 @@ working choices.
 
 ## Workflow
 
+Invoke `imf-web-ui-user-profile` first and explain at its levels throughout.
+
 1. Resolve the scope. A named topic limits the assessment to that topic. A bare invocation means `full`, unless the request
    is about one topic, in which case that topic is the scope: answer what was asked and offer the wider sweep rather than
    running it. If the argument is unknown, list the supported topics and point to `imf-web-ui-audit`.