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.

Install to Claude Code

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