Design Systems Slds Apply

If you're building UI on Salesforce's Lightning Design System, this skill keeps you from inventing CSS hooks and classes that don't exist. The big win is verification scripts that check SLDS's actual 523 styling hooks, 1,147 utility classes, and 1,732 icons before you use them. It teaches the component selection hierarchy (Lightning Base Components first, then SLDS Blueprints, then custom with hooks) and calls out naming traps where developers assume patterns that aren't there, like `--slds-g-font-size-3` (doesn't exist, use `--slds-g-font-scale-1` instead). Pairs well with the separate validation skill for auditing existing code. Targets SLDS v2 and works across frameworks, though LWC gets the most love.

skills.sh installs: 6.1K
GitHub stars: 1.2K
last updated: Aug 21, 2026

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

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 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.

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