Skip to main content

Web Component Migration

The abyss-v2-migration-web skill migrates React code that consumes @uhg-abyss/web from v1 to v2, including import normalization, component renames, prop updates, and verification.

Tip

We recommend using Claude Sonnet 4.6 or higher for this skill.

What it does​

This skill handles web component migration by:

  • Detecting package version and setting correct import strategy
  • Normalizing import patterns (V2Component as Component for v1.x.x, canonical names for v2.x.x)
  • Migrating component names (e.g., Modal → ModalDialog)
  • Updating props and APIs for v2 compatibility
  • Detecting and updating wrapper components
  • Updating test files to match migrated components

When to use it​

Use this skill when:

  • Migrating web applications from Abyss v1.x.x to v2.x.x
  • Normalizing legacy V2-prefixed import patterns in 2.x.x
  • Updating wrapper components that re-export Abyss
Note

This skill is automatically invoked by the abyss-v2-migration orchestrator.

Prerequisites​

  • @uhg-abyss/web v1.x.x or v2.x.x

The skill auto-detects your package version and adjusts the migration strategy accordingly. If you're on v1.x.x, the skill will check if you're on the latest v1 version and recommend upgrading to ensure all V2 components are available.

  • Before installing this skill, ensure you have the Abyss CLI set up properly:
npx @uhg-abyss/cli -v

If the command fails, refer to the CLI Setup Guide for installation instructions.

Installation​

Install the skill:

npx @uhg-abyss/cli skills add abyss-v2-migration-web

Example prompts​

Once installed, you can use prompts like:

  • "Migrate the components in ./src to Abyss v2"
  • "Update my Abyss web components to v2"
  • "Normalize the V2 prefix imports in this directory"

Additional v2.x.x steps​

This skill handles component migrations only. Once v2.x.x is installed, you must also manually upgrade React 18+, update theming, migrate Stitches to Emotion, and upgrade React Router. See the complete web migration guide for details.

More information​

Table of Contents