Agent skill

Update Web Assets

by garfiec in garfiec/Librechat-Mobile

Update the third-party JavaScript vendored into the app for the artifact, diagram, and math WebViews (KaTeX, mermaid, marked, highlight.js, Tailwind, Babel, React).

MITAuto-check: notesFrontend & Design

Install Update Web Assets

skills CLI
$ npx skills add garfiec/Librechat-Mobile --skill update-web-assets -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install garfiec/Librechat-Mobile update-web-assets --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/garfiec/Librechat-Mobile.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/update-web-assets .claude/skills/update-web-assets && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
update-web-assets
GitHub stars
111
Token cost
~1.8k tokens
SKILL.md length
867 words
Files
1
Skills in repo
5
Repo updated
First seen
Licence
MIT

At a glance

Update the third-party JavaScript vendored into the app for the artifact, diagram, and math WebViews (KaTeX, mermaid, marked, highlight.js, Tailwind, Babel, React).

  • Works in 5 steps: Establish what is stale → Decide, per asset → Apply → …
  • Bumping a vendored web library
  • SKILL.md covers What makes this different from…, Phase 0 — Establish what is…, Phase 1 — Decide, per asset and Phase 2 — Apply, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Update Web Assets is an agent skill from garfiec/Librechat-Mobile. Update the third-party JavaScript vendored into the app for the artifact, diagram, and math WebViews (KaTeX, mermaid, marked, highlight.js, Tailwind, Babel, React). Checks what is outdated, reads each pin's rationale before proposing a bump, re-downloads from the official source, verifies the lock, and runs the gates. Ends by naming what must be checked on a device, because a broken WebView asset fails silently. Use when bumping a vendored web library, adding a new one, or investigating whether a rendering bug…

Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Diagrams and CSS and styling. It works with Mermaid, React, JavaScript and Tailwind CSS. The repository describes itself as: Native Android & iOS client for LibreChat, built with Kotlin Multiplatform and Compose Multiplatform. The licence is MIT.

When your agent uses it

  • Bumping a vendored web library
  • Adding a new one
  • Investigating whether a rendering bug comes from a stale pin

Example prompts

  • “/update-web-assets”

Requirements

  • Pre-approved tools (allowed-tools): Bash, Read, Edit, Write, Glob, Grep, WebFetch, AskUserQuestion

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Establish what is stale
  2. Decide, per asset
  3. Apply
  4. Gates
  5. Report, and name the device check

What it can do on your machine

Read from SKILL.md and the folder at commit bf2a609. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Bash
    • Read
    • Edit
    • Write
    • Glob
    • Grep
    • WebFetch
    • AskUserQuestion

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are bash).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Update Web Assets loads about 1.8k tokens when it runs. Until then it costs about 139 tokens; SKILL.md has 867 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~139
When it runs · the whole SKILL.md, loaded when a task matches
~1.8k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
    allowed-tools: Bash, Read, Edit, Write, Glob, Grep, WebFetch, AskUserQuestion

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from garfiec/Librechat-Mobile at commit bf2a609, republished under its MIT licence (© garfiec). 867 words, ~1,800 tokens.

