skills.rest
amanpraaj
amanpraajCOMMUNITY
Explore all skills by this author →
GitHub

uplifting-components-to-slds2

Migrate Lightning Web Components from SLDS 1 to SLDS 2 using linter-driven styling hook fixes.

1|Updated May 7, 2026
Search Tags:#design tokens#salesforce#linter#lwc#styling hooks#css migration#slds2
One-click install
npx skills add https://github.com/amanpraaj/sf-skill-hub --skill uplifting-components-to-slds2-amanpraaj
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: uplifting-components-to-slds2
Source: https://github.com/amanpraaj/sf-skill-hub/tree/main/skills/salesforce/uplifting-components-to-slds2
Command: npx skills add https://github.com/amanpraaj/sf-skill-hub --skill uplifting-components-to-slds2-amanpraaj

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @salesforce-ux/slds-linter, and includes references (resource) components.

What problem does it solve? Migrating Lightning Web Components and Aura components from SLDS 1 to SLDS 2 requires manually replacing deprecated design tokens, hardcoded CSS values, and SLDS class overrides, which is error-prone and tedious without structured guidance. ## Core Features & Use Cases - Linter-Driven Migration: Runs the SLDS linter with auto-fix, then resolves remaining violations across four rule types: hardcoded values, deprecated LWC tokens, SLDS class overrides, and legacy Aura t() tokens. - Styling Hook Decision Guides: Provides decision trees and lookup tables for choosing correct color, spacing, sizing, typography, border, radius, and shadow hooks with mandatory fallback values. - Use Case: A developer upgrading a Salesforce app to SLDS 2 runs the linter on a component library, then uses the per-rule reference guides to replace --lwc-* tokens, rename .slds-* overrides in CSS and markup, and validate until zero errors remain. ## Quick Start Ask the agent to run the SLDS linter on your component directory and migrate all flagged CSS violations to SLDS 2 styling hooks.

Frequently Asked Questions about uplifting-components-to-slds2

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate Lightning Web Components from SLDS 1 to SLDS 2?▼

Run npx @salesforce-ux/slds-linter@latest lint --fix . to auto-fix simple violations, then manually resolve remaining issues by rule type: replace hardcoded values and deprecated tokens with SLDS 2 styling hooks, and rename SLDS class overrides in both CSS and markup. Re-run the linter until it reports zero errors.

How do I fix slds/no-slds-class-overrides violations?▼

Rename the .slds-* selector in CSS to {componentName}-{sldsElementPart} using camelCase, then add the new class to the markup alongside the original SLDS class. Never remove the original SLDS class from the HTML or Aura markup.

What replaces deprecated --lwc-* design tokens in SLDS 2?▼

Replace each --lwc-* token with an SLDS 2 hook from the linter's numbered suggestion list, keeping the original token as fallback: var(--slds-g-color-surface-container-2, var(--lwc-colorBackground)). Choose surface versus container hooks based on the element's DOM context.

Which hardcoded CSS values should not be replaced with SLDS hooks?▼

Leave layout and structural values unchanged: 100%, auto, 0, inherit, none, flex: 1, and display values. Also skip animation durations, opacity, gradients, and positioning offsets, since no SLDS 2 hooks exist for these and removing them breaks rendering.

Why does the SLDS linter suggest multiple color hooks for one value?▼

The linter matches hooks by color similarity, not semantic meaning. Inspect the element's markup and ARIA attributes to determine its role, then choose from surface, accent, feedback, or palette families using the color hooks decision guide.

Do named SLDS 2 hooks like spacing-medium or font-weight-bold exist?▼

No. SLDS 2 uses only numbered scales such as --slds-g-spacing-4 and --slds-g-font-weight-7. Inventing named hooks or out-of-range numbers causes failures, so always verify hook names against linter suggestions.

Related Skills

Explore More Software Engineering Skills→
bhanu91221bhanu91221
2

aura-patterns

Guide Salesforce developers through Aura-to-LWC migration and interop patterns.

Community
Advanced
blueprintuiblueprintui
335

testing-visual

Automate visual regression testing for UI components across themes and states.

Official
Intermediate
JosiahSiegelJosiahSiegel
51

tailwindcss-accessibility

Provide Tailwind CSS utility classes for WCAG 2.2 accessibility features.

Community
Intermediate
angryracoonangryracoon

design-systems-slds2-migrate

Migrate Lightning Web Components from SLDS 1 to SLDS 2 styling.

Community
Advanced