Design Systems Slds2 Migrate

This walks you through migrating Lightning Web Components from SLDS 1 to SLDS 2, which is honestly more tedious than difficult. It runs the SLDS linter first (mandatory step), then guides you through fixing the four violation types: hardcoded values, deprecated LWC tokens, class overrides, and legacy token syntax. The color hook selection requires actual thought since context matters, but spacing, sizing, and typography are just numbered scales. The class override fixes trip people up because you need to update both CSS and markup, keeping the original SLDS class in the HTML. Includes validation checklists and repeats the linter loop until you hit zero errors.

skills.sh installs: 5.7K
GitHub stars: 1.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add forcedotcom/sf-skills --skill design-systems-slds2-migrate --agent claude-code

Installs into .claude/skills of the current project.

Files

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