Run SLDS Linter with SLDS AI Development Skills

SLDS Linter powers three SLDS AI development skills that guide coding agents through building, validating, and migrating SLDS-compliant components. If you’re using Claude Code, Cursor, Agentforce Vibes, or another AI tool that supports the Agent Skills specification, these skills run SLDS Linter as part of their workflow.

Learn how each skill uses SLDS Linter plus where SLDS Linter’s automated checks end and the skill’s guidance begins.

SLDS Linter autofixes most violations with high confidence when you run the lint command with the --fix option. But some violations require judgment that SLDS Linter can’t apply on its own. For example, when a hardcoded color value maps to more than one valid styling hook, the correct choice depends on the component’s context.

SLDS AI development skills close that gap. These three skills read SLDS Linter’s output, apply the decision logic, and choose the right fix. SLDS Linter plays a different role in each skill.

• design-systems-slds-validate
• design-systems-slds-apply
• design-systems-slds2-migrate

For new projects, use the SLDS 2 AI Starter Kit, which includes the SLDS AI development skills already set up. For existing projects, install and run the SLDS AI development skills via the Agentforce Vibes plugin or install and run them directly in your AI tool with the npx skills add forcedotcom/sf-skills command. Browse full information about these skills — and all Salesforce agent skills — in the Salesforce Skills Library.

Audits code for SLDS compliance and produces a scored quality report.

SLDS Linter analyzes your design code against SLDS 2 rules and reports specific rule violations. The skill also checks for missing styling hook fallbacks, invented styling hook names, missing foreground and background styling hook pairing, strict !important tag usage, hardcoded pixel values, and accessibility attributes.

SLDS Linter results make up 30% of the overall quality score, alongside theming, accessibility, code quality, and component usage. The SLDS Linter score formula is: 100 − (10 × total errors) − (5 × total warnings).

Example prompts:

• Give this component a compliance score.
• Which SLDS rules is this component failing, and how severe are they?

Creates SLDS-compliant UI using the correct component blueprints, styling hooks, utility classes, and icons.

SLDS Linter runs as a mandatory validation step. The skill selects the right component and applies styling hooks first. It then runs SLDS Linter and works through the reported violations, before the component is considered fully compliant with SLDS 2 guidelines.

Command:

1npx @salesforce-ux/slds-linter@latest lint <component-path>

Example prompts:

• I need a data table with sortable columns. Pick the correct SLDS component blueprint.
• Add utility classes and an icon to this card so it matches SLDS spacing conventions.

Migrates Lightning Web Components from SLDS 1 to SLDS 2.

The skill runs SLDS Linter as a mandatory first step with the --fix option to autofix simple violations. Then the skill works through the remaining violations one rule at a time. For example, no-hardcoded-values-slds2, lwc-token-to-slds-hook, no-slds-class-overrides, and so on. Then the skill reruns SLDS Linter until no errors or warnings remain.

Command:

1npx @salesforce-ux/slds-linter@latest lint --fix

Example prompts:

• Uplift this component from SLDS 1 to SLDS 2 and resolve all violations.
• Replace all deprecated tokens in this component with SLDS 2 styling hooks.

You can run SLDS Linter through an AI development skill, or you can run SLDS Linter directly. Directly run SLDS Linter to check auto-fixable violations before invoking a skill, or to confirm a skill’s changes independently.

• Salesforce Lightning Design System 2: AI Development Skills
• Salesforce Lightning Design System 2: SLDS 2 AI Starter Kit
• Salesforce Skills Library

j

Get Started

Set Up SLDS Linter

Run SLDS Linter with SLDS AI Development Skills

Work With SLDS Linter

Reference

Get Support

Release Notes