skills.rest
Collabalist
CollabalistCOMMUNITY
Explore all skills by this author →
GitHub

applying-slds

Apply Salesforce Lightning Design System guidelines to UI components.

Updated Jun 1, 2026
Search Tags:#icons#UI design#utility classes#component selection#styling hooks#SLDS
One-click install
npx skills add https://github.com/Collabalist/SFDC --skill applying-slds
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: applying-slds
Source: https://github.com/Collabalist/SFDC/tree/main/.agents/skills/applying-slds
Command: npx skills add https://github.com/Collabalist/SFDC --skill applying-slds

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill helps developers and designers apply the Salesforce Lightning Design System (SLDS) best practices to UI components, ensuring a consistent and visually appealing user experience.

Core Features & Use Cases

  • SLDS Component Selection: Guide on choosing the right SLDS component for a given UI pattern.
  • Styling with Hooks: Instructions on using SLDS styling hooks for theming and customization.
  • Utility Classes: Guide on using utility classes for layout and spacing.
  • Icon Selection: Help in selecting the appropriate icon from the SLDS library.
  • Accessibility Considerations: Reminders on accessibility best practices for SLDS components.

Quick Start

Apply SLDS to a form by selecting the appropriate component, styling hooks, and utility classes based on the guidance provided.

Frequently Asked Questions about applying-slds

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

FAQPage Schema
How do I apply Salesforce Lightning Design System styling hooks for UI theming?▼

Salesforce Lightning Design System styling hooks allow you to customize component theming by overriding CSS custom properties. This Skill provides guidelines on applying these hooks alongside utility classes for consistent layout, spacing, and visual design.

What is the best way to select the right SLDS component for a UI pattern?▼

Selecting the right SLDS component involves matching your UI pattern to the Salesforce Lightning Design System library. This Skill guides you through component selection, ensuring you choose appropriate elements while maintaining accessibility best practices.

How do I use SLDS utility classes for layout and spacing?▼

SLDS utility classes apply responsive layout and spacing rules directly in your markup. This Skill offers guidance on combining these utility classes with styling hooks to structure your UI efficiently without writing custom CSS.

Do I need prior knowledge of SLDS concepts to use this design system guidance?▼

Yes, applying SLDS requires an existing understanding of Salesforce Lightning Design System concepts. This Skill focuses on providing actionable guidelines for component selection, styling, and accessibility rather than teaching foundational SLDS concepts.

Can I get help selecting appropriate icons from the SLDS library?▼

Yes, this Skill assists in selecting appropriate icons from the Salesforce Lightning Design System library. It provides guidance on choosing icons that align with your UI components and overall design context.

Does applying SLDS include accessibility considerations for UI components?▼

Applying SLDS includes accessibility considerations to ensure UI components are usable. This Skill provides reminders on accessibility best practices when selecting components, styling with hooks, and using utility classes.

Related Skills

Explore More Design & Creative Skills→
padjeipadjei

design-systems-slds-apply

Apply Salesforce Lightning Design System components and styling hooks to Lightning web applications.

Community
Intermediate
angryracoonangryracoon

design-systems-slds-apply

Apply SLDS v2-compliant styling to Salesforce user interfaces.

Community
Advanced
forcedotcomforcedotcom
803

uplifting-components-to-slds2

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

Official
Intermediate
superpollo02superpollo02

shadcn

Generate shadcn/ui-inspired component guidance with token-first rules and WCAG 2.2 AA constraints.

Community
Intermediate