design-systems-slds-apply

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

1.9kinstalls272forks

How to install design-systems-slds-apply?

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

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

Installs into the current project.

Summary

Apply SLDS-compliant UI using the correct blueprints, styling hooks, utility classes, and icons. Use when building any UI that needs SLDS, choosing between Lightning Base Components and SLDS Blueprints, applying styling hooks for theming, using utility classes for layout and spac

Files · 1

View on GitHub

SKILL.md

1	# Applying SLDS
2
3	The Salesforce Lightning Design System (SLDS) is a CSS framework with thousands of artifacts. This skill teaches agents how to find and correctly use them.
4
5	> Version: This skill targets SLDS v2. Legacy `--lwc-` tokens and `slds---modifier` syntax are deprecated.
6	>
7	> Audit scope: The companion `design-systems-slds-validate` skill analyzer only scans `.css`, `.html`, and `.js` files. Use it directly for LWC and similar HTML/CSS/JS components; treat it as a partial signal for JSX/TSX or other framework-specific template formats and supplement with manual review.
8
9	## What is SLDS?
10
11	\| Artifact \| Count \| Description \|
12	\|----------\|-------\|-------------\|
13	\| Lightning Base Components \| ~70 \| Pre-built LWC components (LWC only) \|
14	\| SLDS Blueprints \| 85 \| CSS/HTML patterns for any framework \|
15	\| Styling Hooks \| 523 \| CSS custom properties (`--slds-g-*`) for theming \|
16	\| Utility Classes \| 1,147 \| Rapid styling classes for spacing, layout, visibility \|
17	\| Icons \| 1,732 \| SVG icons across 5 categories \|
18
19	---
20
21	## Scope
22
23	This skill covers:
24	- Which blueprint to use for a given UI pattern
25	- How to style with hooks (color, spacing, typography, shadows, borders)
26	- Which utility classes to use for layout, spacing, visibility
27	- Which icon to use and from which category
28	- SLDS naming conventions, class structure, hook syntax
29
30	This skill includes basic accessibility reminders (icon alt text, focus outlines, color-not-sole-indicator) in the validation checklists. Full WCAG compliance requires a dedicated accessibility review.
31
32	This skill does NOT cover (use companion skills):
33	- Design decisions -- visual hierarchy, composition, interaction patterns
34	- LWC mechanics -- component structure, @wire, @api, lifecycle, events (not yet available)
35	- Full accessibility -- WCAG conformance, ARIA patterns, keyboard navigation, focus management, contrast ratios (not yet available)
36
37	---
38
39	## Component Selection Hierarchy
40
41	Always follow this order:
42
43	```
44	1. Lightning Base Components (LWC only) ← Check first
45	2. SLDS Blueprints (any framework) ← Use exact SLDS classes
46	3. Custom with Styling Hooks ← Use var(--slds-g-*)
47	4. Custom CSS (last resort) ← Still use hooks for values
48	```
49
50	If building in LWC, check for an LBC first: [Lightning Component Library](https://developer.salesforce.com/docs/component-library/overview/components)
51
52	If no LBC exists (or not using LWC), select an SLDS Blueprint. See [references/component-selection.md](references/component-selection.md).
53
54	---
55
56	## Core Rules
57
58	### Do
59
60	- Follow the selection hierarchy: LBC > Blueprint > Hooks > Custom CSS
61	- Use `var(--slds-g-*, fallback)` for all themeable values
62	- Create custom classes (`my-`, `c-`) instead of overriding `.slds-*`
63	- Verify every hook, class, and utility exists before using it — run the search scripts; never assume an artifact exists based on naming patterns (see [Verify Before You Use](#verify-before-you-use))
64	- Pair surface colors with on-surface colors for text
65	- Provide `alternative-text` on every `<lightning-icon>`
66
67	### Don't
68
69	- Hard-code colors, spacing, or typography values
70	- Override `.slds-*` classes directly
71	- Use deprecated `--lwc-*` tokens as primary values
72	- Use `--slds-s-*` (shared) hooks -- they are private/internal
73	- Reassign hook values -- only reference them with `var()`
74	- Use color alone to convey meaning
75	- Invent hook names by interpolating patterns from other families (see Naming Traps below)
76
77	---
78
79	## Hook Naming Traps
80
81	SLDS hook families do NOT all follow the same naming pattern. Agents frequently invent hooks that don't exist by assuming `{prefix}-{number}` works universally. Always verify a hook exists via the bundled `search-hooks.cjs` script or `assets/hooks-index.json` before using it.
82
83	### Trap 1: Font size hooks are NOT numbered
84
85	\| Wrong (does not exist) \| Correct \| Notes \|
86	\|------------------------\|---------\|-------\|
87	\| `--slds-g-font-size-3` \| `--slds-g-font-scale-1` \| Font sizes use `font-scale-`, not `font-size-` \|
88	\| `--slds-g-font-size-4` \| `--slds-g-font-scale-2` \| Only `--slds-g-font-size-base` exists (base size) \|
89	\| `--slds-g-font-size-8` \| `--slds-g-font-scale-6` \| Scale goes: neg-4 through 10 \|
90
91	Rule: For font sizes, use `--slds-g-font-size-base` (the one base size) or `--slds-g-font-scale-*` (the numbered scale). Never `--slds-g-font-size-N`.
92
93	### Trap 2: Color hooks always require a number
94
95	\| Wrong (doe

People who liked this also viewed

6 picks

Type

design-systems-slds-apply

1.9kinstalls272forks

View on GitHub

How to install design-systems-slds-apply?

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

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Applying SLDS
2
3	The Salesforce Lightning Design System (SLDS) is a CSS framework with thousands of artifacts. This skill teaches agents how to find and correctly use them.
4
5	> Version: This skill targets SLDS v2. Legacy `--lwc-` tokens and `slds---modifier` syntax are deprecated.
6	>
7	> Audit scope: The companion `design-systems-slds-validate` skill analyzer only scans `.css`, `.html`, and `.js` files. Use it directly for LWC and similar HTML/CSS/JS components; treat it as a partial signal for JSX/TSX or other framework-specific template formats and supplement with manual review.
8
9	## What is SLDS?
10
11	\| Artifact \| Count \| Description \|
12	\|----------\|-------\|-------------\|
13	\| Lightning Base Components \| ~70 \| Pre-built LWC components (LWC only) \|
14	\| SLDS Blueprints \| 85 \| CSS/HTML patterns for any framework \|
15	\| Styling Hooks \| 523 \| CSS custom properties (`--slds-g-*`) for theming \|
16	\| Utility Classes \| 1,147 \| Rapid styling classes for spacing, layout, visibility \|
17	\| Icons \| 1,732 \| SVG icons across 5 categories \|
18
19	---
20
21	## Scope
22
23	This skill covers:
24	- Which blueprint to use for a given UI pattern
25	- How to style with hooks (color, spacing, typography, shadows, borders)
26	- Which utility classes to use for layout, spacing, visibility
27	- Which icon to use and from which category
28	- SLDS naming conventions, class structure, hook syntax
29
30	This skill includes basic accessibility reminders (icon alt text, focus outlines, color-not-sole-indicator) in the validation checklists. Full WCAG compliance requires a dedicated accessibility review.
31
32	This skill does NOT cover (use companion skills):
33	- Design decisions -- visual hierarchy, composition, interaction patterns
34	- LWC mechanics -- component structure, @wire, @api, lifecycle, events (not yet available)
35	- Full accessibility -- WCAG conformance, ARIA patterns, keyboard navigation, focus management, contrast ratios (not yet available)
36
37	---
38
39	## Component Selection Hierarchy
40
41	Always follow this order:
42
43	```
44	1. Lightning Base Components (LWC only) ← Check first
45	2. SLDS Blueprints (any framework) ← Use exact SLDS classes
46	3. Custom with Styling Hooks ← Use var(--slds-g-*)
47	4. Custom CSS (last resort) ← Still use hooks for values
48	```
49
50	If building in LWC, check for an LBC first: [Lightning Component Library](https://developer.salesforce.com/docs/component-library/overview/components)
51
52	If no LBC exists (or not using LWC), select an SLDS Blueprint. See [references/component-selection.md](references/component-selection.md).
53
54	---
55
56	## Core Rules
57
58	### Do
59
60	- Follow the selection hierarchy: LBC > Blueprint > Hooks > Custom CSS
61	- Use `var(--slds-g-*, fallback)` for all themeable values
62	- Create custom classes (`my-`, `c-`) instead of overriding `.slds-*`
63	- Verify every hook, class, and utility exists before using it — run the search scripts; never assume an artifact exists based on naming patterns (see [Verify Before You Use](#verify-before-you-use))
64	- Pair surface colors with on-surface colors for text
65	- Provide `alternative-text` on every `<lightning-icon>`
66
67	### Don't
68
69	- Hard-code colors, spacing, or typography values
70	- Override `.slds-*` classes directly
71	- Use deprecated `--lwc-*` tokens as primary values
72	- Use `--slds-s-*` (shared) hooks -- they are private/internal
73	- Reassign hook values -- only reference them with `var()`
74	- Use color alone to convey meaning
75	- Invent hook names by interpolating patterns from other families (see Naming Traps below)
76
77	---
78
79	## Hook Naming Traps
80
81	SLDS hook families do NOT all follow the same naming pattern. Agents frequently invent hooks that don't exist by assuming `{prefix}-{number}` works universally. Always verify a hook exists via the bundled `search-hooks.cjs` script or `assets/hooks-index.json` before using it.
82
83	### Trap 1: Font size hooks are NOT numbered
84
85	\| Wrong (does not exist) \| Correct \| Notes \|
86	\|------------------------\|---------\|-------\|
87	\| `--slds-g-font-size-3` \| `--slds-g-font-scale-1` \| Font sizes use `font-scale-`, not `font-size-` \|
88	\| `--slds-g-font-size-4` \| `--slds-g-font-scale-2` \| Only `--slds-g-font-size-base` exists (base size) \|
89	\| `--slds-g-font-size-8` \| `--slds-g-font-scale-6` \| Scale goes: neg-4 through 10 \|
90
91	Rule: For font sizes, use `--slds-g-font-size-base` (the one base size) or `--slds-g-font-scale-*` (the numbered scale). Never `--slds-g-font-size-N`.
92
93	### Trap 2: Color hooks always require a number
94
95	\| Wrong (doe

People who liked this also viewed

6 picks

Type