MCPInstall

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
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads frontend-review-deps automatically when relevant.

  3. 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:

  1. Freshness — outdated packages and breaking update procedures
  2. CVE triage — vulnerabilities weighted by actual attack vector, not just CVSS score
  3. Trend watch — deprecated, abandoned, or superseded libraries that should be migrated

Procedure

  1. In parallel, run:
    • scripts/audit-deps.sh --repo <client-repo>
    • scripts/audit-trend-watch.sh --repo <client-repo>
  2. Read raw/deps.json and raw/trend-watch.json.
  3. For each CVE finding, apply the attack-vector triage matrix below before assigning priority.
  4. 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 TypedevDep onlyRuntime (SPA)Runtime (SSR/Edge)
RCEignoreignoreP0
Prototype PollutionignoreP1 (check input path)P0
ReDoSignoreP1 (check user input reach)P0
Path TraversalignoreignoreP0
XSS via libraryignoreP0 (HTML-generating libs)P0
SSRFignoreignoreP0
Supply Chain (postinstall malware)CI P0CI P0P0

Triage procedure:

  1. Run pnpm audit --prod to exclude devDeps from output.
  2. Focus on Prototype Pollution / ReDoS / XSS — other types are low-risk for browser-only SPAs.
  3. For each remaining finding, check whether user-controlled input can reach the vulnerable code path. If not, downgrade to P2.
  4. For SSR / Edge Functions, treat RCE / Path Traversal / SSRF as P0.
  5. Document every ignored CVE in kpi/audit-triage.md with 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:

  1. Can a Web Platform / ECMAScript standard API cover this?
Use caseAvoidUse instead
Date / timemoment, date-fns, dayjsTemporal (polyfill), or Date for simple cases
Array / object utilitieslodash, ramdaArray.prototype.{flatMap,findLast,groupBy}, Object.{entries,fromEntries,groupBy}, structuredClone()
HTTP requestsaxios, requestfetch + AbortController
UUID generationuuid, nanoidcrypto.randomUUID()
URL / query paramsqs, query-stringURL, URLSearchParams
Number / date formattingnumeral.jsIntl.NumberFormat, Intl.DateTimeFormat
  1. Tree-shakable? Only what is imported should end up in the bundle.
  2. Actively maintained? Release within the last 6 months.
  3. Bundle impact < 5 kb gzip? Verify with pnpm build and a bundle analyser.

Breaking Update Procedure

  1. Propose as a standalone PR — never bundle with feature or refactor work.
  2. Read the changelog for removed APIs; grep / ast-grep the codebase for usages.
  3. Require typecheck && lint && test:ci && e2e to pass before merge.
  4. 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

View all →

Open the skill to read its SKILL.md instructions.

AI & Agents346 installs

pi-coding-agent

mizchi/skills

Open the skill to read its SKILL.md instructions.

130 installs

playwright-cli

mizchi/skills

Open the skill to read its SKILL.md instructions.

Testing & QA108 installs

playwright-test

mizchi/skills

Open the skill to read its SKILL.md instructions.

Testing & QA91 installs

Open the skill to read its SKILL.md instructions.

88 installs

Open the skill to read its SKILL.md instructions.

Docs & Writing71 installs

Popular frontend & design skills

View category →

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 & Design1.1M installs

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.

OfficialFrontend & Design1M installs

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.

Frontend & Design999.2K installs

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.

Frontend & Design930.5K installs

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.

OfficialFrontend & Design843.1K installs