Skip to main content

Component Tokens Migration (Web)

The abyss-v2-component-tokens-web skill provides AI-guided migration for v1 component token names to v2 format in web applications. Removes the V2 suffix and converts to dot notation.

Context: In Abyss v1.x.x, component token names required a V2 suffix (e.g., buttonV2-color-text-primary) to avoid naming conflicts with legacy tokens from earlier versions. When v2.x.x was released, these legacy tokens were removed, so the V2 suffix is no longer needed and has been dropped from all component token names.

Additionally, v1.x.x used Stitches for styling, which required kebab-case token names in createTheme() configurations. v2.x.x migrates to Emotion, which supports cleaner dot notation (e.g., button.color.text.primary instead of buttonV2-color-text-primary). For backwards compatibility, v2.x.x still accepts the v1.x.x kebab-case format, but dot notation is now the recommended standard.

What it does​

This skill helps your AI agent understand and execute component token migrations:

  • Guides you through the migration process
  • Transforms v1 component token names (buttonV2-color-text-primary) to v2 format (button.color.text.primary)

When to use it​

Use this skill when:

  • Migrating from Abyss v1.x.x to v2.x.x and your application is using "V2" suffixed component token overrides that need to be updated to the new v2 format.

Note: This skill is automatically invoked by the abyss-v2-migration orchestrator when needed.

Prerequisites​

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

Installation​

npx @uhg-abyss/cli skills add abyss-v2-component-tokens-web

Example prompts​

Once installed, you can use prompts like:

  • "How do I migrate my component tokens to v2?"
  • "I have buttonV2-color-text-primary in my theme, what should it be in v2?"
  • "Can you help me run the component token migration?"

Example transformation​

// Before
'buttonV2-color-text-primary' → 'button.color.text.primary'
'accordionV2-borderWidth-bottom-container' → 'accordion.border-width.bottom.container'

More information​

Table of Contents