Visual Redesign
Yu-369/VibeCurb
Surgical aesthetic upgrade pipeline for existing React codebases.
Update the third-party JavaScript vendored into the app for the artifact, diagram, and math WebViews (KaTeX, mermaid, marked, highlight.js, Tailwind, Babel, React).
$ npx skills add garfiec/Librechat-Mobile --skill update-web-assets -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install garfiec/Librechat-Mobile update-web-assets --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-srcUse ~/.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/
Install the "update-web-assets" agent skill from https://github.com/garfiec/Librechat-Mobile/tree/develop/.claude/skills/update-web-assets into .claude/skills/update-web-assets/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "update-web-assets", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/garfiec/Librechat-Mobile/tree/develop/.claude/skills/update-web-assetsType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add garfiec/Librechat-Mobile --skill update-web-assets -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install garfiec/Librechat-Mobile update-web-assets --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/garfiec/Librechat-Mobile.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/update-web-assets .agents/skills/update-web-assets && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "update-web-assets" agent skill from https://github.com/garfiec/Librechat-Mobile/tree/develop/.claude/skills/update-web-assets into .agents/skills/update-web-assets/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "update-web-assets", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add garfiec/Librechat-Mobile --skill update-web-assets -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install garfiec/Librechat-Mobile update-web-assets --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/garfiec/Librechat-Mobile.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/update-web-assets .cursor/skills/update-web-assets && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "update-web-assets" agent skill from https://github.com/garfiec/Librechat-Mobile/tree/develop/.claude/skills/update-web-assets into .cursor/skills/update-web-assets/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "update-web-assets", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/garfiec/Librechat-Mobile.git --path .claude/skills/update-web-assets--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add garfiec/Librechat-Mobile --skill update-web-assets -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install garfiec/Librechat-Mobile update-web-assets --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/garfiec/Librechat-Mobile.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/update-web-assets .gemini/skills/update-web-assets && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "update-web-assets" agent skill from https://github.com/garfiec/Librechat-Mobile/tree/develop/.claude/skills/update-web-assets into .gemini/skills/update-web-assets/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "update-web-assets", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install garfiec/Librechat-Mobile update-web-assetsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add garfiec/Librechat-Mobile --skill update-web-assets -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/garfiec/Librechat-Mobile.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/update-web-assets .github/skills/update-web-assets && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "update-web-assets" agent skill from https://github.com/garfiec/Librechat-Mobile/tree/develop/.claude/skills/update-web-assets into .github/skills/update-web-assets/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "update-web-assets", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add garfiec/Librechat-Mobile --skill update-web-assets -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install garfiec/Librechat-Mobile update-web-assets --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/garfiec/Librechat-Mobile.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/update-web-assets .opencode/skills/update-web-assets && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "update-web-assets" agent skill from https://github.com/garfiec/Librechat-Mobile/tree/develop/.claude/skills/update-web-assets into .opencode/skills/update-web-assets/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "update-web-assets", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
update-web-assetsUpdate 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. 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.
5 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit bf2a609. It shows what the files ask for, not the result of running them.
Pre-approves these tools, so the agent can use them without asking each time:
BashReadEditWriteGlobGrepWebFetchAskUserQuestionFrom allowed-tools in the SKILL.md frontmatter.
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.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
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.
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.
The automated check noted patterns worth knowing about, such as sudo or a known installer.
allowed-tools: Bash, Read, Edit, Write, Glob, Grep, WebFetch, AskUserQuestionAutomated 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.
The full file from garfiec/Librechat-Mobile at commit bf2a609, republished under its MIT licence (© garfiec). 867 words, ~1,800 tokens.
.claude/skills/update-web-assets/SKILL.md (or your agent's skills folder).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.
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:
highlight option in v5. Passing one to setOptions is accepted
and silently ignored, so syntax highlighting had been dead with no error anywhere.<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.
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.
For each asset the user named (or each one --outdated flags, if they named none):
pin_reason in the registry.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.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).
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:
| Asset | Built in |
|---|---|
| katex | androidMain/components/LatexBlock.kt, iosMain/components/PlatformMediaComponents.ios.kt |
| mermaid | androidMain/components/MermaidDiagram.kt, commonMain/…/artifact/MermaidWebContent.kt, iosMain/components/PlatformMediaComponents.ios.kt |
| marked, marked-highlight, highlight | commonMain/…/artifact/MarkdownWebContent.kt |
| tailwind, babel, react, react-dom | commonMain/…/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.
scripts/vendor-web-assets.py --check
./gradlew :feature:chat:testDebugUnitTest --tests '*VendoredAssetReferenceTest*' \
--tests '*ReactArtifactRenderTest*'
./gradlew :feature:chat:detekt
./gradlew :app:assembleDebugVendoredAssetReferenceTest 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).
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:
| Asset | What to look at on a device |
|---|---|
| katex | a message containing $$x^2$$ — check glyphs AND that fonts loaded (no fallback serif) |
| mermaid | a ```mermaid block in a message, and a mermaid artifact opened fullscreen |
| marked / marked-highlight / highlight | a markdown artifact with a fenced code block — highlighting present, theme matches light/dark |
| tailwind | an HTML artifact using utility classes |
| babel / react / react-dom | a 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
Just SKILL.md in .claude/skills/update-web-assets of garfiec/Librechat-Mobile.
Open the folder on GitHubat commit bf2a609
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Update Web Assets this skillgarfiec/Librechat-Mobile | 111 | — | ~1.8k | Automated safety check: Notes | MIT | |
| Visual RedesignYu-369/VibeCurb | 979 | — | ~12k | Automated safety check: Pass | MIT | |
| Frontend Code ReviewProgrammerAnthony/Expert-Coding-Harness | 235 | — | ~614 | Automated safety check: Pass | MIT | |
| Reactflow Expertcuriositech/some_claude_skills | 244 | — | ~2.1k | Automated safety check: Notes | MIT | |
| Anyrobot Shadcn Frontend JSopsrobot-ai/opsrobot | 135 | — | ~3.3k | Automated safety check: Notes | Apache-2.0 | |
| UniwindOhh-889/skyroc | 795 | — | ~1.4k | Automated safety check: Pass | MIT |
Yu-369/VibeCurb
Surgical aesthetic upgrade pipeline for existing React codebases.
ProgrammerAnthony/Expert-Coding-Harness
A skill your agent uses when 用户需要审查前端代码(React/Vue/Next.js/TypeScript/Tailwind等)、检查代码质量、性能问题、可维护性、安全漏洞、最佳实践落地时。触发场景:前端代码评审、前端代码优化、React/Vue代码检查、TypeScript代码审查、前端性能优化、前端安全审计、前端代码规范检查。
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.
opsrobot-ai/opsrobot
AnyRobot 前端开发核心指南:提供 JavaScript + React + shadcn/ui 开发的精简实用规范和最佳实践。
Ohh-889/skyroc
Uniwind — Tailwind CSS v4 styling for React Native. An agent skill from Ohh-889/skyroc.
AnastasiyaW/codex-claude-code-config
Создание высококачественных, визуально выдающихся фронтенд-интерфейсов.
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.
garfiec/Librechat-Mobile
Audit open dependabot PRs in this repo. An agent skill from garfiec/Librechat-Mobile.
garfiec/Librechat-Mobile
Audit localization / i18n coverage across the compose-resources surface (10 modules x 9 locales).
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.
Categories
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.