Borrowing it
Nothing to install: this file belongs to tam159/next-role. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/tam159/next-role/main/.agents/skills/upgrade-frontend-deps/SKILL.mdgit clone --depth 1 https://github.com/tam159/next-roleWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/tam159/next-role/upgrade-frontend-deps)<a href="https://agentmods.dev/skills/tam159/next-role/upgrade-frontend-deps"><img src="https://agentmods.dev/badge/skills/tam159/next-role/upgrade-frontend-deps/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/tam159/next-role/upgrade-frontend-deps"><img src="https://agentmods.dev/badge/skills/tam159/next-role/upgrade-frontend-deps.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00154 | $0.03134 |
| Opus 5 | $0.00077 | $0.01567 |
| Sonnet 5 | $0.00031 | $0.00627 |
| Haiku 4.5 | $0.00015 | $0.00313 |
Grade C, and why
upgrade-frontend-deps scanned grade C with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 5d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Recursive force deletehighDestructive command
rm -rf with a variable or a broad path is one typo away from removing the wrong tree.
Full visual checklist vs baseline (light + dark, dialogs, selects, hover, print page), plus a cold-build check: `rm -rf frontend/.next && pnpm --dir frontend build` and grep the emitted CSS. How it starts
The opening of the file, as written. The whole thing — 145 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Upgrade the frontend's pnpm dependencies in revertable waves, preserving exact-pin style and the single-resolved-version invariant, with browser verification against a pre-upgrade baseline.
Ground rules
- Exact pins stay exact.
react,react-dom, and@langchain/langgraph-sdkhave no^inpackage.json. Upgrade them withpnpm --dir frontend add -E [email protected]; everything else gets a new^floor (pnpm --dir frontend add pkg@^x.y.z). - A held-back line needs a
~range.^x.y.zadmits every later minor, and pnpm resolves the highest match —pnpm add better-auth@^1.6.30installed 1.7.2, the version being held back. When a package must stay on its current minor (schema migration, peer gate), pin~x.y.z, say so under "Held back", and restore^in the PR that lifts the hold. Always read the+ pkg x.y.zline pnpm prints afteradd— it is the installed version, not the range you typed. - One resolved version per dep. The lockfile must not carry two copies of anything that crosses a package boundary (the
@langchain/langgraph-sdksingle-copy invariant infrontend/CLAUDE.mdis the critical one;scripts/check-langchain-sdk-sync.mjsguards it). - One commit per wave (majors: one per package) so any regression reverts surgically.
- Lockfile changes need
docker compose restart frontend; source edits hot-reload. Never restart for source-only changes; never skip the restart afterpnpm add/remove. @types/nodetracks the Docker runtime, not npmlatest. Read the major fromfrontend/Dockerfile'sFROM node:XX-alpineand stay on@types/node@^XX. Document it under "Held back".vitest+@vitest/coverage-v8are an exact-version lockstep pair (coverage is an exact peer of the runner) — bump both together in one command; a split pair breakspnpm test:coverage. Since vitest 5,viteis a required peer rather than a dependency: keep it as an explicit devDependency (vite@^8) so the resolved version is declared, not left to pnpm's auto-installed peers.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 5d ago Changed · +4 lines 6aa3e948036c
- 10d ago First seen · 141 lines · 154 tokens per session scan C 9f00c876a855
upgrade-frontend-deps is a skill published in the GitHub repository tam159/next-role (50 stars, last pushed 2d ago), licensed MIT. It adds 154 tokens to every session and 3,134 once invoked, about $0.0008 per session on Opus 5. A static security scan graded it C with 1 finding (recursive force delete). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
gsd-sketch
Sketch UI/design ideas with throwaway HTML mockups, or propose what to sketch next (frontier mode).
gsd-ui-phase
Generate UI design contract (UI-SPEC.md) for frontend phases.
gsd-ui-review
Retroactive 6-pillar visual audit of implemented frontend code.
userinterface-wiki
UI/UX best practices for web interfaces. Use when reviewing animations, CSS, audio, typography, UX patterns, prefetching, or icon implementations. Covers 11 categories from animation principles to typography. Outputs file:line findings.
core-web-vitals
Optimize Core Web Vitals (LCP, INP, CLS) for better page experience and search ranking. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience optimization", or "fix layout shifts".
web-quality-audit
Comprehensive web quality audit covering performance, accessibility, SEO, and best practices. Use when asked to "audit my site", "review web quality", "run lighthouse audit", "check page quality", or "optimize my website".