forcedotcom/sf-skills150 files

Applying Slds

Name: Applying Slds
Availability: InStock
Author: forcedotcom

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 spacing, or selecting icons. Triggers include \"build a modal\", \"create a form\", \"data table\", \"SLDS styling\", \"style with hooks\", \"add an icon\".

Use this skill View repository View on skills.sh

Specification

Skill ID: forcedotcom/sf-skills/applying-slds
Publisher: forcedotcom
Repository: sf-skills
Installs: 0
Files: 150
Synced: Sep 23, 2026

How to use it

Open any RiverX project, open the Skills panel in the chat, and search for this identifier. The files are fetched from the source repository at install time.

forcedotcom/sf-skills/applying-sldsInstalls these files

checklists.md
examples.md
guidance/blueprints-index.md
guidance/icons-guidance.md
guidance/overviews/borders.md
guidance/overviews/color.md
guidance/overviews/display-density.md
guidance/overviews/icons.md
guidance/overviews/illustrations.md
guidance/overviews/shadows.md
guidance/overviews/spacing.md
guidance/overviews/typography.md
guidance/overviews/utilities.md
guidance/README.md
guidance/slds-development-guide.md
guidance/styling-hooks/borders.md
guidance/styling-hooks/color/expressive-palette-hooks.md
guidance/styling-hooks/color/index.md
guidance/styling-hooks/color/semantic/accent-hooks.md
guidance/styling-hooks/color/semantic/feedback-hooks.md
guidance/styling-hooks/color/semantic/surface-hooks.md
guidance/styling-hooks/color/system-hooks.md
guidance/styling-hooks/index.md
guidance/styling-hooks/shadows.md
guidance/styling-hooks/spacing.md
guidance/styling-hooks/typography.md
guidance/utilities/alignment.md
guidance/utilities/borders.md
guidance/utilities/box.md
guidance/utilities/color.md
guidance/utilities/dark-mode.md
guidance/utilities/description-list.md
guidance/utilities/floats.md
guidance/utilities/grid.md
guidance/utilities/horizontal-list.md
guidance/utilities/hyphenation.md
guidance/utilities/index.md
guidance/utilities/interactions.md
guidance/utilities/layout.md
guidance/utilities/line-clamp.md
guidance/utilities/margin.md
guidance/utilities/media-object.md
guidance/utilities/name-value-list.md
guidance/utilities/padding.md
guidance/utilities/position.md
guidance/utilities/print.md
guidance/utilities/scrollable.md
guidance/utilities/sizing.md
guidance/utilities/themes.md
guidance/utilities/truncate.md
guidance/utilities/typography.md
guidance/utilities/vertical-list.md
guidance/utilities/visibility.md
metadata/blueprints/components/accordion.yaml
metadata/blueprints/components/activity-timeline.yaml
metadata/blueprints/components/alert.yaml
metadata/blueprints/components/app-launcher.yaml
metadata/blueprints/components/avatar-group.yaml
metadata/blueprints/components/avatar.yaml
metadata/blueprints/components/badges.yaml
metadata/blueprints/components/brand-band.yaml
metadata/blueprints/components/breadcrumbs.yaml
metadata/blueprints/components/builder-header.yaml
metadata/blueprints/components/button-groups.yaml
metadata/blueprints/components/button-icons.yaml
metadata/blueprints/components/buttons.yaml
metadata/blueprints/components/cards.yaml
metadata/blueprints/components/carousel.yaml
metadata/blueprints/components/chat.yaml
metadata/blueprints/components/checkbox-button-group.yaml
metadata/blueprints/components/checkbox-button.yaml
metadata/blueprints/components/checkbox-toggle.yaml
metadata/blueprints/components/checkbox.yaml
metadata/blueprints/components/color-picker.yaml
metadata/blueprints/components/combobox.yaml
metadata/blueprints/components/counter.yaml
metadata/blueprints/components/data-tables.yaml
metadata/blueprints/components/datepickers.yaml
metadata/blueprints/components/datetime-picker.yaml
metadata/blueprints/components/docked-composer.yaml
metadata/blueprints/components/docked-form-footer.yaml
metadata/blueprints/components/docked-utility-bar.yaml
metadata/blueprints/components/drop-zone.yaml
metadata/blueprints/components/dueling-picklist.yaml
metadata/blueprints/components/dynamic-icons.yaml
metadata/blueprints/components/dynamic-menu.yaml
metadata/blueprints/components/expandable-section.yaml
metadata/blueprints/components/expression.yaml
metadata/blueprints/components/feeds.yaml
metadata/blueprints/components/file-selector.yaml
metadata/blueprints/components/files.yaml
metadata/blueprints/components/form-element.yaml
metadata/blueprints/components/global-header.yaml
metadata/blueprints/components/global-navigation.yaml
metadata/blueprints/components/icons.yaml
metadata/blueprints/components/illustration.yaml
metadata/blueprints/components/input.yaml
metadata/blueprints/components/list-builder.yaml
metadata/blueprints/components/lookups.yaml
metadata/blueprints/components/map.yaml
metadata/blueprints/components/menus.yaml
metadata/blueprints/components/modals.yaml
metadata/blueprints/components/notifications.yaml
metadata/blueprints/components/page-headers.yaml
metadata/blueprints/components/panels.yaml
metadata/blueprints/components/path.yaml
metadata/blueprints/components/picklist.yaml
metadata/blueprints/components/pills.yaml
metadata/blueprints/components/popovers.yaml
metadata/blueprints/components/progress-bar.yaml
metadata/blueprints/components/progress-indicator.yaml
metadata/blueprints/components/progress-ring.yaml
metadata/blueprints/components/prompt.yaml
metadata/blueprints/components/publishers.yaml
metadata/blueprints/components/radio-button-group.yaml
metadata/blueprints/components/radio-group.yaml
metadata/blueprints/components/rich-text-editor.yaml
metadata/blueprints/components/scoped-notifications.yaml
metadata/blueprints/components/scoped-tabs.yaml
metadata/blueprints/components/select.yaml
metadata/blueprints/components/setup-assistant.yaml
metadata/blueprints/components/slider.yaml
metadata/blueprints/components/spinners.yaml
metadata/blueprints/components/split-view.yaml
metadata/blueprints/components/summary-detail.yaml
metadata/blueprints/components/tabs.yaml
metadata/blueprints/components/textarea.yaml
metadata/blueprints/components/tiles.yaml
metadata/blueprints/components/timepicker.yaml
metadata/blueprints/components/toast.yaml
metadata/blueprints/components/tooltips.yaml
metadata/blueprints/components/tree-grid.yaml
metadata/blueprints/components/trees.yaml
metadata/blueprints/components/trial-bar.yaml
metadata/blueprints/components/vertical-navigation.yaml
metadata/blueprints/components/vertical-tabs.yaml
metadata/blueprints/components/visual-picker.yaml
metadata/blueprints/components/welcome-mat.yaml
metadata/hooks-index.json
metadata/README.md
metadata/utilities-index.json
references/component-selection.md
references/icons-decision-guide.md
references/styling-decision-guide.md
references/utilities-quick-ref.md
scripts/search-blueprints.cjs
scripts/search-hooks.cjs
scripts/search-icons.cjs
scripts/search-utilities.cjs
SKILL.md

