design-systems-slds-validate

Name: design-systems-slds-validate
Author: forcedotcom

1.9kinstalls272forks

How to install design-systems-slds-validate?

forcedotcom/sf-skills/design-systems-slds-validate

$npx -y skills add forcedotcom/sf-skills --skill design-systems-slds-validate

Installs into the current project.

Summary

Audit Lightning Web Components for SLDS compliance and produce a scored quality report. Runs the SLDS linter, analyzes CSS for theming hook usage and pairing, checks HTML for accessibility attributes, and scores findings across categories into an overall grade. Use when asked to

Files · 1

View on GitHub

SKILL.md

1	# SLDS Quality Audit
2
3	Audit Lightning Web Components for SLDS compliance and produce an automated scorecard plus a required manual review gate. Combines SLDS linter output with supplementary static analysis to catch what the linter misses.
4
5	## Scope
6
7	Also valid for: auditing SLDS compliance across a project or component set, and before/after quality comparison after making changes.
8
9	Not for:
10	- Fixing linter violations — use `design-systems-slds2-migrate` instead
11	- Building new components — use `design-systems-slds-apply` instead
12	- Just running the linter — run `npx @salesforce-ux/slds-linter@latest lint .` directly
13	- Full WCAG accessibility audit — this skill checks attribute presence only (labels, alt text, focus indicators), not contrast ratios, keyboard flows, or screen reader behavior
14	- Framework-specific template auditing beyond `.css`, `.html`, and `.js` files — JSX/TSX/Vue/Svelte outputs need additional manual review
15
16	---
17
18	## Quality Validation Process
19
20	```
21	1. Run SLDS Linter → Collect violation counts (linter's job)
22	2. Run Analyze Script → Check what linter doesn't cover (supplementary)
23	3. Agent Review → Required manual review gate
24	4. Score & Grade → Compute automated score + final recommendation
25	5. Generate Report → Produce formatted scorecard
26	```
27
28	## Step 1: Run SLDS Linter
29
30	Run the linter to collect baseline violation data:
31
32	```bash
33	npx @salesforce-ux/slds-linter@latest lint <component-path> 2>&1
34	```
35
36	Count violations by rule. These feed directly into the Linter Compliance score:
37
38	\| Rule \| Impact \|
39	\|------\|--------\|
40	\| `slds/class-override` \| Breaks theming, dark mode \|
41	\| `slds/lwc-token-to-slds-hook` \| SLDS 1 technical debt \|
42	\| `slds/no-hardcoded-values` \| Breaks theming, accessibility \|
43
44	Linter Compliance Score = `100 - (total_violations × 10)`, minimum 0.
45
46	If the linter is unavailable (no Node.js, no network access, CI sandbox restrictions): skip this step, note "Linter not run" in the report header, mark Linter Compliance as N/A, and compute the Overall score using the remaining 4 categories renormalized to 100%:
47
48	```
49	Overall (linter unavailable) = (Theming × 0.29) + (Accessibility × 0.29)
50	+ (CodeQuality × 0.21) + (ComponentUsage × 0.21)
51	```
52
53	## Step 2: Run Supplementary Analysis
54
55	Run the analyze script to catch issues the linter doesn't cover. The bundled analyzer scans `.css`, `.html`, and `.js` files only:
56
57	```bash
58	node scripts/analyze-quality.cjs <component-path>
59	```
60
61	The script outputs JSON with findings organized by severity. It checks:
62
63	### CSS Checks (linter-complementary)
64
65	\| Check \| What It Catches \| Severity \|
66	\|-------\|----------------\|----------\|
67	\| Missing fallbacks \| `var(--slds-g-*)` without a fallback value \| Critical \|
68	\| Invented hooks (T051) \| `--slds-g-*` tokens not found in `hooks-index.json` (requires `--hooks-index`) \| Critical \|
69	\| Hook pairing \| Background hooks without matching foreground hooks \| Warning \|
70	\| `!important` \| Specificity overrides \| Warning \|
71	\| Magic pixel values \| Hardcoded `px` not using spacing hooks \| Warning \|
72	\| High z-index \| z-index values > 99 \| Warning \|
73	\| Outline removal \| `outline: none` without alternative focus style \| Warning \|
74
75	### JS Checks
76
77	\| Check \| What It Catches \| Severity \|
78	\|-------\|----------------\|----------\|
79	\| Inline style assignment \| `.style.*=` direct property assignment \| Warning \|
80	\| SLDS class manipulation \| Dynamic `.classList.add('slds-*')` manipulation \| Warning \|
81
82	### HTML Checks
83
84	\| Check \| What It Catches \| Severity \|
85	\|-------\|----------------\|----------\|
86	\| LBC input labels \| `<lightning-input>` without `label` attribute \| Critical \|
87	\| Icon alt text \| `<lightning-icon>` without `alternative-text` \| Critical \|
88	\| Image alt text \| `<img>` without `alt` \| Critical \|
89	\| Heading hierarchy \| Skipped heading levels (h2 to h4) \| Warning \|
90	\| Positive tabindex \| `tabindex` values other than 0 or -1 \| Warning \|
91	\| Clickable divs \| `<div onclick>` instead of `<button>` \| Warning \|
92	\| Inline styles \| `style="..."` attributes \| Warning \|
93	\| Nativ

