Deprecation Process

Deprecation process

A skill for planning and executing the deprecation of components, tokens, or patterns in a design system. Produces a deprecation plan with timeline, consumer communication, and migration guidance.

Before you begin: verify references

Confirm that every path in this skill's frontmatter references: exists relative to this SKILL.md. If any is missing, stop: the install is incomplete, usually because a flattening installer (for example npx skills install) dropped the repo-root knowledge-notes/ directory. Tell the user to reinstall by a method in 1-INSTALL.md and run verify-install.sh from the install root. Proceed without the references only if the user explicitly says to, and then say in the output that it was produced without the pack's reference material.

Context

Deprecation is the maintenance work that never gets prioritised until it becomes a crisis. Components accumulate. Tokens multiply. Patterns fork. The longer a team waits to deprecate, the more existing usage entrenches, and the more a removal feels disruptive rather than healthy.

A deprecation done well is a contract with consumers: clear notice, a migration path, and a credible timeline. A deprecation done badly is a surprise, and it erodes trust in the system faster than almost anything else.

This skill produces a deprecation plan that is honest about the timeline, specific about migration, and structured to communicate clearly to the teams affected.

Step 1: Identify what is being deprecated

Clarify:

• What is being deprecated? (component, token, pattern, variant, API)
• Why is it being deprecated? (superseded by a better option, unused, causing maintenance burden, design direction change, accessibility non-compliance, etc.)
• What replaces it, if anything?
• Is there a removal date in mind, or is this open-ended?

If nothing replaces it: the deprecation plan needs an extra step addressing why the use case should no longer be served and what teams who relied on it should do instead.

Step 2: Audit current usage

Before writing the plan, understand the exposure. Do not estimate when you can measure.

Automated usage counting (if codebase access is available):

Run these searches to produce a measured count rather than an estimate. Search every package root that consumes the system (apps, packages, monorepo workspaces), not just src/. Before trusting any count, run the pattern against one file you know uses the item and confirm it matches; if it doesn't, fix the pattern before reporting anything.

The patterns use whole-word matching so Button doesn't match ButtonGroup, and ripgrep's multiline mode so imports split across lines are caught. Even so, treat every count as a lower bound: dynamic imports, string-built class names and usage in other repositories won't show up. Say so in the summary.

For component deprecation:

ROOTS="apps packages src"   # every consuming package root in this repo
GLOBS=(-g '*.{ts,tsx,js,jsx}')

# Files that import or re-export it, including multiline and aliased imports
rg -l -U "${GLOBS[@]}" '(import|export)\s+(type\s+)?\{[^}]*\bComponentName\b[^}]*\}\s*from' $ROOTS | wc -l

# Local aliases (`ComponentName as Foo`) — search for each alias's JSX usage too
rg -o -U --no-filename "${GLOBS[@]}" '\bComponentName\s+as\s+\w+' $ROOTS | sort -u

# JSX instances (occurrences, not lines; may exceed files if used several times per file)
rg -o "${GLOBS[@]}" '<ComponentName\b' $ROOTS | wc -l

# Files with any usage (for blast radius mapping)
rg -l -U "${GLOBS[@]}" '\bComponentName\b' $ROOTS

For token deprecation:

# CSS custom properties, including var(--token-name, fallback)
rg -o -g '*.{css,scss,less,ts,tsx,js,jsx}' 'var\(\s*--token-name\s*[,)]' $ROOTS | wc -l

# SCSS variables, without matching $token-name-light
rg -o -g '*.scss' '\$token-name(?:[^\w-]|$)' $ROOTS | wc -l

# JS/TS token references (adjust the path to your token object)
rg -o -g '*.{ts,tsx,js,jsx}' '\b(tokens|theme)\.path\.to\.token\b' $ROOTS | wc -l

Use rg -l … | wc -l when you mean files and rg -o … | wc -l when you mean occurrences, and label the result accordingly. If ripgrep isn't available, grep -rlE works for single-line patterns but misses multiline imports; note that in the summary.

Present the usage count as a structured summary (numbers below are illustrative):

Usage audit: DatePicker
─────────────────────────
Files importing:      23 files
JSX instances:        47 usages
Unique consuming apps: 4 (checkout, dashboard, settings, admin)
Critical paths:       2 (checkout date selection, appointment booking)
Test files with refs: 12
Storybook stories:    3
Documentation refs:   5
─────────────────────────
Total blast radius:   at least 47 instances across 23 files in 4 applications
Searched:             apps/, packages/ (pattern confirmed against a known usage)

