Skills · Coding

Dependency Upgrade

Unverified28/40

Manage major dependency version upgrades with compatibility analysis, staged rollout, and comprehensive testing. Use when upgrading framework versions, updating major dependencies, or managing breaking changes in libraries.

Originally by wshobson · MIT

Claude CodePartialHas SKILL.md but declares no allowed-tools — Claude Code will ask for permission each time
Cursor·UnknownWe have not crawled the repo tree, so we will not guess
Codex·UnknownWe have not crawled the repo tree, so we will not guess
Gemini CLI·UnknownThe spec defines no detection rule for Gemini
Copilot·UnknownWe have not crawled the repo tree, so we will not guess
npx agentalley add dependency-upgrade

This command does not work yet — the CLI is still being built. Until then, use Raw in the reader below to take the file.

Who is stuck, and on what

Manage major dependency version upgrades with compatibility analysis, staged rollout, and comprehensive testing. Use when upgrading framework versions, updating major dependencies, or managing breaking changes in libraries.

The whole source

No sign-in, no blur, nothing truncated
dependency-upgrade/SKILL.md369 lines7.4 KBRawView on GitHub
Frontmatter — 2 properties
namedependency-upgrade
descriptionManage major dependency version upgrades with compatibility analysis, staged rollout, and comprehensive testing. Use when upgrading framework versions, updating major dependencies, or managing breaking changes in libraries.
1---
2name: dependency-upgrade
3description: Manage major dependency version upgrades with compatibility analysis, staged rollout, and comprehensive testing. Use when upgrading framework versions, updating major dependencies, or managing breaking changes in libraries.
4---A5No allowed-tools declared — no way to tell what this skill may touch
5 
6# Dependency Upgrade
7 
8Master major dependency version upgrades, compatibility analysis, staged upgrade strategies, and comprehensive testing approaches.
9 
10## When to Use This Skill
11 
12- Upgrading major framework versions
13- Updating security-vulnerable dependencies
14- Modernizing legacy dependencies
15- Resolving dependency conflicts
16- Planning incremental upgrade paths
17- Testing compatibility matrices
18- Automating dependency updates
19 
20## Semantic Versioning Review
21 
22```
23MAJOR.MINOR.PATCH (e.g., 2.3.1)
24 
25MAJOR: Breaking changes
26MINOR: New features, backward compatible
27PATCH: Bug fixes, backward compatible
28 
29^2.3.1 = >=2.3.1 <3.0.0 (minor updates)
30~2.3.1 = >=2.3.1 <2.4.0 (patch updates)
312.3.1 = exact version
32```
33 
34## Dependency Analysis
35 
36### Audit Dependencies
37 
38```bash
39# npm
40npm outdated
41npm audit
42npm audit fix
43 
44# yarn
45yarn outdated
46yarn audit
47 
48# Check for major updates
49npx npm-check-updates
50npx npm-check-updates -u # Update package.json
51```
52 
53### Analyze Dependency Tree
54 
55```bash
56# See why a package is installed
57npm ls package-name
58yarn why package-name
59 
60# Find duplicate packages
61npm dedupe
62yarn dedupe
63 
64# Visualize dependencies
65npx madge --image graph.png src/
66```
67 
68## Compatibility Matrix
69 
70```javascript
71// compatibility-matrix.js
72const compatibilityMatrix = {
73 react: {
74 "16.x": {
75 "react-dom": "^16.0.0",
76 "react-router-dom": "^5.0.0",
77 "@testing-library/react": "^11.0.0",
78 },
79 "17.x": {
80 "react-dom": "^17.0.0",
81 "react-router-dom": "^5.0.0 || ^6.0.0",
82 "@testing-library/react": "^12.0.0",
83 },
84 "18.x": {
85 "react-dom": "^18.0.0",
86 "react-router-dom": "^6.0.0",
87 "@testing-library/react": "^13.0.0",
88 },
89 },
90};
91 
92function checkCompatibility(packages) {
93 // Validate package versions against matrix
94}
95```
96 
97## Staged Upgrade Strategy
98 
99### Phase 1: Planning
100 
101```bash
102# 1. Identify current versions
103npm list --depth=0
104 
105# 2. Check for breaking changes
106# Read CHANGELOG.md and MIGRATION.md
107 
108# 3. Create upgrade plan
109echo "Upgrade order:
1101. TypeScript
1112. React
1123. React Router
1134. Testing libraries
1145. Build tools" > UPGRADE_PLAN.md
115```
116 
117### Phase 2: Incremental Updates
118 
119```bash
120# Don't upgrade everything at once!
121 
122# Step 1: Update TypeScript
123npm install typescript@latest
124 
125# Test
126npm run test
127npm run build
128 
129# Step 2: Update React (one major version at a time)
130npm install react@17 react-dom@17
131 
132# Test again
133npm run test
134 
135# Step 3: Continue with other packages
136npm install react-router-dom@6
137 
138# And so on...
139```
140 
141### Phase 3: Validation
142 
143```javascript
144// tests/compatibility.test.js
145describe("Dependency Compatibility", () => {
146 it("should have compatible React versions", () => {
147 const reactVersion = require("react/package.json").version;
148 const reactDomVersion = require("react-dom/package.json").version;
149 
150 expect(reactVersion).toBe(reactDomVersion);
151 });
152 
153 it("should not have peer dependency warnings", () => {
154 // Run npm ls and check for warnings
155 });
156});
157```
158 
159## Breaking Change Handling
160 
161### Identifying Breaking Changes
162 
163```bash
164# Check the changelog directly
165curl https://raw.githubusercontent.com/facebook/react/master/CHANGELOG.mdA4This skill pulls in web or user content but never says to treat that content as data. A signal, not proof.
166```
167 
168### Codemod for Automated Fixes
169 
170```bash
171# Run jscodeshift with transform URL
172npx jscodeshift -t <transform-url> <path>
173 
174# Example: Rename unsafe lifecycle methods
175npx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/rename-unsafe-lifecycles.js src/
176 
177# For TypeScript files
178npx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/rename-unsafe-lifecycles.js --parser=tsx src/
179 
180# Dry run to preview changes
181npx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/rename-unsafe-lifecycles.js --dry src/
182```
183 
184### Custom Migration Script
185 
186```javascript
187// migration-script.js
188const fs = require("fs");
189const glob = require("glob");
190 
191glob("src/**/*.tsx", (err, files) => {
192 files.forEach((file) => {
193 let content = fs.readFileSync(file, "utf8");
194 
195 // Replace old API with new API
196 content = content.replace(
197 /componentWillMount/g,
198 "UNSAFE_componentWillMount",
199 );
200 
201 // Update imports
202 content = content.replace(
203 /import { Component } from 'react'/g,
204 "import React, { Component } from 'react'",
205 );
206 
207 fs.writeFileSync(file, content);
208 });
209});
210```
211 
212## Testing Strategy
213 
214### Unit Tests
215 
216```javascript
217// Ensure tests pass before and after upgrade
218npm run test
219 
220// Update test utilities if needed
221npm install @testing-library/react@latest
222```
223 
224### Integration Tests
225 
226```javascript
227// tests/integration/app.test.js
228describe("App Integration", () => {
229 it("should render without crashing", () => {
230 render(<App />);
231 });
232 
233 it("should handle navigation", () => {
234 const { getByText } = render(<App />);
235 fireEvent.click(getByText("Navigate"));
236 expect(screen.getByText("New Page")).toBeInTheDocument();
237 });
238});
239```
240 
241### Visual Regression Tests
242 
243```javascript
244// visual-regression.test.js
245describe("Visual Regression", () => {
246 it("should match snapshot", () => {
247 const { container } = render(<App />);
248 expect(container.firstChild).toMatchSnapshot();
249 });
250});
251```
252 
253### E2E Tests
254 
255```javascript
256// cypress/e2e/app.cy.js
257describe("E2E Tests", () => {
258 it("should complete user flow", () => {
259 cy.visit("/");
260 cy.get('[data-testid="login"]').click();
261 cy.get('input[name="email"]').type("[email protected]");
262 cy.get('button[type="submit"]').click();
263 cy.url().should("include", "/dashboard");
264 });
265});
266```
267 
268## Automated Dependency Updates
269 
270### Renovate Configuration
271 
272```json
273// renovate.json
274{
275 "extends": ["config:base"],
276 "packageRules": [
277 {
278 "matchUpdateTypes": ["minor", "patch"],
279 "automerge": true
280 },
281 {
282 "matchUpdateTypes": ["major"],
283 "automerge": false,
284 "labels": ["major-update"]
285 }
286 ],
287 "schedule": ["before 3am on Monday"],
288 "timezone": "America/New_York"
289}
290```
291 
292### Dependabot Configuration
293 
294```yaml
295# .github/dependabot.yml
296version: 2
297updates:
298 - package-ecosystem: "npm"
299 directory: "/"
300 schedule:
301 interval: "weekly"
302 open-pull-requests-limit: 5
303 reviewers:
304 - "team-leads"
305 commit-message:
306 prefix: "chore"
307 include: "scope"
308```
309 
310## Rollback Plan
311 
312```javascript
313// rollback.sh
314#!/bin/bash
315 
316# Save current state
317git stash
318git checkout -b upgrade-branch
319 
320# Attempt upgrade
321npm install package@latest
322 
323# Run tests
324if npm run test; then
325 echo "Upgrade successful"
326 git add package.json package-lock.json
327 git commit -m "chore: upgrade package"
328else
329 echo "Upgrade failed, rolling back"
330 git checkout main
331 git branch -D upgrade-branch
332 npm install # Restore from package-lock.json
333fi
334```
335 
336## Common Upgrade Patterns
337 
338### Lock File Management
339 
340```bash
341# npm
342npm install --package-lock-only # Update lock file only
343npm ci # Clean install from lock file
344 
345# yarn
346yarn install --frozen-lockfile # CI mode
347yarn upgrade-interactive # Interactive upgrades
348```
349 
350### Peer Dependency Resolution
351 
352```bash
353# npm 7+: strict peer dependencies
354npm install --legacy-peer-deps # Ignore peer deps
355 
356# npm 8+: override peer dependencies
357npm install --force
358```
359 
360### Workspace Upgrades
361 
362```bash
363# Update all workspace packages
364npm install --workspaces
365 
366# Update specific workspace
367npm install package@latest --workspace=packages/app
368```
369 

Reviews

Installed this one?Write the first review and take the Trailblazer badge.

Reviews only open after a real install, so this is empty — and we leave it empty rather than invent one.

Alternatives

Also in Coding