skills.rest
angryracoon
angryracoonCOMMUNITY
Explore all skills by this author →
GitHub

design-systems-slds-apply

Apply SLDS v2-compliant styling to Salesforce user interfaces.

Updated Jun 17, 2026
Search Tags:#blueprints#icons#salesforce#utility classes#slds#styling hooks#lightning web components
One-click install
npx skills add https://github.com/angryracoon/ARIEF-VISEO-DEV-ORG --skill design-systems-slds-apply
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-systems-slds-apply
Source: https://github.com/angryracoon/ARIEF-VISEO-DEV-ORG/tree/main/.agents/skills/design-systems-slds-apply
Command: npx skills add https://github.com/angryracoon/ARIEF-VISEO-DEV-ORG --skill design-systems-slds-apply

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill removes the guesswork from building Salesforce user interfaces by showing exactly which SLDS patterns, components, hooks, utilities, and icons to use.

Core Features & Use Cases

  • Component Selection: Chooses between Lightning Base Components, SLDS blueprints, styling hooks, and custom CSS in the correct order.
  • SLDS Styling Guidance: Applies valid surface, accent, spacing, border, typography, and shadow hooks without inventing unsupported tokens.
  • Blueprint and Utility Usage: Guides cards, forms, modals, tables, grids, badges, and other interface patterns with SLDS-compliant classes.
  • Icon Selection and Accessibility: Helps pick the right icon category and ensures accessible icon usage with proper alternative text.
  • Validation and Guardrails: Reinforces linter-safe markup, verified artifacts, and checklist-based quality checks for SLDS v2.
  • Use Case: A developer building a responsive record card can use this Skill to choose lightning-card, add the right grid utilities, theme it with approved hooks, and select a matching icon.

Quick Start

Ask for the SLDS pattern you need, the framework you are using, and any style or accessibility constraints, and the Skill will recommend the correct component, blueprint, hooks, utilities, and icons.

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 SLDS styling hooks correctly in Lightning Web Components?▼

Applying SLDS styling hooks in Lightning Web Components involves selecting valid surface, accent, spacing, border, and shadow tokens without inventing unsupported values. This ensures your custom UI themes pass quality checks and align with SLDS v2 requirements.

When should I use Lightning Base Components vs SLDS blueprints for my Salesforce UI?▼

Choosing between Lightning Base Components and SLDS blueprints requires evaluating the correct component selection order. You should prioritize base components, then fall back to SLDS blueprints, styling hooks, or custom CSS to ensure linter-safe markup and SLDS v2 compliance.

What is the best way to ensure SLDS icon accessibility in Salesforce applications?▼

Ensuring SLDS icon accessibility requires selecting the correct icon category and providing proper alternative text. This approach guarantees screen readers interpret icons correctly within your linter-safe SLDS markup.

Does this approach work for building responsive SLDS cards and modals in non-LWC implementations?▼

Yes, this approach works for building responsive SLDS cards, forms, and modals in non-LWC implementations. It guides you to use SLDS-compliant classes, blueprints, and utility classes to structure layouts correctly regardless of the framework.

Why are my custom CSS utility classes failing the SLDS linter check?▼

Custom CSS utility classes fail SLDS linter checks when they bypass approved blueprints or invent unsupported styling tokens. You must use verified SLDS utility classes and valid styling hooks to maintain linter-safe markup and pass quality validations.

How do I structure an SLDS table layout using utility classes?▼

To structure an SLDS table layout, you apply verified SLDS utility classes for grids and spacing. This ensures your table follows the correct blueprint, maintains accessibility, and passes linter-safe markup checks for SLDS v2.

Related Skills

Explore More Software Engineering Skills→
CollabalistCollabalist

applying-slds

Apply Salesforce Lightning Design System guidelines to UI components.

Community
Intermediate
padjeipadjei

design-systems-slds2-migrate

Migrate Lightning Web Components from SLDS 1 to SLDS 2 with linter checks and guidance.

Community
Advanced
JaganproJaganpro
423

sf-lwc

Scaffold Lightning Web Components with PICKLES architecture and Jest tests.

Community
Advanced
padjeipadjei

design-systems-slds-apply

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

Community
Intermediate