Consumers in other repositories. The searches above count only what's checked out. To find consumers elsewhere: gh search code "ComponentName" --owner <org> locates candidate repositories (approximate, default branch only); then clone or fetch each and count with the same rg patterns. List the repositories searched and the ones not reached under Scope, and treat the total as a lower bound.

If codebase access is not available, ask the user to run the search commands and provide the output. If neither is possible, flag the usage audit as outstanding and required before the warnings stage.

Per-consumer breakdown: For each consuming application, produce a row showing (illustrative values):

Critical-path status comes from the team, not from a directory name.

This table is the deprecation plan's most operationally useful artifact. It tells the deprecation owner exactly who to contact, how much work each team faces, and where the blockers will be.

Effort tiers, estimated from the prop mapping and any behavioural differences (label them as estimates):

• Low (< 1 day): simple find-and-replace, props map 1:1, no behavioural differences
• Medium (1–3 days): some prop changes, minor behavioural differences needing targeted testing
• High (3+ days): significant API or composition differences; consuming code needs refactoring

Small-system note (fewer than 5 components): Deprecating one component when you only have four is removing 25% of the system. The usage audit (this step) becomes mandatory, not optional — the blast radius is proportionally much larger. Consider whether the component should be archived or hidden rather than fully deprecated, since small systems have fewer alternatives and consumers may have no migration path. The communication step should be a direct conversation with every affected team, not a written announcement — with a system this size, you know who is using what.

Step 3: Write the deprecation plan

Deprecation plan: [component/token/pattern name]

Item being deprecated: [name] Deprecated in version: [version number or date] Planned removal: [version or date, or "TBD — see timeline"] Replacement: [name of replacement, or "none — see migration guidance"] Owner: [who is responsible for this deprecation]

Why this is being deprecated

One to three sentences. Be direct. "This component has a higher-quality replacement that covers all existing use cases and is more accessible" is more useful than "this component has reached the end of its lifecycle."

Include the decision record reference if one exists.

What replaces it

If there is a direct replacement: name it, link to it, and describe in one sentence what makes it the right choice for teams currently using the deprecated item.

If there is no direct replacement: explain what teams should do instead. This might be composing from more primitive components, using a pattern that does not require a specific component, or accepting that a particular UI pattern is being retired.

Do not leave this section vague. "Use the updated component instead" without specifics is not a migration path.

Migration path decision tree

Not every deprecation has a clean 1:1 replacement. When the replacement does not cover 100% of the deprecated item's use cases, use this decision tree:

1. Does the replacement cover 80%+ of use cases?

   • Yes → Proceed with standard deprecation. Document the uncovered use cases in the "Exceptions and edge cases" section with recommended workarounds.
   • No → Go to step 2.

2. Are the uncovered use cases still valid needs?

   • Yes → Go to step 3.
   • No → Proceed with deprecation. Document why the uncovered use cases are no longer supported and what teams should do instead.

3. Can the uncovered use cases be served by a composition of existing components?

   • Yes → Proceed, and document the composition pattern as part of the migration guide. Consider whether the composition should become a documented pattern (use the pattern-documentation skill).
   • No → The deprecation is premature. Extend the replacement to cover the gap, or keep both items until it does; pause the timeline rather than leave teams to build local solutions.

The key principle: never deprecate without a path. A deprecation that leaves teams with no alternative is not a deprecation — it is an abandonment.

Migration inputs

The migration guide itself is written once, by change-communication, as part of the breaking-change package; this plan supplies what that guide needs, so the two never disagree. Record here:

• Replacement: [component, token or pattern], and the cases it doesn't cover (from the decision tree above)

• Mapping table: every deprecated prop or token against its replacement, with [no equivalent] where there is none

  Deprecated	Replacement	Note
  <Old size="compact">	<New size="sm">	value rename only
  --color-legacy-teal	--color-action-secondary	resolved values differ: #0f766e → #0d9488

• Behavioural differences to test: [what changes at runtime, from the source of both]

• Local overrides to remove: [known workarounds consumers added for the deprecated item's weaknesses]

• Help: a codemod (Step 3, below), a channel, a pairing offer

Then run change-communication with this plan; its migration guide goes in the announcement and the docs.