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 with linter checks and guidance.

Updated Jul 2, 2026
Search Tags:#accessibility#CSS#LWC#style consistency#SLDS 2 migration
One-click install
npx skills add https://github.com/padjei/SF_Agents --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_Agents/tree/main/.claude/skills/design-systems-slds2-migrate
Command: npx skills add https://github.com/padjei/SF_Agents --skill design-systems-slds2-migrate-padjei

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the challenge of migrating Lightning Web Components from SLDS 1 to SLDS 2, reducing the complexity and manual effort involved in the process.

Core Features & Use Cases

  • Automated Linter: Identifies and fixes most common style violations with the SLDS linter.
  • Manual Fix Guidance: Provides detailed instructions for resolving remaining issues.
  • Styling Hook Recommendations: Offers expert advice on selecting the appropriate styling hooks for various components.
  • Validation Checklist: Ensures that the migration is complete and adheres to SLDS best practices.

Quick Start

Run the design-systems-slds2-migrate skill to begin the migration process for your LWCs.

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 Lightning Web Components from SLDS 1 to SLDS 2?▼

SLDS 2 migration updates your Lightning Web Components by replacing outdated styling with styling hooks. This ensures style consistency and accessibility across all categories using automated linter checks and manual fix guidance.

What is the best way to fix SLDS 2 styling hook violations in LWC markup?▼

The best way to fix styling hook violations is using the SLDS linter to automatically identify and correct common style issues, followed by applying structured manual guidance for complex accessibility and style consistency updates.

Do I need Node.js to automate SLDS 2 migration for my components?▼

Yes, Node.js is required to run the automated SLDS linter checks. You also need CSS and markup access for your LWCs and a Git repository to backup your components before applying migration fixes.

How does the SLDS linter check for accessibility and style consistency during migration?▼

The SLDS linter scans LWC markup and CSS to identify outdated SLDS 1 patterns, automatically fixing common style violations to align your components with SLDS 2 styling hooks and accessibility standards.

What limitations exist when automating SLDS 2 styling hook updates?▼

The automated linter only fixes common style violations automatically. You must manually resolve remaining issues using structured instructions and validate the migration with a checklist to ensure SLDS best practices.

Related Skills

Explore More Software Engineering Skills→
angryracoonangryracoon

design-systems-slds-apply

Apply SLDS v2-compliant styling to Salesforce user interfaces.

Community
Advanced
dmckeeSFdmckeeSF

uplifting-components-to-slds2

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

Community
Advanced
forcedotcomforcedotcom
803

uplifting-components-to-slds2

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

Official
Intermediate
CollabalistCollabalist

validating-slds

Audit Salesforce Lightning Web Components for SLDS compliance and generate a scored quality report.

Community
Advanced