Download SKILL.mdSave it as .claude/skills/update-web-assets/SKILL.md (or your agent's skills folder).
name
update-web-assets
description
Update the third-party JavaScript vendored into the app for the artifact, diagram, and math WebViews (KaTeX, mermaid, marked, highlight.js, Tailwind, Babel, React). Checks what is outdated, reads each pin's rationale before proposing a bump, re-downloads from the official source, verifies the lock, and runs the gates. Ends by naming what must be checked on a device, because a broken WebView asset fails silently. Use when bumping a vendored web library, adding a new one, or investigating whether a rendering bug comes from a stale pin.
allowed-tools
Bash, Read, Edit, Write, Glob, Grep, WebFetch, AskUserQuestion
argument-hint
[asset-id ...] (optional, defaults to checking all of them)

Update vendored web assets

The artifact, diagram and math renderers are WebViews, and every script they execute ships inside the app. scripts/web-assets.json is the registry; scripts/vendor-web-assets.py moves the bytes; scripts/web-assets.lock.json records a sha256 per file and CI verifies it.

Read scripts/web-assets.json before doing anything. Every entry carries a pin_reason, and several of them are load-bearing rather than informational — two pins must NOT be moved to the newest version, and the reason is in the file, not in this skill.

What makes this different from a Gradle dependency bump

A wrong version here does not fail the build, fail a test, or throw anything Kotlin can catch. The failure happens inside the WebView, and the usual shape of it is a blank box or a feature that quietly stops working. Both libraries this system replaced were already broken that way before anyone noticed:

  • marked deleted its highlight option in v5. Passing one to setOptions is accepted and silently ignored, so syntax highlighting had been dead with no error anywhere.
  • highlight.js was being loaded from a URL that served CommonJS. In a browser <script> that throws immediately and never defines hljs.

So: the gates below prove the wiring is consistent, and only a device proves it renders. Do not report a bump as done on green gates alone.

Phase 0 — Establish what is stale

bash
scripts/vendor-web-assets.py --check      # tree matches the lock (should be clean first)
scripts/vendor-web-assets.py --outdated   # what npm has that we don't
scripts/vendor-web-assets.py --list       # what each asset is for, and who uses it

--outdated prints each pin's pin_reason next to any version it reports. Read it. It is advisory output about a registry that has opinions.

If --check fails before you have changed anything, stop and report it — someone hand-edited a vendored file, or a repin was left half-applied. That is a finding to raise, not a precondition to quietly re-sync away.

Phase 1 — Decide, per asset

For each asset the user named (or each one --outdated flags, if they named none):

  1. Read its pin_reason in the registry.
  2. If the reason forbids or constrains the bump, say so and do not bump it. Two known standing constraints, both explained in full in the registry:
    • mermaid must stay on the v10 line (v11+ is ESM-only and fails in Android WebView).
    • react / react-dom must move together and are bounded by UMD availability.
  3. Check the upstream changelog for breaking changes in the range, especially anything touching the entry point path the registry's files block names. A package that reorganises its dist/ is the most likely way a bump fails, and --sync will refuse with a clear error if a declared path no longer exists.
  4. For a major version, use AskUserQuestion rather than deciding alone.

tailwind is pinned to a URL, not npm, because Tailwind v3 never published a browser build. --bump refuses it deliberately; repinning it means editing both the version and every file URL in the registry by hand, and moving to @tailwindcss/browser means moving to v4, which is a behaviour change for artifacts (the registry explains which utilities changed).

Show full SKILL.md (386 more words)Show less

Phase 2 — Apply

bash
scripts/vendor-web-assets.py --bump <id> <version>

This repins the registry, wipes that asset's directory, re-downloads from the official tarball, rewrites the lock, and regenerates VendoredWebAssets.kt. The wipe is deliberate: a repin that drops a file must not leave the old one behind to be served.

Adding a new asset instead: add a registry entry (with a real why, pin_reason and used_by), run --sync, then reference it from the renderer by a path relative to the document base — never an absolute URL.

If the bump changes the entry point path or an API the renderer calls, update the HTML builder in the same pass. The builders are:

AssetBuilt in
katexandroidMain/components/LatexBlock.kt, iosMain/components/PlatformMediaComponents.ios.kt
mermaidandroidMain/components/MermaidDiagram.kt, commonMain/…/artifact/MermaidWebContent.kt, iosMain/components/PlatformMediaComponents.ios.kt
marked, marked-highlight, highlightcommonMain/…/artifact/MarkdownWebContent.kt
tailwind, babel, react, react-domcommonMain/…/artifact/ArtifactWebContent.kt

Note KaTeX and mermaid each have two independent HTML builders (Android and iOS) that do not share code. Changing one and not the other is the easiest mistake to make here.

Phase 3 — Gates

bash
scripts/vendor-web-assets.py --check
./gradlew :feature:chat:testDebugUnitTest --tests '*VendoredAssetReferenceTest*' \
                                          --tests '*ReactArtifactRenderTest*'
./gradlew :feature:chat:detekt
./gradlew :app:assembleDebug

VendoredAssetReferenceTest is the one that matters most: it asserts that no document references a remote origin, that no CSP lets one execute, and that every path a document references exists in the generated manifest — which is what catches a bump that renamed a dist file, since the symptom otherwise is a blank WebView.

Per the repo's workflow preference, skip iOS builds unless asked; if asked, stop at the Gradle framework link (./gradlew :feature:chat:compileKotlinIosSimulatorArm64).

Phase 4 — Report, and name the device check

Report: which assets moved, from and to; the APK size delta if it is material; anything in a pin_reason you deliberately did not act on.

Then state plainly that the gates cannot confirm rendering, and name what to look at for the assets that actually moved:

AssetWhat to look at on a device
katexa message containing $$x^2$$ — check glyphs AND that fonts loaded (no fallback serif)
mermaida ```mermaid block in a message, and a mermaid artifact opened fullscreen
marked / marked-highlight / highlighta markdown artifact with a fenced code block — highlighting present, theme matches light/dark
tailwindan HTML artifact using utility classes
babel / react / react-doma React artifact that uses hooks; then one importing an unbundled package, which must show the naming error rather than a blank box

Do not open a PR. Per the repo's convention, stop at local commits and let the user device-test first.

© garfiec, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .claude/skills/update-web-assets of garfiec/Librechat-Mobile.

Open the folder on GitHubat commit bf2a609

Compare with similar skills

Update Web Assets next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Update Web Assets compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Update Web Assets this skillgarfiec/Librechat-Mobile111—~1.8kAutomated safety check: NotesMIT
Visual RedesignYu-369/VibeCurb979—~12kAutomated safety check: PassMIT
Frontend Code ReviewProgrammerAnthony/Expert-Coding-Harness235—~614Automated safety check: PassMIT
Reactflow Expertcuriositech/some_claude_skills244—~2.1kAutomated safety check: NotesMIT
Anyrobot Shadcn Frontend JSopsrobot-ai/opsrobot135—~3.3kAutomated safety check: NotesApache-2.0
UniwindOhh-889/skyroc795—~1.4kAutomated safety check: PassMIT

Similar skills

  • Visual Redesign

    Yu-369/VibeCurb

    Surgical aesthetic upgrade pipeline for existing React codebases.

    979 GitHub stars~12k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed
  • Frontend Code Review

    ProgrammerAnthony/Expert-Coding-Harness

    A skill your agent uses when 用户需要审查前端代码(React/Vue/Next.js/TypeScript/Tailwind等)、检查代码质量、性能问题、可维护性、安全漏洞、最佳实践落地时。触发场景:前端代码评审、前端代码优化、React/Vue代码检查、TypeScript代码审查、前端性能优化、前端安全审计、前端代码规范检查。

    235 GitHub stars~614 tokensUpdated 5 mo ago
    Frontend & DesignAuto-check passed
  • Reactflow Expert

    curiositech/some_claude_skills

    Builds DAG visualizations using ReactFlow v12 with custom nodes, ELKjs auto-layout, Zustand state management, and live state updates via WebSocket.

    244 GitHub stars~2.1k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check: notes
  • Anyrobot Shadcn Frontend JS

    opsrobot-ai/opsrobot

    AnyRobot 前端开发核心指南:提供 JavaScript + React + shadcn/ui 开发的精简实用规范和最佳实践。

    135 GitHub stars~3.3k tokensUpdated 4 mo ago
    Frontend & DesignAuto-check: notes
  • Uniwind

    Ohh-889/skyroc

    Uniwind — Tailwind CSS v4 styling for React Native. An agent skill from Ohh-889/skyroc.

    795 GitHub stars~1.4k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed
  • Frontend Design

    AnastasiyaW/codex-claude-code-config

    Создание высококачественных, визуально выдающихся фронтенд-интерфейсов.

    154 GitHub stars~1.1k tokensUpdated today
    Frontend & DesignAuto-check passed

More from garfiec/Librechat-Mobile

  • Release Highlights

    garfiec/Librechat-Mobile

    Add a hand-written Highlights section to a GitHub release whose notes were auto-generated, summarizing the release's PRs in user-facing language above the generated changelog.

    111 GitHub stars~2k tokensUpdated today
    Auto-check: notes
  • Audit Deps

    garfiec/Librechat-Mobile

    Audit open dependabot PRs in this repo. An agent skill from garfiec/Librechat-Mobile.

    111 GitHub stars~2.4k tokensUpdated today
    Auto-check: notes
  • Audit I18n

    garfiec/Librechat-Mobile

    Audit localization / i18n coverage across the compose-resources surface (10 modules x 9 locales).

    111 GitHub stars~7.2k tokensUpdated today
    Auto-check: notes
  • Sync Upstream

    garfiec/Librechat-Mobile

    Sync the Switchboard client with a newer official LibreChat server version — a stable release, a release candidate, or a PARTIAL sync up to an untagged upstream commit (e.g.

    111 GitHub stars~3.4k tokensUpdated today
    Auto-check: notes

Questions about Update Web Assets

What does Update Web Assets do?

Update the third-party JavaScript vendored into the app for the artifact, diagram, and math WebViews (KaTeX, mermaid, marked, highlight.js, Tailwind, Babel, React). Update Web Assets is an agent skill from garfiec/Librechat-Mobile.js, Tailwind, Babel, React).

When should I use Update Web Assets?

Update Web Assets fits situations like: bumping a vendored web library; adding a new one; investigating whether a rendering bug comes from a stale pin.

How do I install Update Web Assets in Claude Code?

Run `npx skills add garfiec/Librechat-Mobile --skill update-web-assets -a claude-code`. Or copy the skill folder (.claude/skills/update-web-assets in garfiec/Librechat-Mobile) into .claude/skills/update-web-assets in your project. Claude Code loads it when a task matches its description.

How do I install Update Web Assets in Codex?

Run `npx skills add garfiec/Librechat-Mobile --skill update-web-assets -a codex`. Or copy the skill folder (.claude/skills/update-web-assets in garfiec/Librechat-Mobile) into .agents/skills/update-web-assets in your project. Codex loads it when a task matches its description.

Can I use Update Web Assets in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add garfiec/Librechat-Mobile --skill update-web-assets -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/update-web-assets, .gemini/skills/update-web-assets, .github/skills/update-web-assets and .opencode/skills/update-web-assets in your project.

What does Update Web Assets need to run?

SKILL.md names no scripts, command-line tools or credentials: Update Web Assets is instructions for the agent only. Its frontmatter pre-approves these tools: Bash, Read, Edit, Write, Glob, Grep, WebFetch, AskUserQuestion.

Does Update Web Assets access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Update Web Assets safe to install?

Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Update Web Assets use?

Update Web Assets is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Update Web Assets use?

About 1.8k tokens (SKILL.md is roughly 7.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Update Web Assets?

Skills that share tags, products or a category with Update Web Assets: Visual Redesign (Yu-369/VibeCurb, 979 stars), Frontend Code Review (ProgrammerAnthony/Expert-Coding-Harness, 235 stars), Reactflow Expert (curiositech/some_claude_skills, 244 stars) and Anyrobot Shadcn Frontend JS (opsrobot-ai/opsrobot, 135 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Update Web Assets?

garfiec (a GitHub user) maintains it in garfiec/Librechat-Mobile, which has 111 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on October 10, 2026.

Source: garfiec/Librechat-Mobile on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.