design-systems-slds2-migrate

Name: design-systems-slds2-migrate
Author: forcedotcom

1.9kinstalls272forks

How to install design-systems-slds2-migrate?

forcedotcom/sf-skills/design-systems-slds2-migrate

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

Installs into the current project.

Summary

Migrate Lightning Web Components from SLDS 1 to SLDS 2 by running the SLDS linter and fixing violations. Use this skill whenever users mention SLDS 2, SLDS uplift, linter violations, LWC token migration, class overrides, hardcoded CSS values that need SLDS hook replacement, or st

Files · 1

View on GitHub

SKILL.md

1	# Goal
2
3	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.
4
5	## SLDS 2 Styling Hook Categories
6
7	\| Category \| Hook Prefix \| What It Replaces \|
8	\|---\|---\|---\|
9	\| Color \| `--slds-g-color-` \| Hardcoded colors, `--lwc-color` tokens \|
10	\| Spacing \| `--slds-g-spacing-*` \| Hardcoded margins, padding, gaps \|
11	\| Sizing \| `--slds-g-sizing-*` \| Hardcoded widths, heights, dimensions \|
12	\| Typography \| `--slds-g-font-*` \| Hardcoded font sizes, weights, line heights \|
13	\| Border/Radius \| `--slds-g-radius-border-`, `--slds-g-sizing-border-` \| Hardcoded border-radius, border-width \|
14	\| Shadow \| `--slds-g-shadow-*` \| Hardcoded box-shadow values \|
15
16	Color hooks require the most judgment (context-dependent selection). Non-color hooks are mostly numbered scales with straightforward mappings.
17
18	## Prerequisites
19
20	- Node.js 14.x or higher installed
21	- Access to component CSS and markup files (`.html` for LWC, `.cmp` for Aura)
22	- Terminal/command line access to run linter
23	- Git repository for backup (recommended)
24
25	---
26
27	# Workflow
28
29	```
30	1. REQUIRED — ALWAYS run first: npx @salesforce-ux/slds-linter@latest lint --fix . — NEVER skip this step. This handles simple violations automatically.
31	2. Review linter output -> Identify remaining manual fixes needed
32	3. Fix by violation type -> Use per-rule reference guides
33	4. Choose the right hook -> Context-first, inspect HTML before deciding
34	5. Validate -> Re-run linter and confirm zero errors
35	```
36
37	## Step 1: Run SLDS Linter
38	MANDATORY: This step is NOT optional.
39
40	```bash
41	npx @salesforce-ux/slds-linter@latest lint --fix .
42	```
43
44	The linter analyzes all CSS and markup files (`.html` for LWC, `.cmp` for Aura), auto-fixes simple violations, and reports remaining issues requiring manual intervention.
45
46	## Step 2: Analyze Linter Output
47
48	The linter reports violations in this format:
49
50	```
51	componentName.css
52	15:3 warning Overriding slds-button isn't supported. To differentiate SLDS and
53	custom classes, create a CSS class in your namespace.
54	Examples: myapp-input, myapp-button. slds/no-slds-class-overrides
55
56	23:5 error The '--lwc-colorBackground' design token is deprecated. Replace it with
57	the SLDS 2 styling hook and set the fallback to '--lwc-colorBackground'.
58	1. --slds-g-color-surface-2
59	2. --slds-g-color-surface-container-2 slds/lwc-token-to-slds-hook
60
61	30:8 warning Consider replacing the #ffffff static value with an SLDS 2 styling hook
62	that has a similar value:
63	1. --slds-g-color-surface-1
64	2. --slds-g-color-surface-container-1
65	3. --slds-g-color-on-accent-1
66	4. --slds-g-color-on-accent-2
67	5. --slds-g-color-on-accent-3 slds/no-hardcoded-values-slds2
68
69	31:15 error Consider removing t(fontSizeMedium) or replacing it with
70	var(--slds-g-font-size-base, var(--lwc-fontSizeMedium, 0.8125rem)).
71	Set the fallback to t(fontSizeMedium). For more info, see
72	Styling Hooks on lightningdesignsystem.com. slds/no-deprecated-tokens-slds1
73	```
74
75	Four violation types, each with its own fix approach (see Step 3).
76
77	Important: The linter flags all hardcoded values. Fix color, spacing, sizing, typography, border, and shadow values — but skip layout values (`100%`, `auto`, `0`, `inherit`, `none`). See [rule-no-hardcoded-values.md](references/rule-no-hardcoded-values.md) for the full fix-vs-skip triage table.
78
79	## Step 3: Fix Violations by Type
80
81	Each rule has a dedicated reference guide with full examples and decision logic:
82
83	\| Violation Rule \| Quick Summary \| Reference \|
84	\|---\|---\|---\|
85	\| `slds/no-hardcoded-values-slds2` \| Replace hardcoded values with SLDS hook + original as fallback \| [rule-no-hardcoded-values.md](references/rule-no-hardcoded-values.md)\|
86	\| `slds/lwc-token-to-slds-hook` \| Replace `--lwc-*` tokens with SLDS 2 hook, keep LWC token as fallback \| [rule-lwc-token-to-slds-hook.md](references/rule-lwc-token-to-slds-hook.md) \|
87	\| `slds/no-slds-class-overrides` \| Create component-p

