skills.rest
GeneralJerel
GeneralJerelCOMMUNITY
Explore all skills by this author →
GitHub

Salesforce Lightning Design System

Build Salesforce-like CRM interfaces with SLDS components and BEM CSS patterns.

Updated Mar 23, 2026
Search Tags:#ui#frontend#crm#design-system#salesforce#lwc#lightning
One-click install
npx skills add https://github.com/GeneralJerel/awesome-style-refs --skill salesforce-lightning-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Salesforce Lightning Design System
Source: https://github.com/GeneralJerel/awesome-style-refs/tree/main/skills/lightning-design
Command: npx skills add https://github.com/GeneralJerel/awesome-style-refs --skill salesforce-lightning-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Standardize and accelerate enterprise CRM UI development using Salesforce Lightning design patterns.

Core Features & Use Cases

  • BEM-based CSS patterns and utility classes for scalable UI construction.
  • SLDS token usage and components guidance for consistent interfaces across apps.
  • Accessibility and responsive layouts with keyboard navigation and color contrast.
  • Use cases include dashboards, record pages, data tables, kanban boards, and other CRM-like interfaces.

Quick Start

Adopt the Salesforce Lightning Design System patterns to scaffold a two-column record page with data tables and kanban boards.

Frequently Asked Questions about Salesforce Lightning Design System

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

FAQPage Schema
How do I build a Salesforce Lightning UI for a CRM dashboard?▼

To build a Salesforce Lightning UI, apply standardized SLDS component patterns, BEM CSS methodology, and design tokens to construct consistent, scalable CRM dashboards with responsive layouts and accessibility support.

Does the Salesforce Lightning Design System support LWC components?▼

Yes, the Salesforce Lightning Design System ensures LWC compatibility by providing BEM-based CSS patterns, SLDS token usage, and component guidance that integrate seamlessly with Lightning Web Components for scalable interface construction.

What's the best way to create responsive record pages using SLDS?▼

The best way to create responsive record pages with SLDS is to use SLDS utility classes and design tokens, ensuring proper color contrast, keyboard navigation, and scalable BEM CSS patterns for accessible layouts.

Can I use Salesforce Lightning design patterns for kanban boards and data tables?▼

Yes, you can use Salesforce Lightning design patterns to scaffold kanban boards and data tables, applying SLDS components and BEM CSS methodology to maintain consistent UI across enterprise CRM interfaces.

Why use BEM CSS methodology with the Salesforce Lightning Design System?▼

BEM CSS methodology is used with the Salesforce Lightning Design System to provide scalable, structured styling for enterprise CRM interfaces, ensuring consistent class naming and maintainable UI components across complex applications.

Do I need prior Salesforce experience to use SLDS for frontend development?▼

While prior Salesforce experience helps, SLDS can be applied by frontend developers to build CRM-like interfaces using provided design tokens, utility classes, and component patterns without deep platform-specific knowledge.

Related Skills

Explore More Design & Creative Skills→
sfdc-brendansfdc-brendan
15

sf-lwc-design

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

Community
Advanced
pingqLINpingqLIN

lwc

Provide guidelines and best practices for developing Lightning Web Components on the Salesforce Platform.

Community
Intermediate
cowwoccowwoc
101

git-rewrite-history

Rewrite Git history safely using git-filter-repo.

Community
Intermediate
fefogarciafefogarcia
1

carbon-design-system

Develop user interfaces with IBM's Carbon Design System v11.

Community
Intermediate