skills.rest
dmckeeSF
dmckeeSFCOMMUNITY
Explore all skills by this author →
GitHub

uplifting-components-to-slds2

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

Updated May 19, 2026
Search Tags:#automation#LWC#UI upgrade#style migration#SLDS 2
One-click install
npx skills add https://github.com/dmckeeSF/mcpdctn0507 --skill uplifting-components-to-slds2-dmckeesf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: uplifting-components-to-slds2
Source: https://github.com/dmckeeSF/mcpdctn0507/tree/main/.agents/skills/uplifting-components-to-slds2
Command: npx skills add https://github.com/dmckeeSF/mcpdctn0507 --skill uplifting-components-to-slds2-dmckeesf

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill solves the challenge of manually migrating Lightning Web Components (LWCs) from SLDS 1 to SLDS 2, ensuring a modern, consistent user interface.

Core Features & Use Cases

  • Automated Migration: Streamline the migration process by automatically running the SLDS linter and fixing common violations.
  • Guided Fixing: Provide detailed instructions for resolving linter warnings and errors, covering all styling hook categories.
  • Advanced Customization: Offer advanced patterns for color mixing, fallbacks, and compatibility with deprecated tokens.
  • Use Case: When you need to update LWCs to use the latest SLDS 2 styling hooks and ensure accessibility compliance.

Quick Start

Run the uplifting-components-to-slds2 skill with the command: uplifting-components-to-slds2 lint --fix .

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 LWCs from SLDS 1 to SLDS 2 styling hooks?▼

Migrate LWCs from SLDS 1 to SLDS 2 by running an automated linter that converts hardcoded values to styling hooks and provides structured guidance for resolving violations across all styling categories.

What is the best way to automate converting hardcoded CSS values to SLDS 2 tokens in Lightning Web Components?▼

Automating the conversion of hardcoded values to SLDS 2 styling hooks is best achieved by running a dedicated linter that identifies violations and applies fixes across color, spacing, sizing, typography, borders, radius, and shadows.

Do I need Node.js to upgrade Lightning Web Components to SLDS 2?▼

Yes, you need Node.js installed and access to your component files to execute the automated migration to SLDS 2 styling hooks.

Does the SLDS linter support advanced styling hook patterns like color mixing and fallbacks?▼

Yes, the SLDS linter supports advanced customization patterns including color mixing, fallbacks, and compatibility with deprecated tokens during the SLDS 2 migration process.

Why does my SLDS 2 migration still show linter warnings after automated fixing?▼

Automated fixing handles common violations, but detailed instructions are provided to manually resolve remaining linter warnings and errors across all styling hook categories like typography and shadows.

Related Skills

Explore More Software Engineering Skills→
forcedotcomforcedotcom
803

uplifting-components-to-slds2

Migrate LWC styling from SLDS 1 to SLDS 2 with hook-based replacements.

Official
Intermediate
cchrisvcchrisv

uplifting-components-to-slds2

Migrate Lightning Web Components from SLDS 1 to SLDS 2 with lint-guided fixes.

Community
Advanced
CollabalistCollabalist

applying-slds

Apply Salesforce Lightning Design System guidelines to UI components.

Community
Intermediate
angryracoonangryracoon

design-systems-slds2-migrate

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

Community
Advanced