From vp-deps-shift
Replace one library with another (e.g., moment.js to date-fns, webpack to vite), or migrate deprecated API patterns within the same library (e.g., React 19 forwardRef removal, Vue 3 Options API to Composition API). Use when asked to "replace X with Y", "migrate from X to Y", "switch from X to Y", "swap X for Y", "convert from X to Y", "port from X to Y", "remove deprecated forwardRef", "migrate to new API", or when planning library replacement or API migration. Also trigger when the user mentions switching libraries, finding alternatives, or removing deprecated patterns. Boundary: for replacing libraries or migrating API patterns. Use deps-upgrade for version bumps within the same library.
How this skill is triggered — by the user, by Claude, or both
Slash command
/vp-deps-shift:deps-migrateThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Replace one library with another, or migrate deprecated API patterns within the same library.
Replace one library with another, or migrate deprecated API patterns within the same library.
Replace moment.js with date-fns
Migrate from webpack to vite
Remove deprecated forwardRef usage (React 19)
Switch from lodash to es-toolkit
Migrate Vue Options API to Composition API
| Type | Example | Trigger |
|---|---|---|
| Library replacement | moment.js → date-fns | "replace X with Y" |
| API pattern migration | React 19 forwardRef removal | "remove deprecated X", "migrate to new Y API" |
Both types follow the same test-first workflow below.
Non-linear execution: Phases are numbered for reference, not strict order. If findings in any phase invalidate earlier assumptions, restart from the affected phase.
For library replacement:
For API pattern migration:
Consult all sources (use subagents for parallel lookup when possible; see context7-integration.md):
Conflict resolution: If sources disagree on API equivalence or behavior, use the most conservative conclusion and flag the discrepancy.
Build an API mapping table:
| Source | Target | Notes |
|---|---|---|
moment().format('YYYY') | format(date, 'yyyy') | Different format tokens |
React.forwardRef((props, ref) => ...) | function Component({ ref, ...props }) | ref is now a regular prop |
See migration-patterns.md for methodology and common patterns.
Check for official/community migration tools before writing custom migrations:
For library replacement:
es-toolkit/compat for lodash
jscodeshift transforms from library authorsFor API pattern migration:
npx react-codemod rename-unsafe-lifecyclesnpx @angular/cli update, npx storybook automigrateDecision flow:
For library replacement:
@types/<source> exists → should be removed (scoped: @scope/pkg → @types/scope__pkg)@types/<target> or companion packages@types/ counterpart (e.g., react-dom → @types/react-dom)For API pattern migration:
Present findings and ask user whether to include.
Validate the migration approach before batch execution.
/tmp/deps-shift-verify-<package>-<timestamp>/
├── package.json # Minimal deps (target package only)
├── tsconfig.json # Copied from project, paths/aliases adjusted for /tmp
├── original/ # Copy of affected code snippets
├── migrated/ # Proposed migration applied
└── test-runner.sh # Must run tsc --noEmit at minimum, must NOT be just exit 0
Environment setup: Create a minimal package.json, install only the target package version fresh. Copy project's tsconfig.json; remove paths, baseUrl, and references fields that point to project-specific locations — /tmp resolves modules through its own node_modules only. Never mutate the project's actual node_modules.Fallback: When tests can't be written → subagent 3-pass review loop:
Present structured plan with confidence index:
Always get user confirmation before executing.
Note: Source library removal happens in Phase 8 after final verification passes. Do NOT remove it here — keeping it installed during verification ensures rollback is possible if issues are found.
Detect and follow project conventions (see repo-conventions.md):
package.json (if library replacement). If source is a transitive dep of other packages, it stays in lockfile — only remove the direct dependency| Error | Action |
|---|---|
| No direct API equivalent found | Document gap, ask user for custom wrapper or alternative approach |
| Codemod crashes partway | Report progress, show transformed files, suggest manual completion |
| Context7 MCP tool not found | Suggest installation, continue with community guides + code analysis |
| Type errors after migration | Analyze if source/target type mismatch, suggest type assertion or wrapper |
| Behavioral difference detected | Flag to user with before/after examples, get approval |
| Tests still fail after 3 iterations | Present failure analysis, ask user how to proceed |
| /tmp write fails | Fall back to subagent review |
gh CLI (for releases API), package manager CLI/plugin marketplace add upstash/context7deps-upgrade instead.Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
npx claudepluginhub vdustr/vp-claude-code-marketplace --plugin vp-deps-shift