e2e-write-visual-test
Use when writing a Playwright visual regression (screenshot comparison) test, tagging a test `@visual`, generating or updating baseline screenshots, running…
Use when fixing dependency vulnerabilities, running pnpm audit, or when the audit-dependencies CI check fails
$ npx -y skills add payloadcms/payload --skill audit-dependencies --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
/audit-dependenciesContext preview
The summary Claude sees to decide when to auto-load this skill.
Use when fixing dependency vulnerabilities, running pnpm audit, or when the audit-dependencies CI check fails
name: audit-dependencies description: Use when fixing dependency vulnerabilities, running pnpm audit, or when the audit-dependencies CI check fails user-invocable: true disable-model-invocation: true argument-hint: 'critical|high|moderate|low'
Fix dependency vulnerabilities reported by `.github/workflows/audit-dependencies.sh`. Prefer fixes in this order: direct dependency bump > lockfile update > pnpm override. Every override requires justification for why simpler approaches aren't feasible.
digraph audit {
"Run audit script" [shape=box];
"Group by package" [shape=box];
"Trace dependency chain" [shape=box];
"Can bump direct dep?" [shape=diamond];
"Research breaking changes" [shape=box];
"Breaking changes acceptable?" [shape=diamond];
"Apply direct bump" [shape=box];
"Is version pinned or ranged?" [shape=diamond];
"Lockfile update" [shape=box];
"Apply pnpm override" [shape=box];
"More packages?" [shape=diamond];
"Present plan to user" [shape=box];
"Install and verify" [shape=box];
"Build and verify" [shape=box];
"Commit and create PR" [shape=box];
"Run audit script" -> "Group by package";
"Group by package" -> "Trace dependency chain";
"Trace dependency chain" -> "Can bump direct dep?";
"Can bump direct dep?" -> "Research breaking changes" [label="yes"];
"Can bump direct dep?" -> "Is version pinned or ranged?" [label="no"];
"Research breaking changes" -> "Breaking changes acceptable?";
"Breaking changes acceptable?" -> "Apply direct bump" [label="yes"];
"Breaking changes acceptable?" -> "Is version pinned or ranged?" [label="no"];
"Is version pinned or ranged?" -> "Lockfile update" [label="ranged - fix is in range"];
"Is version pinned or ranged?" -> "Apply pnpm override" [label="pinned - explain why"];
"Apply direct bump" -> "More packages?";
"Lockfile update" -> "More packages?";
"Apply pnpm override" -> "More packages?";
"More packages?" -> "Trace dependency chain" [label="yes"];
"More packages?" -> "Present plan to user" [label="no"];
"Present plan to user" -> "Install and verify";
"Install and verify" -> "Build and verify";
"Build and verify" -> "Commit and create PR";
}./.github/workflows/audit-dependencies.sh $ARGUMENTS
`$ARGUMENTS` is the severity passed to the skill (defaults to `high` if omitted). The script runs `pnpm audit --prod --json` and filters for actionable vulnerabilities (those with a patched version available). `high` includes `critical`.
Parse the output to build a deduplicated list of vulnerable packages with:
Identify whether the vulnerable package is:
For transitive deps, walk up the chain to find the nearest package you control:
1. Check if bumping the **parent package** resolves the vulnerability
2. If the parent bump resolves it, research breaking changes:
3. Present findings to user with risk assessment
**Parallelize research**: When multiple packages need breaking change analysis, dispatch parallel agents (one per package) to research simultaneously.
Before reaching for an override, check whether the parent's version specifier is **pinned** (exact version like `3.10.3`) or **ranged** (like `^2.3.1`, `~4.0.3`):
pnpm view <parent> dependencies.<vulnerable-pkg>
If the range already includes the fixed version, a lockfile update is all that's needed:
pnpm update <vulnerable-pkg> --recursive
No `package.json` changes required — the lockfile was just stale.
Add a pnpm override in root `package.json` only when:
Override format: `"<parent>><vulnerable-pkg>": "^<fixed-version>"`
**Override syntax rules:**
Before adding any override, verify the target version exists:
pnpm view <pkg>@<version> version
Before applying fixes, present a summary table to the user showing each vulnerability, the proposed fix strategy (direct bump / lockfile update / override), and justification.
Payload is the open-source, fullstack Next.js framework, giving you instant backend superpowers. Get a full TypeScript backend and admin panel instantly. Use Payload as a headless CMS or for building powerful applications.
Repo: payloadcms/payload
Use when writing a Playwright visual regression (screenshot comparison) test, tagging a test `@visual`, generating or updating baseline screenshots, running…
Use when new translation keys are added to packages to generate new translations strings
Use when CI tests fail on main branch after PR merge, when investigating flaky test failures, or when user provides a PR URL/number to aggregate all failing…
Use when UI changes are complete and e2e tests need updating. Analyzes what changed in UI components and systematically finds/fixes affected tests.
Review UI4 CSS migrations for proper token usage. Checks that CSS variables are used instead of hardcoded values.
Manually invoked skill for reskinning Payload UI components. Requires Figma URL. Usage: /ui4