skills.rest
adobe
adobeOFFICIAL
Explore all skills by this author →
WebsiteGitHub

migrate-swc-gen1-to-gen2

Migrates Spectrum 1 sp-* web components to Spectrum 2 swc-* components.

1.5k|261|Updated Nov 19, 2018
Search Tags:#web components#spectrum#adobe#Design system#CSS custom properties#Migration#SWC
One-click install
npx skills add https://github.com/adobe/spectrum-web-components --skill migrate-swc-gen1-to-gen2
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: migrate-swc-gen1-to-gen2
Source: https://github.com/adobe/spectrum-web-components/tree/main/2nd-gen/packages/ai/skills/gen2-migration
Command: npx skills add https://github.com/adobe/spectrum-web-components --skill migrate-swc-gen1-to-gen2

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @adobe/spectrum-wc, and includes references (resource) components.

What problem does it solve?

Upgrading an application from Spectrum 1 web components (@spectrum-web-components/, sp- elements) to Spectrum 2 (@adobe/spectrum-wc, swc-* elements) involves package changes, theme bridging, font loading, tag renames, attribute renames, and CSS custom property remapping. This Skill guides that migration step by step while allowing both generations to coexist during the transition.

Core Features & Use Cases

  • Incremental coexistence migration: Gen 1 and Gen 2 components run side by side, so you can migrate one component or screen at a time instead of rewriting everything at once.
  • Per-component migration guides: Reference docs in references/components/ list renamed attributes, removed features, and --mod-* to --swc-* CSS custom property mappings for each component.
  • Theme and font bridging: Instructions cover switching sp-theme to the spectrum-two system, adding swc-theme classes, and loading the Adobe Clean Spectrum VF font.
  • Use Case: A team with an app built on @spectrum-web-components/badge and other sp-* elements wants to adopt Spectrum 2. The Skill walks them through installing @adobe/spectrum-wc, replacing tags and attributes component by component, validating with type checks and tests, and finally decommissioning Gen 1 packages.

Quick Start

Ask the assistant to migrate your project from Spectrum 1 sp-* components to Spectrum 2 swc-* components using this migration skill.

Frequently Asked Questions about migrate-swc-gen1-to-gen2

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate from Spectrum 1 to Spectrum 2 web components?▼

Install @adobe/spectrum-wc alongside existing @spectrum-web-components packages, switch sp-theme to the spectrum-two system, add the swc.css stylesheet and swc-theme classes, load the Adobe Clean Spectrum VF font, then replace sp-* tags with swc-* tags one component at a time following each component's migration guide.

Can Spectrum 1 and Spectrum 2 components coexist in the same app?▼

Yes, Gen 1 and Gen 2 coexist because sp-* and swc-* elements are independent custom elements. You can migrate one component or screen at a time and only remove Gen 1 packages once no sp-* elements remain.

What happens to --mod-* CSS custom properties in Spectrum 2?▼

Spectrum 2 replaces --mod-* overrides with --swc-* equivalents. Each component's migration guide includes a CSS custom property mapping table, and remaining --mod-* overrides should be removed when Gen 1 is decommissioned.

What if a component has no Spectrum 2 equivalent yet?▼

Components without a migration guide in references/components/ are still Gen 1 only. Keep the corresponding @spectrum-web-components package installed until a Gen 2 equivalent ships, and list them as remaining items in the final report.

Does the Spectrum 2 migration include framework upgrades like React?▼

No, major framework upgrades such as React version bumps are out of scope for this migration. They should be noted as recommended follow-ups in the final migration report instead of being performed during the component migration.

Related Skills

Explore More Software Engineering Skills→
cuongpt083cuongpt083
32

sp-coding-agent

Extract missing context across 9 SP-categories before executing file changes.

Community
Advanced
codeAbinashcodeAbinash
5

migrate-nativewind-to-uniwind

Migrate React Native projects from NativeWind to Uniwind with Tailwind 4 upgrade.

Community
Advanced
RoleModelRoleModel
6

theming-context

Override Optics tokens in a custom theme file for design system theming.

Official
Intermediate
adobeadobe
1.5k

consumer-migration-guide

Generate per-component consumer migration guides in MDX for Spectrum 1-to-2 upgrades.

Official
Advanced