skills.rest
angryracoon
angryracoonCOMMUNITY
Explore all skills by this author →
GitHub

design-systems-slds2-migrate

Migrate Lightning Web Components from SLDS 1 to SLDS 2 styling.

Updated Jun 17, 2026
Search Tags:#migration#salesforce#linter#slds#lwc#styling-hooks
One-click install
npx skills add https://github.com/angryracoon/ARIEF-VISEO-DEV-ORG --skill design-systems-slds2-migrate
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-systems-slds2-migrate
Source: https://github.com/angryracoon/ARIEF-VISEO-DEV-ORG/tree/main/.agents/skills/design-systems-slds2-migrate
Command: npx skills add https://github.com/angryracoon/ARIEF-VISEO-DEV-ORG --skill design-systems-slds2-migrate

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill removes the manual burden of migrating Lightning Web Components from SLDS 1 styling patterns to SLDS 2, especially when a repository contains linter warnings, deprecated design tokens, hardcoded CSS values, or SLDS class overrides.

Core Features & Use Cases

  • Linter-guided migration: Runs through SLDS violation types and applies the correct fix strategy for each one.
  • Hook selection with context: Chooses the right surface, container, accent, feedback, or non-color hook based on component structure and markup semantics.
  • Markup and CSS updates: Renames overridden SLDS classes in CSS and updates the corresponding HTML classes without removing the original SLDS classes.
  • Fallback-preserving replacements: Replaces deprecated tokens and hardcoded values while preserving the original value as a fallback for compatibility.
  • Use case: A team upgrading an Aura or LWC component library can use this Skill to systematically clear SLDS 2 violations and validate the result with repeatable lint checks.

Quick Start

Ask this skill to migrate the selected Lightning Web Components to SLDS 2 and return the updated CSS and markup with valid styling hook fallbacks.

Frequently Asked Questions about design-systems-slds2-migrate

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

FAQPage Schema
How do I migrate Lightning Web Components from SLDS 1 to SLDS 2?▼

Migrate Lightning Web Components from SLDS 1 to SLDS 2 by resolving linter styling violations, replacing deprecated tokens, and updating hardcoded CSS values with context-aware styling hooks. The process updates both CSS and markup while preserving original values as fallbacks.

What are styling hooks in SLDS 2 and when do I need them for LWC migration?▼

Styling hooks in SLDS 2 are custom properties used to standardize component styling during LWC migration. You need them when replacing deprecated Aura tokens, legacy LWC tokens, or hardcoded CSS values to ensure exact fallback preservation and clear linter warnings.

How do I resolve SLDS linter warnings for deprecated design tokens and class overrides?▼

Resolve SLDS linter warnings by iteratively running lint validation and applying targeted fix strategies for each violation type. This involves renaming overridden SLDS classes in CSS, updating corresponding HTML classes, and replacing deprecated tokens while preserving original values as fallbacks until zero errors remain.

Can I use automated SLDS migration for a large Aura or LWC component library?▼

Yes, you can use automated SLDS migration for a large Aura or LWC component library to systematically clear SLDS 2 violations. It selects the correct surface, container, accent, feedback, or non-color hook based on component structure and markup semantics, validating results with repeatable lint checks.

How do I replace hardcoded CSS values in LWC without breaking existing styling?▼

Replace hardcoded CSS values in LWC by applying context-aware styling hooks while preserving the original hardcoded value as a fallback. This ensures compatibility across components and prevents breaking existing styling during the SLDS 2 migration process.

Related Skills

Explore More Software Engineering Skills→
forcedotcomforcedotcom
803

uplifting-components-to-slds2

Migrate LWC styling from SLDS 1 to SLDS 2 with hook-based replacements.

Official
Intermediate
padjeipadjei

design-systems-slds2-migrate

Migrate Lightning Web Components from SLDS 1 to SLDS 2 with linter checks and guidance.

Community
Advanced
cchrisvcchrisv

uplifting-components-to-slds2

Migrate Lightning Web Components from SLDS 1 to SLDS 2 with lint-guided fixes.

Community
Advanced
dmckeeSFdmckeeSF

uplifting-components-to-slds2

Migrate Lightning Web Components from SLDS 1 to SLDS 2 styling hooks.

Community
Advanced