Dependency Upgrade Migrator

Dependency Upgrade Migrator (2026 Edition)

English | Bahasa Indonesia

English

Orchestration & Integration

Connects and orchestrates with relevant domain skills like brainstorming, zero-to-prod-orchestrator, and project-context-mapper to ensure cohesive execution.

Description

Production-grade guide for safely upgrading dependencies, migrating through breaking changes, and maintaining healthy dependency trees. Covers automated upgrade tooling (npm-check-updates, taze, Renovate Bot), major framework migration guides (React 18→19, Next.js 14→15, Tailwind v3→v4), codemod automation (jscodeshift, ts-morph), vulnerability remediation (npm audit, pnpm audit), lockfile hygiene, monorepo alignment (pnpm catalogs), and breaking change detection workflows.

Trigger Conditions

Activate this skill when:

• Upgrading major versions of frameworks (React, Next.js, Tailwind, etc.).
• Running security audits and remediating vulnerabilities.
• Setting up automated dependency update bots (Renovate, Dependabot).
• Writing or running codemods for API migration.
• Cleaning up dependency trees and removing unused packages.
• Aligning dependency versions across monorepo packages.

1. Upgrade Strategy Matrix

2. Pre-Upgrade Checklist

- [ ] Run `pnpm audit` / `npm audit` to identify vulnerabilities
- [ ] Check changelog/migration guide for the target version
- [ ] Ensure test suite is passing on current version (baseline)
- [ ] Create a dedicated branch for the upgrade
- [ ] Check peer dependency compatibility
- [ ] Review breaking changes list
- [ ] Identify files that need codemod transformation
- [ ] Back up lockfile before changes

3. Automated Upgrade Tooling

Checking for Updates

# Using taze (recommended — supports monorepos)
npx taze major          # Show available major upgrades
npx taze minor -w       # Auto-write minor updates to package.json
npx taze -r             # Recursive (monorepo)

# Using npm-check-updates
npx ncu                 # Show available updates
npx ncu -u              # Auto-write updates to package.json
npx ncu --target minor  # Only show minor updates

Renovate Bot Configuration

// renovate.json
{
  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
  "extends": ["config:best-practices"],
  "labels": ["dependencies"],
  "schedule": ["after 10pm and before 5am every weekday"],
  "packageRules": [
    {
      "matchUpdateTypes": ["patch"],
      "automerge": true,
      "automergeType": "pr"
    },
    {
      "matchUpdateTypes": ["minor"],
      "automerge": true,
      "automergeType": "pr",
      "requiredStatusChecks": ["ci/test", "ci/build"]
    },
    {
      "matchUpdateTypes": ["major"],
      "automerge": false,
      "labels": ["major-upgrade", "manual-review"]
    },
    {
      "matchPackageNames": ["typescript", "react", "next"],
      "automerge": false,
      "labels": ["core-dependency"]
    }
  ]
}

4. Major Framework Migration Guides

React 18 → 19

// Key breaking changes:
// 1. forwardRef no longer needed (ref is a regular prop)
// ❌ Before (React 18)
const Input = forwardRef<HTMLInputElement, Props>((props, ref) => (
  <input ref={ref} {...props} />
));

// ✅ After (React 19)
function Input({ ref, ...props }: Props & { ref?: React.Ref<HTMLInputElement> }) {
  return <input ref={ref} {...props} />;
}

// 2. useActionState replaces useFormState
// ❌ Before: import { useFormState } from 'react-dom'
// ✅ After:  import { useActionState } from 'react'

// 3. use() hook for promises and context
// ✅ New: const data = use(fetchPromise);
// ✅ New: const theme = use(ThemeContext);

Next.js 14 → 15

// Key changes:
// 1. params/searchParams are now async in page/layout/route
// ❌ Before: export default function Page({ params }: { params: { id: string } })
// ✅ After:  export default async function Page({ params }: { params: Promise<{ id: string }> }) {
//             const { id } = await params;

// 2. Caching: fetch() no longer cached by default
// ❌ Before: fetch() was cached by default
// ✅ After:  fetch(url, { cache: 'force-cache' }) for explicit caching

// 3. Route handlers: GET is no longer cached by default
// Add: export const dynamic = 'force-static' if you want caching

Tailwind CSS v3 → v4

/* Key changes: */
/* 1. Configuration moves from JS to CSS */
/* ❌ Before: tailwind.config.js with theme.extend */
/* ✅ After: @theme directive in CSS */

@import 'tailwindcss';