What this skill tells the agent

Applying SLDS

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.

Version: This skill targets SLDS v2. Legacy --lwc-* tokens and slds-*--modifier syntax are deprecated. Audit scope: The companion validating-slds 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.

What is SLDS?

Artifact	Count	Description
Lightning Base Components	~70	Pre-built LWC components (LWC only)
SLDS Blueprints	85	CSS/HTML patterns for any framework
Styling Hooks	523	CSS custom properties (`--slds-g-*`) for theming
Utility Classes	1,147	Rapid styling classes for spacing, layout, visibility
Icons	1,732	SVG icons across 5 categories

Scope

This skill covers:

Which blueprint to use for a given UI pattern
How to style with hooks (color, spacing, typography, shadows, borders)
Which utility classes to use for layout, spacing, visibility
Which icon to use and from which category
SLDS naming conventions, class structure, hook syntax

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.

This skill does NOT cover (use companion skills):

Design decisions -- visual hierarchy, composition, interaction patterns
LWC mechanics -- component structure, @wire, @api, lifecycle, events (not yet available)
Full accessibility -- WCAG conformance, ARIA patterns, keyboard navigation, focus management, contrast ratios (not yet available)

Component Selection Hierarchy

Always follow this order:

1. Lightning Base Components (LWC only)    ← Check first
2. SLDS Blueprints (any framework)         ← Use exact SLDS classes
3. Custom with Styling Hooks               ← Use var(--slds-g-*)
4. Custom CSS (last resort)                ← Still use hooks for values

If building in LWC, check for an LBC first: Lightning Component Library

