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

migration-styling

Migrate CSS to 2nd-gen structure with Spectrum 2 tokens and stylelint conformance.

1.5k|257|Updated Nov 19, 2018
Search Tags:#css#migration#tokens#spectrum#stylelint#component-migration
One-click install
npx skills add https://github.com/adobe/spectrum-web-components --skill migration-styling
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: migration-styling
Source: https://github.com/adobe/spectrum-web-components/tree/main/.ai/skills/migration-styling
Command: npx skills add https://github.com/adobe/spectrum-web-components --skill migration-styling

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Phase 4 of 1st-gen to 2nd-gen component migration focused on migrating CSS to the 2nd-gen structure, applying Spectrum 2 tokens, and ensuring stylelint passes.

Core Features & Use Cases

  • Phase 4 styling migration for migrating CSS from 1st-gen to 2nd-gen and standardizing tokens.
  • Replace hard-coded values with Spectrum 2 tokens to improve consistency.
  • Verify and enforce stylelint conformance across migrated components.
  • Use Case: When preparing a batch of components for 2nd-gen, run this skill to update their CSS and token usage while maintaining compliance.

Quick Start

Use the migration-styling skill to migrate the CSS of the target component and apply Spectrum 2 tokens.

Frequently Asked Questions about migration-styling

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

FAQPage Schema
How do I migrate CSS to use Spectrum 2 tokens?▼

CSS migration to Spectrum 2 tokens replaces hard-coded values with standardized tokens and updates components to the 2nd-gen structure. This ensures styling consistency during Phase 4 component migration.

How do I ensure stylelint passes after migrating component CSS?▼

Stylelint conformance checks verify token usage and enforce linting rules across migrated components. Applying the 2nd-gen styling workflow during Phase 4 ensures your migrated CSS passes stylelint.

When do I need to apply 2nd-gen tokenized styling to components?▼

2nd-gen tokenized styling is applied during Phase 4 of the component migration workflow. This phase focuses on updating CSS structure, replacing hard-coded values with tokens, and verifying stylelint compliance.

Can I standardize hard-coded CSS values across multiple components at once?▼

Hard-coded CSS values are standardized across multiple components by running styling migration on a batch of 1st-gen components. This updates their CSS and token usage simultaneously while maintaining stylelint compliance.

What is the best way to update 1st-gen CSS structure to 2nd-gen?▼

Updating 1st-gen CSS to 2nd-gen is best achieved by following the Phase 4 workflow steps. This process applies token guidelines, replaces hard-coded values, and enforces stylelint conformance checks.

Related Skills

Explore More Software Engineering Skills→
niiiusburoniiiusburo

extract

Extract reusable UI components and design tokens from a codebase.

Community
Advanced
adobeadobe
1.5k

migration-testing

Automate Vitest, Playwright, and Storybook tests for migrated components.

Official
Intermediate
adobeadobe
1.5k

migration-setup

Scaffold SWC directory structure and stub files for export wiring.

Official
Intermediate
adobeadobe
1.5k

migration-a11y

Automate Phase 5 accessibility migration for Spectrum components with WCAG-aligned semantics and ARIA.

Official
Advanced