uplifting-components-to-slds2

SKILL.md

Goal

Systematically migrate Lightning Web Components from SLDS 1 to SLDS 2 using the SLDS linter and structured guidance for fixing violations across all styling hook categories.

SLDS 2 Styling Hook Categories

Category
Hook Prefix
What It Replaces

Color
--slds-g-color-*
Hardcoded colors, --lwc-color* tokens

Spacing
--slds-g-spacing-*
Hardcoded margins, padding, gaps

Sizing
--slds-g-sizing-*
Hardcoded widths, heights, dimensions

Typography
--slds-g-font-*
Hardcoded font sizes, weights, line heights

Border/Radius
--slds-g-radius-border-*, --slds-g-sizing-border-*
Hardcoded border-radius, border-width

Shadow
--slds-g-shadow-*
Hardcoded box-shadow values

Color hooks require the most judgment (context-dependent selection). Non-color hooks are mostly numbered scales with straightforward mappings.

Prerequisites