git:20260913.4cedcda to v3.0.0

+ ---

+ name: dependency-upgrade-migrator

+ description: "Expert guide for dependency upgrades, breaking change migrations, codemod automation, and package audit remediation / Panduan ahli untuk upgrade dependensi, migrasi breaking change, otomasi codemod, dan remediasi audit paket."

+ author: "Roedy Rustam"

+ version: "3.0.0"

+ ---

+

+ # Dependency Upgrade Migrator (2026 Edition)

+

+ [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)

+

+ ---

+

+ <a name="english"></a>

+ ## English

+

+ ### Orchestration & Integration

+ Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `session-memory-manager` 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

+

+ | Upgrade Type | Risk Level | Strategy | Tools |

+ |---|---|---|---|

+ | **Patch** (1.0.x) | 🟢 Low | Auto-merge after tests pass | Renovate, Dependabot |

+ | **Minor** (1.x.0) | 🟡 Medium | Auto-merge with manual review | Renovate + test suite |

+ | **Major** (x.0.0) | 🔴 High | Manual review, migration guide, branch | Manual + codemods |

+ | **Security** (any) | 🔴 Critical | Immediate upgrade, hotfix | `npm audit fix`, manual |

+

+ ---

+

+ ### 2. Pre-Upgrade Checklist

+

+ ```markdown

+ - [ ] 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

+ ```bash

+ # 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

+ ```json

+ // 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

+ ```typescript

+ // 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

+ ```typescript

+ // 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

+ ```css

+ /* 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)

+

+ ```typescript

+ // 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

+

+ ```bash

+ # 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

+

+ ```bash

+ # 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

+

+ | Anti-Pattern | Problem | Correct Approach |

+ |---|---|---|

+ | Upgrading all deps at once | Hard to identify breaking changes | Upgrade one major dep at a time |

+ | Ignoring peer dependency warnings | Runtime errors, subtle bugs | Resolve all peer dep conflicts |

+ | No test suite before upgrading | Can't verify nothing broke | Ensure tests pass before AND after |

+ | `npm audit fix --force` blindly | Can introduce breaking changes | Review each fix manually for major bumps |

+ | Skipping changelogs | Missing breaking changes | Always read CHANGELOG/migration guide |

+ | No lockfile in version control | Non-reproducible builds | Always commit `pnpm-lock.yaml` |

+

+ ---

+

+ ### 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

+

+ ---

+

+ <a name="bahasa-indonesia"></a>

+ ## Bahasa Indonesia

+

+ ### Integrasi Orkestrasi

+ Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` 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