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

Ready to run

npx skills add https://github.com/adobe/spectrum-web-components --skill migration-styling

💬 Prompt for ChatGPT / Claude Chat▼

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.