
frontend-review-deps
Use when auditing dependency health — outdated packages, CVE triage with attack-vector weighting, deprecated/declining library detection (trend-watch). Runs audit-deps.sh and audit-trend-watch.sh. Pairs with frontend-review-security for the full security picture.
- Installs
- 47
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/mizchi/skills --skill frontend-review-deps- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads frontend-review-deps automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Frontend Review — Dependencies
You are auditing the dependency health of a frontend project. This covers three areas:
- Freshness — outdated packages and breaking update procedures
- CVE triage — vulnerabilities weighted by actual attack vector, not just CVSS score
- Trend watch — deprecated, abandoned, or superseded libraries that should be migrated
Procedure
- In parallel, run:
scripts/audit-deps.sh --repo <client-repo>scripts/audit-trend-watch.sh --repo <client-repo>
- Read
raw/deps.jsonandraw/trend-watch.json. - For each CVE finding, apply the attack-vector triage matrix below before assigning priority.
- For each trend-watch finding (Tier 1/2/3), confirm the installed version and assess migration cost.
CVE Triage — Attack Vector Matrix
Do not use CVSS score alone. A CVSS 9.8 RCE in a devDependency has zero production impact for a browser-only SPA.
| CVE Type | devDep only | Runtime (SPA) | Runtime (SSR/Edge) |
|---|---|---|---|
| RCE | ignore | ignore | P0 |
| Prototype Pollution | ignore | P1 (check input path) | P0 |
| ReDoS | ignore | P1 (check user input reach) | P0 |
| Path Traversal | ignore | ignore | P0 |
| XSS via library | ignore | P0 (HTML-generating libs) | P0 |
| SSRF | ignore | ignore | P0 |
| Supply Chain (postinstall malware) | CI P0 | CI P0 | P0 |
Triage procedure:
- Run
pnpm audit --prodto exclude devDeps from output. - Focus on Prototype Pollution / ReDoS / XSS — other types are low-risk for browser-only SPAs.
- For each remaining finding, check whether user-controlled input can reach the vulnerable code path. If not, downgrade to P2.
- For SSR / Edge Functions, treat RCE / Path Traversal / SSRF as P0.
- Document every ignored CVE in
kpi/audit-triage.mdwith the reason.
# Runtime-only CVEs (excludes devDeps)
pnpm audit --prod --audit-level=moderate --json | jq '
.vulnerabilities | to_entries[] |
{ name: .key, severity: .value.severity,
via: [.value.via[] | select(type=="object") | .title] }'
# Prototype Pollution / ReDoS only
pnpm audit --prod --json 2>/dev/null | jq -r '
.vulnerabilities | to_entries[] |
.value.via[] | select(type=="object") |
select(.title | test("prototype|pollution|redos|regex denial"; "i")) |
"\(.severity) \(.title) in \(.name)"' | sort -u
Trend Watch — Library Tiers
Cross-references package.json against data/trend-watch-config.json:
- Tier 1 (migrate now): Deprecated / abandoned / superseded — no rational reason to continue. Includes libraries where migration cost is low and a mature alternative exists, even if not officially deprecated (
jest→ vitest,axios→ ky/fetch,cypress→ Playwright). - Tier 2 (plan migration): Maintenance mode / satisfaction declining / RSC-incompatible.
- Tier 3 (watch): EOL versions exist / satisfaction trending down.
For each Tier 1 finding: propose a concrete migration path and estimate effort (hours/days). For each Tier 2 finding: recommend scheduling a migration in the next 1–3 months. For each Tier 3 finding: add to the ongoing monitoring list.
Library Selection — Web Standards First
Before recommending a new dependency as a replacement, apply this order:
- Can a Web Platform / ECMAScript standard API cover this?
| Use case | Avoid | Use instead |
|---|---|---|
| Date / time | moment, date-fns, dayjs | Temporal (polyfill), or Date for simple cases |
| Array / object utilities | lodash, ramda | Array.prototype.{flatMap,findLast,groupBy}, Object.{entries,fromEntries,groupBy}, structuredClone() |
| HTTP requests | axios, request | fetch + AbortController |
| UUID generation | uuid, nanoid | crypto.randomUUID() |
| URL / query params | qs, query-string | URL, URLSearchParams |
| Number / date formatting | numeral.js | Intl.NumberFormat, Intl.DateTimeFormat |
- Tree-shakable? Only what is imported should end up in the bundle.
- Actively maintained? Release within the last 6 months.
- Bundle impact < 5 kb gzip? Verify with
pnpm buildand a bundle analyser.
Breaking Update Procedure
- Propose as a standalone PR — never bundle with feature or refactor work.
- Read the changelog for removed APIs; grep / ast-grep the codebase for usages.
- Require
typecheck && lint && test:ci && e2eto pass before merge. - If VRT snapshots exist, regenerate them in a Linux container after the upgrade.
Output
Write <client-repo>/.frontend-review/report/latest/md/deps-review.md with:
- Outdated packages table (name, current, latest, breaking?)
- CVE findings after attack-vector triage (priority, package, type, reason for priority)
- Trend watch findings by tier (Tier 1: migration now, Tier 2: plan, Tier 3: monitor)
- Ignored CVEs with justification (for
kpi/audit-triage.md) - Recommended PRs: update batches + migration starting points
Boundaries
- Do NOT assess TypeScript / lint / dead code — that's
frontend-review-hygiene. - Do NOT run the AI pentest or check HTML sinks — that's
frontend-review-security. - Do NOT touch source files in the client repo.
Reference
- Checklist:
02-dependencies.md,27-dependency-audit.md,28-trend-watch.md - Data:
data/trend-watch-config.json,data/trend-watch-history.json - Scripts:
scripts/audit-deps.sh,scripts/audit-trend-watch.sh,scripts/fetch-trend-data.sh - Phase:
week-1-ci-baseline.md
FAQ
What does the frontend-review-deps skill do?
Use when auditing dependency health — outdated packages, CVE triage with attack-vector weighting, deprecated/declining library detection (trend-watch). Runs audit-deps.sh and audit-trend-watch.sh. Pairs with frontend-review-security for the full security picture.
How do I install frontend-review-deps?
Run npx skills add https://github.com/mizchi/skills --skill frontend-review-deps in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/frontend-review-deps/ (personal) or .claude/skills/frontend-review-deps/ (project).
Which AI agents can use frontend-review-deps?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is frontend-review-deps safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains frontend-review-deps?
It is published by mizchi in mizchi/skills. It has 47 recorded installs.
More from mizchi/skills
empirical-prompt-tuning
mizchi/skills
Open the skill to read its SKILL.md instructions.
playwright-cli
mizchi/skills
Open the skill to read its SKILL.md instructions.
playwright-test
mizchi/skills
Open the skill to read its SKILL.md instructions.
tech-article-reproducibility
mizchi/skills
Open the skill to read its SKILL.md instructions.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.