@imfusion/web-ui 0.5.1-dev.11.g2e949f6d → 0.5.1-dev.15.g0b0aa0c5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -61,7 +61,7 @@ the directories it already installed into, without asking again — `--reconfigu
|
|
|
61
61
|
| `/imf-web-ui-ux` | UX guidance for building interfaces with the library. |
|
|
62
62
|
| `/imf-web-ui-frontend-conventions` | The frontend conventions baseline, including the sanctioned styling seams. |
|
|
63
63
|
| `/imf-web-ui-frontend-setup` | Set up or audit an ImFusion frontend's tooling against the house baseline. |
|
|
64
|
-
| `/imf-web-ui-agent-setup` | Install or update the vendored skills
|
|
64
|
+
| `/imf-web-ui-agent-setup` | Install or update the vendored skills, agent hooks, and TanStack Intent. |
|
|
65
65
|
|
|
66
66
|
Start at `/imf-web-ui` — it routes to the rest. Storybook's **User Guide → AI Agents** page covers the whole family.
|
|
67
67
|
|
|
@@ -125,7 +125,7 @@ namespace.
|
|
|
125
125
|
| `/web-ui-dev-commit` | Commit workflow: staged docs audit, CI-parity checks, house commit format. |
|
|
126
126
|
| `/web-ui-dev-audit-docs` | Audit docs against staged or recent changes for staleness, gaps, and drift. |
|
|
127
127
|
| `/web-ui-dev-audit-pass-through-defaults` | Check `@default` annotations on pass-through props against Base UI upstream. |
|
|
128
|
-
| `/web-ui-dev-
|
|
128
|
+
| `/web-ui-dev-teardown-worktree` | Tear down a worktree, wherever it lives — merging its branch first or dropping it. |
|
|
129
129
|
| `/web-ui-dev-refresh-design-reference` | Refresh the committed brand snapshots in `design/` from the Figma styleguide. |
|
|
130
130
|
| `/web-ui-dev-mcp` | Set up or recover Storybook, DevTools, Atlassian, or Figma MCP access. |
|
|
131
131
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@imfusion/web-ui",
|
|
3
|
-
"version": "0.5.1-dev.
|
|
3
|
+
"version": "0.5.1-dev.15.g0b0aa0c5",
|
|
4
4
|
"description": "The official Web UI component library for ImFusion web apps",
|
|
5
5
|
"author": "ImFusion GmbH",
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -72,9 +72,6 @@
|
|
|
72
72
|
"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",
|
|
73
73
|
"skills:eval:compare": "node src/llms/evals/compare.mjs",
|
|
74
74
|
"skills:eval:report": "node src/llms/evals/report.mjs",
|
|
75
|
-
"worktree:create": "tsx scripts/worktrees.ts create",
|
|
76
|
-
"worktree:close": "tsx scripts/worktrees.ts close",
|
|
77
|
-
"worktree:discard": "tsx scripts/worktrees.ts discard",
|
|
78
75
|
"knip": "knip",
|
|
79
76
|
"git:config": "git config core.hooksPath .githooks && git config pull.rebase true && git config merge.ff only"
|
|
80
77
|
},
|
|
@@ -24,16 +24,17 @@ Guidance skills exist to fill gaps, not to add ceremony to clear tasks.
|
|
|
24
24
|
|
|
25
25
|
## Routing
|
|
26
26
|
|
|
27
|
-
| The task at hand
|
|
28
|
-
|
|
|
29
|
-
| Using a specific component; checking props, sub-components, or defaults
|
|
30
|
-
| First-time setup, adding a library dependency, or components rendering unstyled/broken
|
|
31
|
-
| Building/reshaping a screen or flow; choosing between components; layout, density, hierarchy, states
|
|
32
|
-
| Writing wrappers or custom UI; styling beyond defaults; adding files; TypeScript, naming, testing
|
|
33
|
-
| Setting up or auditing an **ImFusion** repo's tooling: formatting, linting, hooks, scripts, structure
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
27
|
+
| The task at hand | Open |
|
|
28
|
+
| --------------------------------------------------------------------------------------------------------- | --------------------------------- |
|
|
29
|
+
| Using a specific component; checking props, sub-components, or defaults | `imf-web-ui-components` |
|
|
30
|
+
| First-time setup, adding a library dependency, or components rendering unstyled/broken | `imf-web-ui-library-setup` |
|
|
31
|
+
| Building/reshaping a screen or flow; choosing between components; layout, density, hierarchy, states | `imf-web-ui-ux` |
|
|
32
|
+
| Writing wrappers or custom UI; styling beyond defaults; adding files; TypeScript, naming, testing | `imf-web-ui-frontend-conventions` |
|
|
33
|
+
| Setting up or auditing an **ImFusion** repo's tooling: formatting, linting, hooks, scripts, structure | `imf-web-ui-frontend-setup` |
|
|
34
|
+
| Setting up or refreshing agent tooling: vendored skills, lifecycle hooks, dependency-shipped Agent Skills | `imf-web-ui-agent-setup` |
|
|
35
|
+
|
|
36
|
+
The two setup rows are narrow on purpose. They're for "what is this project missing?" — a question about the repo as a whole.
|
|
37
|
+
Being asked to add one config file is just that edit; make it, and don't open a skill to do so.
|
|
37
38
|
|
|
38
39
|
Tasks routinely span two: building a screen usually means `imf-web-ui-ux` for the shape and `imf-web-ui-components` for the
|
|
39
40
|
APIs. That's normal — open both, in that order.
|
|
@@ -43,6 +44,9 @@ APIs. That's normal — open both, in that order.
|
|
|
43
44
|
TanStack is the recommended tooling library — routing, server state, forms, tables. When a task needs one of those and the
|
|
44
45
|
project has no incumbent, propose it, and read the library's own docs (`npx @tanstack/cli`) rather than working from memory.
|
|
45
46
|
|
|
47
|
+
Much of the suite also ships Agent Skills inside the package, reachable via TanStack Intent. Wiring that up is
|
|
48
|
+
`imf-web-ui-agent-setup`.
|
|
49
|
+
|
|
46
50
|
## When to interview the human
|
|
47
51
|
|
|
48
52
|
`imf-web-ui-ux` contains a short per-feature interview. Run it **only** when both hold:
|
|
@@ -2,10 +2,12 @@
|
|
|
2
2
|
name: imf-web-ui-agent-setup
|
|
3
3
|
description:
|
|
4
4
|
"Install or update the LLM/agent tooling @imfusion/web-ui ships in a consumer repo: the vendored imf-web-ui-* skills, the
|
|
5
|
-
AGENTS.md fence, the agent lifecycle hooks, and the staleness wiring.
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
AGENTS.md fence, the agent lifecycle hooks, and the staleness wiring. Also covers reaching the Agent Skills a dependency
|
|
6
|
+
ships — TanStack Intent (@tanstack/intent) and its allowlist. Wraps npx web-ui-install and adds the judgment the binary
|
|
7
|
+
can't have — reading what the repo already registers before adding anything. Load when setting up agent tooling in a
|
|
8
|
+
consumer app, when skills are stale, when hooks should be installed or adapted, or when asked to set up TanStack Intent or
|
|
9
|
+
dependency-shipped Agent Skills. Not for project tooling (imf-web-ui-frontend-setup) or library wiring
|
|
10
|
+
(imf-web-ui-library-setup)."
|
|
9
11
|
---
|
|
10
12
|
|
|
11
13
|
# imf-web-ui-agent-setup
|
|
@@ -40,6 +42,29 @@ Three agent lifecycle hooks ship as templates in [`templates/hooks/`](templates/
|
|
|
40
42
|
it. Use the template as a starting point instead: fold the missing behaviour into the repo's existing script, or adapt the
|
|
41
43
|
template and register that. Surface the situation and let the human pick.
|
|
42
44
|
|
|
45
|
+
## Dependency-shipped skills
|
|
46
|
+
|
|
47
|
+
Some libraries ship Agent Skills inside their npm package; TanStack does across much of the suite.
|
|
48
|
+
[TanStack Intent](https://github.com/TanStack/intent) (`@tanstack/intent`) is the CLI that surfaces them — an agent holding a
|
|
49
|
+
dependency but not its guidance writes plausible code against a half-remembered API.
|
|
50
|
+
|
|
51
|
+
Setting it up is the project's own call, not something web-ui does on its behalf. Point it out:
|
|
52
|
+
|
|
53
|
+
> This project has TanStack dependencies that ship their own Agent Skills. `@tanstack/intent` can make them reachable — worth
|
|
54
|
+
> a look if you want your agent working from the library's own guidance.
|
|
55
|
+
|
|
56
|
+
Intent offers two things: a fenced instructions block in `AGENTS.md`, and a `PreToolUse` hook that blocks an edit until a
|
|
57
|
+
matching skill has been read. The house preference is both — the block alone is advice an agent can walk past. The hook
|
|
58
|
+
refuses every edit while no matching skill is loadable, so a project adopting it wants the current docs open; that sequencing
|
|
59
|
+
belongs to whoever runs it.
|
|
60
|
+
|
|
61
|
+
**Allowlist the whole scope.** `intent.skills` takes `@tanstack/*`. Per-package entries like `@tanstack/react-query` look
|
|
62
|
+
more precise and silently reach almost nothing, because the skills ship from packages the app never names directly. Exclude
|
|
63
|
+
`@tanstack/devtools-event-client` — it publishes skills that are noise in an app repo.
|
|
64
|
+
|
|
65
|
+
Read Intent's own docs before wiring it; it is young and moves. Whatever the project decides, guidance you didn't read is not
|
|
66
|
+
guidance you have: use `npx @tanstack/cli` for TanStack docs, and never guess at a skill name.
|
|
67
|
+
|
|
43
68
|
## Not this skill
|
|
44
69
|
|
|
45
70
|
- Project tooling, docs structure, the audit checklist → `imf-web-ui-frontend-setup` (which delegates agent tooling here)
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: imf-web-ui-library-setup
|
|
3
3
|
description:
|
|
4
|
-
"One-time wiring of a consumer project: the @imfusion/web-ui styles import and WebUIProvider wrapper.
|
|
5
|
-
|
|
6
|
-
render unstyled or without theme context."
|
|
4
|
+
"One-time wiring of a consumer project: the @imfusion/web-ui styles import and WebUIProvider wrapper. Load when installing
|
|
5
|
+
the library for the first time, or when components render unstyled or without theme context."
|
|
7
6
|
---
|
|
8
7
|
|
|
9
8
|
# imf-web-ui-library-setup
|
|
@@ -28,25 +27,6 @@ Never import a Base UI (or other upstream) stylesheet or component directly —
|
|
|
28
27
|
inside `styles.css` and the package's own exports; reaching around web-ui to the upstream library is always wrong, even if
|
|
29
28
|
the upstream docs show it that way.
|
|
30
29
|
|
|
31
|
-
## Dependency-shipped skills
|
|
32
|
-
|
|
33
|
-
Some libraries ship Agent Skills inside their npm package; TanStack does across much of the suite.
|
|
34
|
-
[`@tanstack/intent`](https://github.com/TanStack/intent) is the CLI that surfaces them — an agent holding a dependency but
|
|
35
|
-
not its guidance writes plausible code against a half-remembered API.
|
|
36
|
-
|
|
37
|
-
Setting it up is the project's own call, not something web-ui does on its behalf. Point it out:
|
|
38
|
-
|
|
39
|
-
> This project has TanStack dependencies that ship their own Agent Skills. `@tanstack/intent` can make them reachable — worth
|
|
40
|
-
> a look if you want your agent working from the library's own guidance.
|
|
41
|
-
|
|
42
|
-
Intent offers two things: a fenced instructions block in `AGENTS.md`, and a `PreToolUse` hook that blocks an edit until a
|
|
43
|
-
matching skill has been read. The house preference is both — the block alone is advice an agent can walk past. The hook
|
|
44
|
-
refuses every edit while no matching skill is loadable, so a project adopting it wants the current docs open; that sequencing
|
|
45
|
-
belongs to whoever runs it.
|
|
46
|
-
|
|
47
|
-
Whatever the project decides, guidance you didn't read is not guidance you have: use `npx @tanstack/cli` for TanStack docs,
|
|
48
|
-
and never guess at a skill name.
|
|
49
|
-
|
|
50
30
|
## Symptoms of a broken setup
|
|
51
31
|
|
|
52
32
|
- **Components render but look unstyled** — the `styles.css` import is missing from the entry point.
|