@theme {
  --color-primary: oklch(0.6 0.2 260);
  --font-sans: 'Inter', sans-serif;
  --breakpoint-sm: 40rem;
}

/* 2. No more @tailwind directives */
/* ❌ Before: @tailwind base; @tailwind components; @tailwind utilities; */
/* ✅ After:  @import 'tailwindcss'; */

/* 3. Renamed utilities */
/* ❌ Before: bg-opacity-50 */
/* ✅ After:  bg-black/50 */

5. Codemod Automation (jscodeshift)

// codemods/remove-forward-ref.ts
import type { API, FileInfo } from 'jscodeshift';

export default function removeForwardRef(fileInfo: FileInfo, api: API) {
  const j = api.jscodeshift;
  const root = j(fileInfo.source);

  // Find all forwardRef calls and transform them
  root.find(j.CallExpression, {
    callee: { name: 'forwardRef' },
  }).forEach((path) => {
    // Extract the inner component function
    const args = path.node.arguments;
    if (args.length > 0 && (args[0].type === 'ArrowFunctionExpression' || args[0].type === 'FunctionExpression')) {
      // Replace forwardRef(...) with the inner function
      j(path).replaceWith(args[0]);
    }
  });

  // Remove forwardRef import
  root.find(j.ImportSpecifier, { imported: { name: 'forwardRef' } }).remove();

  return root.toSource({ quote: 'single' });
}

// Run: npx jscodeshift -t codemods/remove-forward-ref.ts src/ --extensions=tsx,ts

6. Vulnerability Remediation

# Audit current state
pnpm audit                          # Show vulnerabilities
pnpm audit --fix                    # Auto-fix where possible

# For stubborn transitive dependencies
pnpm patch <package>@<version>      # Create a local patch
# or
pnpm overrides                      # Force specific version in package.json

# package.json — Force resolution
{
  "pnpm": {
    "overrides": {
      "vulnerable-package": ">=2.0.0"
    }
  }
}

7. Dependency Cleanup

# Find unused dependencies
npx depcheck                        # Detect unused deps
npx depcheck --ignores="@types/*"   # Ignore type packages

# Find duplicate packages
pnpm dedupe                         # Deduplicate lockfile
pnpm why <package>                  # See why a package is installed

# Monorepo: Align versions with pnpm catalogs
# pnpm-workspace.yaml
catalog:
  react: "^19.0.0"
  typescript: "^5.7.0"
  "@tanstack/react-query": "^5.60.0"

Common Pitfalls to Avoid

Integration with Other Skills

• monorepo-architect — pnpm catalogs, workspace dependency alignment
• vibe-code-gardener — Post-upgrade cleanup, dead code removal
• production-ready-hardener — Security audit phase
• ci-cd-devops-architect — Renovate Bot CI/CD integration
• e2e-testing-expert — Regression testing after major upgrades

Bahasa Indonesia

Integrasi Orkestrasi

Terhubung dan mengorkestrasi skill domain yang relevan seperti brainstorming, zero-to-prod-orchestrator, dan project-context-mapper untuk memastikan eksekusi yang kohesif.

Deskripsi

Panduan tingkat produksi untuk upgrade dependensi yang aman, migrasi melalui breaking change, dan pemeliharaan dependency tree yang sehat. Mencakup tooling upgrade otomatis (taze, Renovate Bot), panduan migrasi framework utama (React 18→19, Next.js 14→15, Tailwind v3→v4), otomasi codemod (jscodeshift, ts-morph), remediasi kerentanan (pnpm audit), kebersihan lockfile, dan penyelarasan dependensi monorepo (pnpm catalogs).

Kondisi Pemicu

Aktifkan skill ini ketika:

• Mengupgrade versi mayor framework (React, Next.js, Tailwind, dll).
• Menjalankan audit keamanan dan memperbaiki kerentanan.
• Menyiapkan bot update dependensi otomatis (Renovate, Dependabot).
• Menulis atau menjalankan codemod untuk migrasi API.
• Membersihkan dependency tree dan menghapus paket yang tidak digunakan.

Integrasi dengan Skill Lain

• monorepo-architect — pnpm catalogs, penyelarasan dependensi workspace
• vibe-code-gardener — Pembersihan pasca-upgrade, penghapusan dead code
• production-ready-hardener — Fase audit keamanan
• ci-cd-devops-architect — Integrasi Renovate Bot CI/CD
• e2e-testing-expert — Pengujian regresi setelah upgrade mayor