Design Systems Slds Validate

This audits Lightning Web Components against SLDS standards and spits out a scored quality report with letter grades. It runs the official SLDS linter for class overrides and hardcoded values, then layers on supplementary checks the linter doesn't cover: CSS theming hook pairing, invented hook detection against the actual metadata, accessibility attributes on Lightning base components, and common footguns like inline styles or clickable divs. The scoring is transparent, five categories with published weights, and it forces a manual review gate for things you can't automate like loading states and blueprint compliance. Use it when you need a pre-merge quality gate or want to benchmark component health before refactoring.

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

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

SLDS Quality Audit

Audit Lightning Web Components for SLDS compliance and produce an automated scorecard plus a required manual review gate. Combines SLDS linter output with supplementary static analysis to catch what the linter misses.

Scope

Also valid for: auditing SLDS compliance across a project or component set, and before/after quality comparison after making changes.

Not for:

Fixing linter violations — use design-systems-slds2-migrate instead
Building new components — use design-systems-slds-apply instead
Just running the linter — run npx @salesforce-ux/slds-linter@latest lint . directly
Full WCAG accessibility audit — this skill checks attribute presence only (labels, alt text, focus indicators), not contrast ratios, keyboard flows, or screen reader behavior
Framework-specific template auditing beyond .css, .html, and .js files — JSX/TSX/Vue/Svelte outputs need additional manual review