design-systems-slds2-migrate
Installation
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.