Dependency Upgrade
Unverified●28/40Claude Code◐PartialHas 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-upgradeWho 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
Frontmatter — 2 properties
| name | dependency-upgrade |
|---|---|
| description | 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. |
| 1 | --- |
| 2 | name: dependency-upgrade |
| 3 | description: 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 | ---A5 — No allowed-tools declared — no way to tell what this skill may touch |
| 5 | |
| 6 | # Dependency Upgrade |
| 7 | |
| 8 | Master 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 | ``` |
| 23 | MAJOR.MINOR.PATCH (e.g., 2.3.1) |
| 24 | |
| 25 | MAJOR: Breaking changes |
| 26 | MINOR: New features, backward compatible |
| 27 | PATCH: 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) |
| 31 | 2.3.1 = exact version |
| 32 | ``` |
| 33 | |
| 34 | ## Dependency Analysis |
| 35 | |
| 36 | ### Audit Dependencies |
| 37 | |
| 38 | ```bash |
| 39 | # npm |
| 40 | npm outdated |
| 41 | npm audit |
| 42 | npm audit fix |
| 43 | |
| 44 | # yarn |
| 45 | yarn outdated |
| 46 | yarn audit |
| 47 | |
| 48 | # Check for major updates |
| 49 | npx npm-check-updates |
| 50 | npx npm-check-updates -u # Update package.json |
| 51 | ``` |
| 52 | |
| 53 | ### Analyze Dependency Tree |
| 54 | |
| 55 | ```bash |
| 56 | # See why a package is installed |
| 57 | npm ls package-name |
| 58 | yarn why package-name |
| 59 | |
| 60 | # Find duplicate packages |
| 61 | npm dedupe |
| 62 | yarn dedupe |
| 63 | |
| 64 | # Visualize dependencies |
| 65 | npx madge --image graph.png src/ |
| 66 | ``` |
| 67 | |
| 68 | ## Compatibility Matrix |
| 69 | |
| 70 | ```javascript |
| 71 | // compatibility-matrix.js |
| 72 | const 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 | |
| 92 | function 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 |
| 103 | npm list --depth=0 |
| 104 | |
| 105 | # 2. Check for breaking changes |
| 106 | # Read CHANGELOG.md and MIGRATION.md |
| 107 | |
| 108 | # 3. Create upgrade plan |
| 109 | echo "Upgrade order: |
| 110 | 1. TypeScript |
| 111 | 2. React |
| 112 | 3. React Router |
| 113 | 4. Testing libraries |
| 114 | 5. 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 |
| 123 | npm install typescript@latest |
| 124 | |
| 125 | # Test |
| 126 | npm run test |
| 127 | npm run build |
| 128 | |
| 129 | # Step 2: Update React (one major version at a time) |
| 130 | npm install react@17 react-dom@17 |
| 131 | |
| 132 | # Test again |
| 133 | npm run test |
| 134 | |
| 135 | # Step 3: Continue with other packages |
| 136 | npm install react-router-dom@6 |
| 137 | |
| 138 | # And so on... |
| 139 | ``` |
| 140 | |
| 141 | ### Phase 3: Validation |
| 142 | |
| 143 | ```javascript |
| 144 | // tests/compatibility.test.js |
| 145 | describe("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 |
| 165 | curl https://raw.githubusercontent.com/facebook/react/master/CHANGELOG.mdA4 — This 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 |
| 172 | npx jscodeshift -t <transform-url> <path> |
| 173 | |
| 174 | # Example: Rename unsafe lifecycle methods |
| 175 | npx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/rename-unsafe-lifecycles.js src/ |
| 176 | |
| 177 | # For TypeScript files |
| 178 | npx 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 |
| 181 | npx 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 |
| 188 | const fs = require("fs"); |
| 189 | const glob = require("glob"); |
| 190 | |
| 191 | glob("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 |
| 218 | npm run test |
| 219 | |
| 220 | // Update test utilities if needed |
| 221 | npm install @testing-library/react@latest |
| 222 | ``` |
| 223 | |
| 224 | ### Integration Tests |
| 225 | |
| 226 | ```javascript |
| 227 | // tests/integration/app.test.js |
| 228 | describe("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 |
| 245 | describe("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 |
| 257 | describe("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 |
| 296 | version: 2 |
| 297 | updates: |
| 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 |
| 317 | git stash |
| 318 | git checkout -b upgrade-branch |
| 319 | |
| 320 | # Attempt upgrade |
| 321 | npm install package@latest |
| 322 | |
| 323 | # Run tests |
| 324 | if npm run test; then |
| 325 | echo "Upgrade successful" |
| 326 | git add package.json package-lock.json |
| 327 | git commit -m "chore: upgrade package" |
| 328 | else |
| 329 | echo "Upgrade failed, rolling back" |
| 330 | git checkout main |
| 331 | git branch -D upgrade-branch |
| 332 | npm install # Restore from package-lock.json |
| 333 | fi |
| 334 | ``` |
| 335 | |
| 336 | ## Common Upgrade Patterns |
| 337 | |
| 338 | ### Lock File Management |
| 339 | |
| 340 | ```bash |
| 341 | # npm |
| 342 | npm install --package-lock-only # Update lock file only |
| 343 | npm ci # Clean install from lock file |
| 344 | |
| 345 | # yarn |
| 346 | yarn install --frozen-lockfile # CI mode |
| 347 | yarn upgrade-interactive # Interactive upgrades |
| 348 | ``` |
| 349 | |
| 350 | ### Peer Dependency Resolution |
| 351 | |
| 352 | ```bash |
| 353 | # npm 7+: strict peer dependencies |
| 354 | npm install --legacy-peer-deps # Ignore peer deps |
| 355 | |
| 356 | # npm 8+: override peer dependencies |
| 357 | npm install --force |
| 358 | ``` |
| 359 | |
| 360 | ### Workspace Upgrades |
| 361 | |
| 362 | ```bash |
| 363 | # Update all workspace packages |
| 364 | npm install --workspaces |
| 365 | |
| 366 | # Update specific workspace |
| 367 | npm install package@latest --workspace=packages/app |
| 368 | ``` |
| 369 |
Reviews
Installed this one?Write the first review and take the Trailblazer badge.
Alternatives
Subagent Driven DevelopmentUse when executing implementation plans with independent tasks in the current session◐◐◐◐◐●36/40Python Code Style & DocumentationPython code style, linting, formatting, naming conventions, and documentation standards. Use when writing new code, reviewing style, configuring linters, writing docstrings, or establishing project standards.◐····●35/40Competitor Price Analysis 💲Competitor pricing strategy analysis and market positioning. Price mapping, pricing gaps identification, elasticity signals evaluation, and strategic pricing optimization. Use when the user asks about competitor pricing, price analysis, pricing strategy, or co◐····●34/40Competitor Price Tracker 📊Set up competitor price tracking and monitoring workflows. Track price changes, detect promotions, analyze pricing patterns, and get alerts for competitive price movements.◐····●34/40