If no LBC exists (or not using LWC), select an SLDS Blueprint. See references/component-selection.md.

Core Rules

Do

Follow the selection hierarchy: LBC > Blueprint > Hooks > Custom CSS
Use var(--slds-g-*, fallback) for all themeable values
Create custom classes (my-*, c-*) instead of overriding .slds-*
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)
Pair surface colors with on-surface colors for text
Provide alternative-text on every <lightning-icon>

Don't

Hard-code colors, spacing, or typography values
Override .slds-* classes directly
Use deprecated --lwc-* tokens as primary values
Use --slds-s-* (shared) hooks -- they are private/internal
Reassign hook values -- only reference them with var()
Use color alone to convey meaning
Invent hook names by interpolating patterns from other families (see Naming Traps below)

Hook Naming Traps

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 metadata/hooks-index.json before using it.

Trap 1: Font size hooks are NOT numbered

Wrong (does not exist)	Correct	Notes
`--slds-g-font-size-3`	`--slds-g-font-scale-1`	Font sizes use `font-scale-`, not `font-size-`
`--slds-g-font-size-4`	`--slds-g-font-scale-2`	Only `--slds-g-font-size-base` exists (base size)
`--slds-g-font-size-8`	`--slds-g-font-scale-6`	Scale goes: neg-4 through 10

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.

Trap 2: Color hooks always require a number

Wrong (does not exist)	Correct	Notes
`--slds-g-color-on-surface`	`--slds-g-color-on-surface-2`	All color hooks need a number
`--slds-g-color-on-accent`	`--slds-g-color-on-accent-1`	Pick 1/2/3 by emphasis level
`--slds-g-color-surface`	`--slds-g-color-surface-1`	No unnumbered base form

Rule: Every --slds-g-color-* hook ends in a number. Pick by emphasis: -1 (low), -2 (medium), -3 (high).

Trap 3: Not all values have hook equivalents

Some CSS values (e.g., min-width: 7rem for label alignment) have no SLDS hook. This is acceptable:

.c-field-label {
  /* No SLDS hook exists for this width; intentional custom value */
  min-width: 7rem;
}

Rule: When no hook exists, use the value directly with a comment explaining it's intentional. Prefer SLDS grid utilities (slds-size_*) as alternatives to hardcoded widths where possible.

Verify Before You Use

Rule: Never include an SLDS hook, utility class, blueprint class, or icon in generated code without first confirming it exists in the metadata. Guessing based on naming patterns is the primary source of invented artifacts.

Run the appropriate search command before emitting any SLDS artifact:

Artifact	Verification command	Source of truth
Styling hook (`--slds-g-*`)	`node scripts/search-hooks.cjs --prefix "<hook-name>"`	`metadata/hooks-index.json`
Utility class (`slds-*`)	`node scripts/search-utilities.cjs --search "<class-name>"`	`metadata/utilities-index.json`
Blueprint / CSS class	`node scripts/search-blueprints.cjs --search "<pattern>"` then read the YAML	`metadata/blueprints/components/*.yaml`
Icon	`node scripts/search-icons.cjs --query "<description>"`	`metadata/icon-metadata.json`

If the search returns no match: do not use the artifact. Find an alternative from the search results or build custom with verified hooks.

Naming Conventions

Use a consistent prefix for custom classes to avoid collision with SLDS:

Pattern	Use Case	Example
`my-*`	General custom styling	`my-card-header`
`c-*`	LWC component-specific	`c-accountList-row`
`[namespace]-*`	Package/app namespace	`acme-dashboard-widget`

Avoid: generic names (container, wrapper), SLDS-like names (custom-slds-button), BEM on SLDS classes (slds-card__custom-header).

Custom hook namespacing:

:root {
  --my-app-primary: var(--slds-g-color-accent-1);
  --my-app-card-padding: var(--slds-g-spacing-4);
}

Knowledge Map

This skill bundles comprehensive SLDS knowledge. Read files as needed -- don't read everything upfront.

Decision Guides (start here for each task)

File	Read when
references/component-selection.md	Choosing a component or blueprint
references/styling-decision-guide.md	Applying colors, spacing, typography, shadows
references/icons-decision-guide.md	Selecting or implementing an icon
references/utilities-quick-ref.md	Using utility classes for layout/spacing

Search Scripts (find specific artifacts)

Script	What it searches	Example

Use this skill in a project

Open any RiverX project, search the Skills panel for forcedotcom/sf-skills/applying-slds, and install it in one click.

Use this skill