People who liked this also viewed

6 picks

Type

design-systems-slds2-migrate

1.9kinstalls272forks

View on GitHub

How to install design-systems-slds2-migrate?

forcedotcom/sf-skills/design-systems-slds2-migrate

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Goal
2
3	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.
4
5	## SLDS 2 Styling Hook Categories
6
7	\| Category \| Hook Prefix \| What It Replaces \|
8	\|---\|---\|---\|
9	\| Color \| `--slds-g-color-` \| Hardcoded colors, `--lwc-color` tokens \|
10	\| Spacing \| `--slds-g-spacing-*` \| Hardcoded margins, padding, gaps \|
11	\| Sizing \| `--slds-g-sizing-*` \| Hardcoded widths, heights, dimensions \|
12	\| Typography \| `--slds-g-font-*` \| Hardcoded font sizes, weights, line heights \|
13	\| Border/Radius \| `--slds-g-radius-border-`, `--slds-g-sizing-border-` \| Hardcoded border-radius, border-width \|
14	\| Shadow \| `--slds-g-shadow-*` \| Hardcoded box-shadow values \|
15
16	Color hooks require the most judgment (context-dependent selection). Non-color hooks are mostly numbered scales with straightforward mappings.
17
18	## Prerequisites
19
20	- Node.js 14.x or higher installed
21	- Access to component CSS and markup files (`.html` for LWC, `.cmp` for Aura)
22	- Terminal/command line access to run linter
23	- Git repository for backup (recommended)
24
25	---
26
27	# Workflow
28
29	```
30	1. REQUIRED — ALWAYS run first: npx @salesforce-ux/slds-linter@latest lint --fix . — NEVER skip this step. This handles simple violations automatically.
31	2. Review linter output -> Identify remaining manual fixes needed
32	3. Fix by violation type -> Use per-rule reference guides
33	4. Choose the right hook -> Context-first, inspect HTML before deciding
34	5. Validate -> Re-run linter and confirm zero errors
35	```
36
37	## Step 1: Run SLDS Linter
38	MANDATORY: This step is NOT optional.
39
40	```bash
41	npx @salesforce-ux/slds-linter@latest lint --fix .
42	```
43
44	The linter analyzes all CSS and markup files (`.html` for LWC, `.cmp` for Aura), auto-fixes simple violations, and reports remaining issues requiring manual intervention.
45
46	## Step 2: Analyze Linter Output
47
48	The linter reports violations in this format:
49
50	```
51	componentName.css
52	15:3 warning Overriding slds-button isn't supported. To differentiate SLDS and
53	custom classes, create a CSS class in your namespace.
54	Examples: myapp-input, myapp-button. slds/no-slds-class-overrides
55
56	23:5 error The '--lwc-colorBackground' design token is deprecated. Replace it with
57	the SLDS 2 styling hook and set the fallback to '--lwc-colorBackground'.
58	1. --slds-g-color-surface-2
59	2. --slds-g-color-surface-container-2 slds/lwc-token-to-slds-hook
60
61	30:8 warning Consider replacing the #ffffff static value with an SLDS 2 styling hook
62	that has a similar value:
63	1. --slds-g-color-surface-1
64	2. --slds-g-color-surface-container-1
65	3. --slds-g-color-on-accent-1
66	4. --slds-g-color-on-accent-2
67	5. --slds-g-color-on-accent-3 slds/no-hardcoded-values-slds2
68
69	31:15 error Consider removing t(fontSizeMedium) or replacing it with
70	var(--slds-g-font-size-base, var(--lwc-fontSizeMedium, 0.8125rem)).
71	Set the fallback to t(fontSizeMedium). For more info, see
72	Styling Hooks on lightningdesignsystem.com. slds/no-deprecated-tokens-slds1
73	```
74
75	Four violation types, each with its own fix approach (see Step 3).
76
77	Important: The linter flags all hardcoded values. Fix color, spacing, sizing, typography, border, and shadow values — but skip layout values (`100%`, `auto`, `0`, `inherit`, `none`). See [rule-no-hardcoded-values.md](references/rule-no-hardcoded-values.md) for the full fix-vs-skip triage table.
78
79	## Step 3: Fix Violations by Type
80
81	Each rule has a dedicated reference guide with full examples and decision logic:
82
83	\| Violation Rule \| Quick Summary \| Reference \|
84	\|---\|---\|---\|
85	\| `slds/no-hardcoded-values-slds2` \| Replace hardcoded values with SLDS hook + original as fallback \| [rule-no-hardcoded-values.md](references/rule-no-hardcoded-values.md)\|
86	\| `slds/lwc-token-to-slds-hook` \| Replace `--lwc-*` tokens with SLDS 2 hook, keep LWC token as fallback \| [rule-lwc-token-to-slds-hook.md](references/rule-lwc-token-to-slds-hook.md) \|
87	\| `slds/no-slds-class-overrides` \| Create component-p

People who liked this also viewed

6 picks

Type