applying-slds
Installation
SKILL.md
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 andslds-*--modifiersyntax are deprecated.Audit scope: The companion
validating-sldsskill analyzer only scans.css,.html, and.jsfiles. 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 |