People who liked this also viewed

6 picks

Type

design-systems-slds-validate

1.9kinstalls272forks

View on GitHub

How to install design-systems-slds-validate?

forcedotcom/sf-skills/design-systems-slds-validate

$npx -y skills add forcedotcom/sf-skills --skill design-systems-slds-validate

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# SLDS Quality Audit
2
3	Audit Lightning Web Components for SLDS compliance and produce an automated scorecard plus a required manual review gate. Combines SLDS linter output with supplementary static analysis to catch what the linter misses.
4
5	## Scope
6
7	Also valid for: auditing SLDS compliance across a project or component set, and before/after quality comparison after making changes.
8
9	Not for:
10	- Fixing linter violations — use `design-systems-slds2-migrate` instead
11	- Building new components — use `design-systems-slds-apply` instead
12	- Just running the linter — run `npx @salesforce-ux/slds-linter@latest lint .` directly
13	- Full WCAG accessibility audit — this skill checks attribute presence only (labels, alt text, focus indicators), not contrast ratios, keyboard flows, or screen reader behavior
14	- Framework-specific template auditing beyond `.css`, `.html`, and `.js` files — JSX/TSX/Vue/Svelte outputs need additional manual review
15
16	---
17
18	## Quality Validation Process
19
20	```
21	1. Run SLDS Linter → Collect violation counts (linter's job)
22	2. Run Analyze Script → Check what linter doesn't cover (supplementary)
23	3. Agent Review → Required manual review gate
24	4. Score & Grade → Compute automated score + final recommendation
25	5. Generate Report → Produce formatted scorecard
26	```
27
28	## Step 1: Run SLDS Linter
29
30	Run the linter to collect baseline violation data:
31
32	```bash
33	npx @salesforce-ux/slds-linter@latest lint <component-path> 2>&1
34	```
35
36	Count violations by rule. These feed directly into the Linter Compliance score:
37
38	\| Rule \| Impact \|
39	\|------\|--------\|
40	\| `slds/class-override` \| Breaks theming, dark mode \|
41	\| `slds/lwc-token-to-slds-hook` \| SLDS 1 technical debt \|
42	\| `slds/no-hardcoded-values` \| Breaks theming, accessibility \|
43
44	Linter Compliance Score = `100 - (total_violations × 10)`, minimum 0.
45
46	If the linter is unavailable (no Node.js, no network access, CI sandbox restrictions): skip this step, note "Linter not run" in the report header, mark Linter Compliance as N/A, and compute the Overall score using the remaining 4 categories renormalized to 100%:
47
48	```
49	Overall (linter unavailable) = (Theming × 0.29) + (Accessibility × 0.29)
50	+ (CodeQuality × 0.21) + (ComponentUsage × 0.21)
51	```
52
53	## Step 2: Run Supplementary Analysis
54
55	Run the analyze script to catch issues the linter doesn't cover. The bundled analyzer scans `.css`, `.html`, and `.js` files only:
56
57	```bash
58	node scripts/analyze-quality.cjs <component-path>
59	```
60
61	The script outputs JSON with findings organized by severity. It checks:
62
63	### CSS Checks (linter-complementary)
64
65	\| Check \| What It Catches \| Severity \|
66	\|-------\|----------------\|----------\|
67	\| Missing fallbacks \| `var(--slds-g-*)` without a fallback value \| Critical \|
68	\| Invented hooks (T051) \| `--slds-g-*` tokens not found in `hooks-index.json` (requires `--hooks-index`) \| Critical \|
69	\| Hook pairing \| Background hooks without matching foreground hooks \| Warning \|
70	\| `!important` \| Specificity overrides \| Warning \|
71	\| Magic pixel values \| Hardcoded `px` not using spacing hooks \| Warning \|
72	\| High z-index \| z-index values > 99 \| Warning \|
73	\| Outline removal \| `outline: none` without alternative focus style \| Warning \|
74
75	### JS Checks
76
77	\| Check \| What It Catches \| Severity \|
78	\|-------\|----------------\|----------\|
79	\| Inline style assignment \| `.style.*=` direct property assignment \| Warning \|
80	\| SLDS class manipulation \| Dynamic `.classList.add('slds-*')` manipulation \| Warning \|
81
82	### HTML Checks
83
84	\| Check \| What It Catches \| Severity \|
85	\|-------\|----------------\|----------\|
86	\| LBC input labels \| `<lightning-input>` without `label` attribute \| Critical \|
87	\| Icon alt text \| `<lightning-icon>` without `alternative-text` \| Critical \|
88	\| Image alt text \| `<img>` without `alt` \| Critical \|
89	\| Heading hierarchy \| Skipped heading levels (h2 to h4) \| Warning \|
90	\| Positive tabindex \| `tabindex` values other than 0 or -1 \| Warning \|
91	\| Clickable divs \| `<div onclick>` instead of `<button>` \| Warning \|
92	\| Inline styles \| `style="..."` attributes \| Warning \|
93	\| Nativ

People who liked this also viewed

6 picks

Type