Create SLDS 2 compliant LWC components using --slds-g-* hooks.
npx skills add https://github.com/sfdc-brendan/Demo-Lab --skill sf-lwc-design
Please help me install this Agent Skill. Skill: sf-lwc-design Source: https://github.com/sfdc-brendan/Demo-Lab/tree/main/skills/sf-lwc-design Command: npx skills add https://github.com/sfdc-brendan/Demo-Lab --skill sf-lwc-design
SLDS 2 design foundation provides a consistent baseline for building SLDS 2 compliant Lightning Web Components. It ensures the use of global styling hooks (--slds-g-*) and a theme-safe approach across light/dark modes, enabling scalable, maintainable design systems.
Generate a new LWC scaffold that uses SLDS 2 tokens and applies the global --slds-g-* hooks.
High-intent search queries and answers about installing and using this skill.
Migrating LWC components from SLDS 1 to SLDS 2 involves applying the provided migration path to replace legacy styling with global design hooks (--slds-g-*). This transition ensures your components adopt a theme-safe approach for light and dark modes.
SLDS 2 global styling hooks (--slds-g-*) are CSS custom properties that enable theme-safe visual consistency across light and dark modes. You need them when building new LWCs or migrating existing ones to maintain a scalable, maintainable design system.
Scaffolding a new LWC with SLDS 2 design tokens involves using the quick start generation to apply global --slds-g-* hooks. This creates a structured component architecture that prefers lightning-* base components to ensure accessibility and visual consistency.
Using lightning-* base components is strongly preferred for SLDS 2 compliance to ensure accessibility and visual consistency across your applications. This approach works synergistically with applying global --slds-g-* styling hooks for theme-safe development.
The best way to ensure theme-safe styling in LWC development is enforcing SLDS 2 design tokens using global --slds-g-* hooks. This method provides a consistent baseline for light and dark modes while maintaining a scalable, maintainable design system foundation.
You can apply SLDS 2 CSS tokens to specific components without immediately overhauling your entire LWC architecture. The structured migration path allows incremental adoption of --slds-g-* hooks while still preferring lightning-* base components.
forcedotcomMigrate LWC styling from SLDS 1 to SLDS 2 with hook-based replacements.
DevJaniduDefine light and dark themes, typography, layout, and GSAP animations for the SF Nail Spa website.
forcedotcomGenerate a Micro Frontend LWC shell with iframe communication for Salesforce pages.
padjeiMigrate Lightning Web Components from SLDS 1 to SLDS 2 with linter checks and guidance.
