Install in Claude Code
Copygit clone --depth 1 https://github.com/Pipelex/pipelex /tmp/update-graph-ui && cp -r /tmp/update-graph-ui/.claude/skills/update-graph-ui ~/.claude/skills/update-graph-uiThen start a new Claude Code session; the skill loads automatically.
Definition
SKILL.md
# Update Graph UI Assets (CDN + SRI)
Bump the pinned `@pipelex/mthds-ui` version that the generated ReactFlow HTML
loads from `cdn.jsdelivr.net`, refresh the Subresource Integrity hashes, and
verify everything still renders.
There is no vendored bundle anymore. Assets are loaded from jsDelivr at view
time; the only things stored in this repo are the version strings and the
matching `sha384` SRI hashes in
`pipelex/graph/reactflow/standalone_assets.py`.
## Prerequisites
- `curl`, `openssl`, and `npm` on PATH (used by the refresh command, npm
version lookup, and the sanity checks below).
- The target `@pipelex/mthds-ui` version must already be published on npm
**with `dist/standalone/graph-viewer.{js,css}` in the tarball**. If it
isn't, jsDelivr will 404 — fix the publish in the `mthds-ui` repo first.
## Workflow
### 1. Check current pin
```bash
grep -E 'MTHDS_UI_VERSION|ELKJS_VERSION' pipelex/graph/reactflow/standalone_assets.py
```
Report the currently pinned versions.
### 2. Pick the target version
Latest published version on npm:
```bash
npm view @pipelex/mthds-ui version
```
Confirm with the user.
### 3. Verify the target is reachable on jsDelivr
```bash
curl -fsI https://cdn.jsdelivr.net/npm/@pipelex/mthds-ui@<NEW_VERSION>/dist/standalone/graph-viewer.js
curl -fsI https://cdn.jsdelivr.net/npm/@pipelex/mthds-ui@<NEW_VERSION>/dist/standalone/graph-viewer.css
```
Both must return `HTTP/2 200`. If either 404s, the npm publish for that
version did not include the standalone bundle — stop and ask the maintainer
to re-publish properly before proceeding.
### 4. Refresh the SRI hashes
```bash
.venv/bin/pipelex-dev refresh-graph-ui-sri --mthds-ui-version <NEW_VERSION>
```
This re-fetches each URL, computes `sha384`, and rewrites the constants in
`pipelex/graph/reactflow/standalone_assets.py`.
To rotate `elkjs` at the same time, pass `--elkjs-version <NEW_ELKJS_VERSION>`.
### 5. Run graph tests
```bash
.venv/bin/pytest tests/unit/pipelex/graph/reactflow tests/unit/pipelex/graph/test_reactflow_html.py -q
```
All tests must pass. These verify:
- CDN constants are well-formed (`sha384-…` decoding to 48 bytes, URLs pinned to declared versions).
- Generated HTML references `cdn.jsdelivr.net` with the new integrity hashes.
- HTML structure (DOCTYPE, root div, embedded JSON data scripts) is intact.
### 6. Run full quality checks
```bash
make agent-check
```
### 7. Smoke test the rendered HTML (recommended)
Generate one graph and open it in a browser:
```bash
make serve-graph
```
In DevTools → Network, confirm three external requests to `cdn.jsdelivr.net`
succeed with no `Failed to find a valid digest in the 'integrity' attribute`
errors in the console.
### 8. Report
Tell the user:
- Previous and new versions for `mthds-ui` (and `elkjs` if bumped).
- New SRI hashes.
- Test results.
- Remind to commit `pipelex/graph/reactflow/standalone_assets.py` and any
CHANGELOG entry.More from this repository