skills.rest
padjei
padjeiCOMMUNITY
Explore all skills by this author →
GitHub

design-systems-slds2-migrate

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

Updated Jul 2, 2026
Search Tags:#design tokens#salesforce#linter#slds#lwc#styling hooks#css migration
One-click install
npx skills add https://github.com/padjei/SF_Build --skill design-systems-slds2-migrate-padjei
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-systems-slds2-migrate
Source: https://github.com/padjei/SF_Build/tree/main/.claude/skills/design-systems-slds2-migrate
Command: npx skills add https://github.com/padjei/SF_Build --skill design-systems-slds2-migrate-padjei

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Migrating Salesforce 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 across many files, which is error-prone and time-consuming without structured guidance. ## Core Features & Use Cases - Linter-Driven Workflow: Runs the official @salesforce-ux/slds-linter to auto-fix simple violations and triage remaining issues by rule type. - Per-Rule Fix Guides: Dedicated references for no-hardcoded-values, lwc-token-to-slds-hook, no-slds-class-overrides, and no-deprecated-tokens-slds1 violations. - Hook Decision Guides: Context-based selection logic for color hooks (surface, accent, feedback, palette) and lookup tables for spacing, sizing, typography, border, radius, and shadow hooks. - Use Case: A developer upgrading an LWC component library to SLDS 2 runs the linter, then uses this skill to replace deprecated --lwc-* tokens and hardcoded hex colors with correct semantic styling hooks while preserving fallback values. ## Quick Start Ask the assistant to migrate your LWC component's CSS to SLDS 2 by running the SLDS linter and fixing all reported violations.

Frequently Asked Questions about design-systems-slds2-migrate

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

FAQPage Schema
How do I migrate LWC components from SLDS 1 to SLDS 2?▼

Run npx @salesforce-ux/slds-linter@latest lint --fix . first to auto-fix simple violations, then manually fix remaining issues by rule type. Replace deprecated tokens and hardcoded values with SLDS 2 styling hooks, always keeping the original value as a fallback.

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 in the HTML markup alongside the original SLDS class. Never remove the original SLDS class from the markup.

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

Deprecated --lwc-* tokens are replaced with --slds-g-* styling hooks, keeping the LWC token as a nested fallback: var(--slds-g-color-surface-2, var(--lwc-colorBackground)). Only use hooks from the linter's numbered suggestion list.

Does the SLDS linter work with Aura components?▼

Yes, the SLDS linter analyzes both LWC (.html) and Aura (.cmp) markup plus CSS files. For Aura, it also flags legacy t() and token() syntax under the slds/no-deprecated-tokens-slds1 rule.

Why does my component look different after SLDS 2 migration?▼

Visual changes usually come from incorrect fallback values or choosing the wrong hook family, such as surface instead of surface-container. Verify fallbacks match the original values exactly and confirm background-foreground hooks are paired from the same family.

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

Layout and structural values like 100%, auto, 0, inherit, none, and flex: 1 must remain unchanged. Also leave values with no close hook match, z-index (hardcode directly), and durations (use --lwc-* tokens directly).

Related Skills

Explore More Software Engineering Skills→
jiten-singh-shahijiten-singh-shahi
13

sf-aura-development

Maintain and migrate Salesforce Aura components with event and Apex integration fixes.

Community
Intermediate
blueprintuiblueprintui
335

testing-visual

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

Official
Intermediate
Community-AccessCommunity-Access
387

design-system

Validate design system tokens for WCAG AA/AAA contrast, focus, and touch target compliance.

Official
Advanced
padjeipadjei

design-systems-slds2-migrate

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

Community
Advanced