Agent skill
dependency-upgrade
Upgrade dependencies safely using pnpm catalog, checking for breaking changes, and testing upgrades. Use when updating packages, applying security patches, upgrading major versions, resolving dependency conflicts, or modernizing tech stack.
Install this agent skill to your Project
npx add-skill https://github.com/sgcarstrends/sgcarstrends/tree/main/.claude/skills/dependency-upgrade
SKILL.md
Dependency Upgrade Skill
Uses pnpm with catalog for centralized dependency management.
Check for Updates
pnpm outdated # Check all outdated
pnpm -r outdated # Across workspace
pnpm -F @sgcarstrends/api outdated # Specific package
pnpm dlx taze --interactive # Interactive upgrade
Upgrade Process
1. Update Catalog
# pnpm-workspace.yaml
catalog:
next: ^16.0.0 # Upgraded from ^15.0.0
react: ^19.0.0
Packages reference with "package": "catalog:" in package.json.
2. Install and Test
pnpm install
pnpm tsc --noEmit # Type check
pnpm test # Unit tests
pnpm biome check . # Lint
pnpm build # Build
pnpm dev # Manual testing
3. Fix Breaking Changes
// Example: Next.js 16 async params
// Before
export default function Page({ params }: { params: { id: string } }) {
return <div>{params.id}</div>;
}
// After
export default async function Page({ params }: { params: Promise<{ id: string }> }) {
const { id } = await params;
return <div>{id}</div>;
}
4. Commit
git commit -m "chore(deps): upgrade Next.js to v16
- Upgrade Next.js 15 → 16
- Upgrade React 18 → 19
- Fix async params migration
BREAKING CHANGE: Requires Node.js 20+"
Major Version Upgrades
Next.js
pnpm dlx @next/codemod@latest upgrade latest # Run codemod
# Update catalog: next: ^16.0.0, react: ^19.0.0
pnpm install
# Fix: async params, async cookies/headers
TypeScript
# Update catalog: typescript: ^5.3.3
pnpm install
pnpm tsc --noEmit # Fix type errors
Drizzle ORM
# Update catalog: drizzle-orm: ^0.30.0, drizzle-kit: ^0.20.0
pnpm install
pnpm -F @sgcarstrends/database db:generate # If schema changed
Security Updates
pnpm audit # Check vulnerabilities
pnpm audit --fix # Auto-fix
# Or manually update vulnerable package in catalog
Dependency Conflicts
pnpm why package-name # Check dependency chain
pnpm dedupe # Deduplicate
Use overrides as last resort:
{ "pnpm": { "overrides": { "react": "^19.0.0" } } }
Rollback
git reset --hard HEAD
# Or revert lockfile:
git checkout main -- pnpm-lock.yaml
pnpm install
Troubleshooting
# Lockfile conflicts
rm pnpm-lock.yaml && pnpm install
# Build failures after upgrade
rm -rf node_modules .turbo dist .next && pnpm install && pnpm build
Best Practices
- Use Catalog: Centralize versions in pnpm-workspace.yaml
- Test Thoroughly: Run all tests after upgrades
- Read Changelogs: Review breaking changes before upgrading
- Upgrade Incrementally: Don't update everything at once
- Commit Separately: Separate dependency upgrades from features
- Automate Security: Use Dependabot for security patches
References
- pnpm Catalog: https://pnpm.io/catalogs
- Next.js Codemods: https://nextjs.org/docs/app/building-your-application/upgrading/codemods
- See
securityskill for vulnerability scanning
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
component-tester
Run Vitest tests for a specific component with coverage. Use when making changes to React components to ensure tests pass and coverage is maintained.
cache-components
Ensure 'use cache' is used strategically to minimize CPU usage and ISR writes. Use when creating/modifying queries to verify caching decisions align with data update patterns and cost optimization.
ui-design-system
Enforce modern dashboard UI patterns with pill-shaped design, professional colour scheme, and typography standards. Use when building or reviewing UI components for the web application.
typography-spacing-enforcer
Enforce Typography system and modern spacing conventions. Use when implementing new UI components to ensure design consistency with project standards.
conventional-commits
Format commit messages following project conventions with commitlint validation. Use when committing changes, writing PR descriptions, or preparing releases.
component-naming
Enforce consistent React component naming conventions using domain + role patterns. Use when creating, reviewing, or refactoring components.
Didn't find tool you were looking for?