Item: design-systems-slds-apply
Rating: 5.2
Author: Implexa

design-systems-slds-apply

Apply SLDS-compliant UI using the correct blueprints, styling hooks, utility classes, and icons. Use when building any UI that needs SLDS, choosing between…

installs

stars

karma

SkillRank score ↗

5.2/ 10

evaluated by implexa, claude-haiku-4-5 · 2026-07-31

design-systems-slds-apply covers selecting and implementing slds artifacts (components, blueprints, styling hooks, utility classes, icons) for v2-compliant ui. includes validation scope limitations for non-html frameworks.

structure

4.0

trigger phrases

3.0

procedure

4.0

edge cases

3.0

documentation

6.0

strengths

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

don't have the plugin yet? install it then click "run inline in claude" again.