deps-migrate
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.
What this skill does
# Dependency Migration
Replace one library with another, or migrate deprecated API patterns within the same library.
## Quick Start
> 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
## Scope
| 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.
## Workflow
> **Non-linear execution**: Phases are numbered for reference, not strict order. If findings in any phase invalidate earlier assumptions, restart from the affected phase.
### Phase 1: Environment Analysis
- Detect package manager from lockfile (see [package-managers.md](references/package-managers.md))
- Detect monorepo structure
- Detect CI, hooks, changeset config (see [repo-conventions.md](references/repo-conventions.md))
- Detect test infrastructure (test runner, tsconfig.json, linter)
### Phase 2: Identify Migration Target
**For library replacement:**
- Parse source library (to remove) and target library (to add)
- Detect current usage scope: grep for imports/requires of source library
- Count affected files and usage patterns
**For API pattern migration:**
- Identify deprecated/removed API pattern
- Scan all occurrences in codebase
- Identify the replacement pattern from docs
### Phase 3: Documentation & Compatibility Analysis
Consult all sources (use subagents for parallel lookup when possible; see [context7-integration.md](references/context7-integration.md)):
1. **Context7** → Query both libraries for API comparison, migration guides
2. **Community resources** → Search for known migration guides
3. **Code analysis** → Map source API usage to target equivalents
**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](references/migration-patterns.md) for methodology and common patterns.
### Phase 3.5: Official Tools & Compat Layer Detection
Check for official/community migration tools **before** writing custom migrations:
**For library replacement:**
- **Compat layer** — e.g., `es-toolkit/compat` for lodash
- Ask user: "Use compat for gradual migration, or full replacement?"
- Compat-first: swap import paths → verify → optionally migrate to native API later
- **Codemods** — e.g., `jscodeshift` transforms from library authors
**For API pattern migration:**
- **Official codemods** — e.g., `npx react-codemod rename-unsafe-lifecycles`
- **Framework CLI migration** — e.g., `npx @angular/cli update`, `npx storybook automigrate`
Decision flow:
- **Codemod exists** → run codemod first, handle remaining manually
- **Compat layer available** → ask user preference (gradual vs full)
- **Neither** → proceed to Phase 4
### Phase 3.7: Related Package Detection
**For library replacement:**
- Check if `@types/<source>` exists → should be removed (scoped: `@scope/pkg` → `@types/scope__pkg`)
- Check if target requires `@types/<target>` or companion packages
- For each related package found, also check for its `@types/` counterpart (e.g., react-dom → @types/react-dom)
- Check for related plugins/adapters referencing the source library
**For API pattern migration:**
- Usually no related packages needed, but check for community wrappers
Present findings and ask user whether to include.
### Phase 4: Test-First Verification
Validate the migration approach **before** batch execution.
1. **Scan all usage** — comprehensive grep for all patterns to migrate
2. **Write test diffs in /tmp** — pick representative examples (not all files):
- Select 2-3 diverse usage patterns (simple, complex, edge case). If more than 10 distinct patterns exist, sample at least 30% and reflect actual coverage in the confidence index
- Create migrated versions in /tmp
- Run type check + tests against migrated snippets
```
/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`.
3. **Verify approach works** before committing to full migration
4. **Pass** → proceed to Phase 5
5. **Fail** → iterate (max 3 attempts), then present failure analysis
**Fallback**: When tests can't be written → subagent 3-pass review loop:
- Pass 1 (Direct): correctness of API mapping, import resolution
- Pass 2 (Best Practice): idiomatic target library usage
- Pass 3 (Critical Think): edge cases, behavioral differences, risks
- Fix + loop until all passes clean
### Phase 5: Migration Plan & Confidence Index
Present structured plan with [confidence index](references/confidence-index.md):
- File-by-file change summary
- API mapping table (validated by Phase 4)
- Potential issues / no direct equivalent
- Confidence index with factor breakdown and boost options
- Repo convention actions
**Always get user confirmation before executing.**
### Phase 6: Execute Migration
1. Install target library (if library replacement)
2. Apply transformations file by file using validated mapping
3. **Checkpoint**: Verify all files have been transformed — grep for remaining source library imports. If any remain, do NOT proceed to removal
4. **Check for peer dependency conflicts** — present options if found
5. Clean up unused imports/types
6. Clean up /tmp verification files
**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.
### Phase 7: Repo Convention Compliance
Detect and follow project conventions (see [repo-conventions.md](references/repo-conventions.md)):
- Changesets → create changeset file
- Conventional commits → follow format
- CI checks → run matching local commands
- Pre-commit hooks → ensure hooks pass
- Custom scripts → run test, lint, typecheck
### Phase 8: Final Verification
1. Type check → 2. Lint → 3. Test suite → 4. Build
5. For complex migrations: run subagent Pass 3 (Critical Think) as final quality gate
6. **After all checks pass**: Remove source library from `package.json` (if library replacement). If source is a transitive dep of other packages, it stays in lockfile — only remove the direct dependency
7. Run install to update lockfile after removal
- All pass → report success
- Failures → analyze if migration-related, attempt fix, present remaining to user (source library is still installed, so rollback is straightforward)
## Guidelines
### DO
- **Build a complete API mapping table** — map every source API to target equivalent before migrating
- **Check for official codemods first** — search npm registry and migration guides before writing custom transforms
- **Offer compat layers when available** — ask user preference (gradual vs full), never assume
- **Test migration approach in /tmp first** — validate on representative samples before batchRelated in Web Dev
generating-lwc-components
IncludedLightning Web Components with PICKLES methodology and 165-point scoring. Use this skill when the user creates or edits LWC components, builds wire service patterns, or writes Jest tests for LWC. TRIGGER when: user creates/edits LWC components, touches lwc/**/*.js, .html, .css, .js-meta.xml files, or asks about wire service, SLDS, or Jest LWC tests. DO NOT TRIGGER when: Apex classes (use generating-apex), Aura components, or Visualforce.
tanstack-query
IncludedManage server state in React with TanStack Query v5. Set up queries with useQuery, mutations with useMutation, configure QueryClient caching strategies, implement optimistic updates, and handle infinite scroll with useInfiniteQuery. Use when: setting up data fetching in React projects, migrating from v4 to v5, or fixing object syntax required errors, query callbacks removed issues, cacheTime renamed to gcTime, isPending vs isLoading confusion, keepPreviousData removed problems.
document-processor-api
IncludedProcess documents with Nutrient DWS. Use when the user wants to generate PDFs from HTML or URLs, convert Office/images/PDFs, assemble or split packets, OCR scans, extract text/tables/key-value pairs, redact PII, watermark, sign, fill forms, optimize PDFs, or produce compliance outputs like PDF/A or PDF/UA. Triggers include convert to PDF, merge these PDFs, OCR this scan, extract tables, redact PII, sign this PDF, make this PDF/A, or linearize for web delivery.
nutrient-document-processing
IncludedProcess documents with Nutrient DWS. Use when the user wants to generate PDFs from HTML or URLs, convert Office/images/PDFs, assemble or split packets, OCR scans, extract text/tables/key-value pairs, redact PII, watermark, sign, fill forms, optimize PDFs, or produce compliance outputs like PDF/A or PDF/UA. Triggers include convert to PDF, merge these PDFs, OCR this scan, extract tables, redact PII, sign this PDF, make this PDF/A, or linearize for web delivery.
tanstack-query
IncludedManage server state in React with TanStack Query v5. Covers useMutationState, simplified optimistic updates, throwOnError, network mode (offline/PWA), and infiniteQueryOptions. Use when setting up data fetching, fixing v4→v5 migration errors (object syntax, gcTime, isPending, keepPreviousData), or debugging SSR/hydration issues with streaming server components.
accelint-nextjs-best-practices
IncludedNext.js performance optimization and best practices. Use when writing Next.js code (App Router or Pages Router); implementing Server Components, Server Actions, or API routes; optimizing RSC serialization, data fetching, or server-side rendering; reviewing Next.js code for performance issues; fixing authentication in Server Actions; or implementing Suspense boundaries, parallel data fetching, or request deduplication.