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

design-systems-slds-apply

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

Updated Jul 2, 2026
Search Tags:#accessibility#styling#icons#UI design#SLDS
One-click install
npx skills add https://github.com/padjei/SF_Agents --skill design-systems-slds-apply-padjei
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-systems-slds-apply
Source: https://github.com/padjei/SF_Agents/tree/main/.claude/skills/design-systems-slds-apply
Command: npx skills add https://github.com/padjei/SF_Agents --skill design-systems-slds-apply-padjei

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires node, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps developers apply Salesforce Lightning Design System (SLDS) UI elements correctly, avoiding common pitfalls and ensuring consistent, accessible UI.

Core Features & Use Cases

  • Component Selection: Guide on choosing the right SLDS component or blueprint for UI patterns.
  • Styling: Instructions for applying colors, spacing, typography, shadows, and utility classes.
  • Icons: Selecting and implementing appropriate SLDS icons.
  • Accessibility: Basic reminders on accessibility best practices for SLDS components.
  • Use Case: When building a UI that requires SLDS components, such as a form, table, or card, use this Skill to choose the correct blueprint, apply styling hooks, use utility classes, and select icons.

Quick Start

Apply SLDS styling to a new card component in your LWC application.

Frequently Asked Questions about design-systems-slds-apply

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

FAQPage Schema
How do I apply Salesforce Lightning Design System styling to a Lightning web component?▼

Apply SLDS styling to Lightning web components by selecting the correct UI blueprint, using styling hooks for colors and spacing, applying utility classes, and implementing appropriate SLDS icons for consistent interfaces.

How do I choose the right SLDS component or blueprint for a UI pattern?▼

Choose the right SLDS component by matching your UI pattern requirements to the available SLDS blueprints, ensuring you select the appropriate base component for forms, tables, or cards before applying styling hooks.

How do styling hooks work for customizing SLDS component colors and spacing?▼

Styling hooks allow you to customize SLDS component colors, spacing, typography, and shadows by applying CSS custom properties, ensuring your UI styling overrides remain maintainable and consistent with the design system.

Do I need Node.js to use SLDS styling hooks and utility classes in my application?▼

Node.js is required as a dependency for setting up the environment to apply SLDS styling hooks, utility classes, and icons efficiently within your Salesforce Lightning web application development workflow.

What is the best way to ensure accessibility when implementing SLDS UI components?▼

Ensure accessibility when implementing SLDS UI components by following the built-in accessibility best practices and reminders provided for selecting components, applying styling hooks, and implementing icons correctly.

How do I select and implement the correct icons for a Salesforce Lightning Design System UI?▼

Select and implement SLDS icons by referencing the design system icon library, choosing the appropriate category and icon name, and applying the correct utility classes to ensure proper visual consistency and accessibility.

Related Skills

Explore More Software Engineering Skills→
sfdc-brendansfdc-brendan
15

sf-lwc-design

Create SLDS 2 compliant LWC components using --slds-g-* hooks.

Community
Advanced
CollabalistCollabalist

applying-slds

Apply Salesforce Lightning Design System guidelines to UI components.

Community
Intermediate
padjeipadjei

design-systems-slds-validate

Validate Lightning Web Components for SLDS compliance and generate a detailed scorecard.

Community
Advanced
Lyiu-10Lyiu-10

tailwind-css-patterns

Apply Tailwind CSS v4.1+ utility classes for responsive, dark mode-supported component styling.

Community
Intermediate