skills.rest
sfdc-brendan
sfdc-brendanCOMMUNITY
Explore all skills by this author →
GitHub

sf-lwc-ux

Apply composable UX patterns and accessible interactions to Salesforce Lightning Web Components.

15|Updated Jan 27, 2026
Search Tags:#accessibility#wcag#responsive#ux#design-patterns#component-api#lwc
One-click install
npx skills add https://github.com/sfdc-brendan/Demo-Lab --skill sf-lwc-ux
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sf-lwc-ux
Source: https://github.com/sfdc-brendan/Demo-Lab/tree/main/skills/sf-lwc-ux
Command: npx skills add https://github.com/sfdc-brendan/Demo-Lab --skill sf-lwc-ux

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Lightning Web Components often suffer from inconsistent UX patterns, poor accessibility, and fragmented layout approaches across projects. This Skill centralizes best practices for UX, interaction design, and responsive behavior tailored to the Salesforce LWC ecosystem.

Core Features & Use Cases

  • Composable patterns and a clear hierarchy for building consistent, maintainable UIs within LWCs.
  • Accessibility-first guidance covering keyboard navigation, focus management, ARIA roles, and WCAG 2.1 AA considerations.
  • Responsive layout strategies that work within the LWC shadow DOM constraints, enabling adaptive dashboards, forms, and component compositions.
  • Real-world guidance for building scalable component APIs and reusable UI primitives that pair with SLDS styling patterns.

Quick Start

Start by applying the recommended composition hierarchy to a new LWC page and enable keyboard focus, semantic roles, and screen-reader-friendly labels.

Frequently Asked Questions about sf-lwc-ux

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

FAQPage Schema
How do I improve Lightning Web Component UX with consistent design patterns?▼

Improve Lightning Web Component UX by applying composable design patterns that enforce consistent component APIs, accessible interactions, and responsive layout strategies across loading, empty, and error states.

How do I make Salesforce LWC components accessible and meet WCAG 2.1 AA standards?▼

Make Salesforce LWC components accessible by implementing keyboard navigation, focus management, semantic ARIA roles, and screen-reader-friendly labels that align with WCAG 2.1 AA accessibility guidelines.

What is the best way to handle responsive layouts inside the LWC shadow DOM?▼

Handle responsive layouts inside the LWC shadow DOM by applying specialized CSS practices and adaptive strategies that enable scalable dashboards and forms within shadow DOM constraints.

Can I use SLDS styling patterns to build reusable LWC UI primitives?▼

You can build reusable LWC UI primitives by pairing scalable component API conventions with SLDS styling patterns to create maintainable and consistent Lightning Web Component interfaces.

Why does my LWC page have inconsistent UX and fragmented layout approaches?▼

LWC pages have inconsistent UX when projects lack centralized best practices for interaction design and responsive behavior, which can be resolved by applying a clear composition hierarchy and standardized states.

Do I need a specific composition hierarchy to build maintainable Lightning Web Components?▼

You need a recommended composition hierarchy to build maintainable Lightning Web Components, starting with semantic roles and keyboard focus to establish a consistent, accessible user experience foundation.

Related Skills

Explore More Design & Creative Skills→
bhanu91221bhanu91221
2

salesforce-dx-project

Configure Salesforce DX projects by managing sfdx-project.json and package directories.

Community
Intermediate
fcsonlinefcsonline
49

accessibility

Apply WCAG 2.1 AA accessibility patterns to the DroneRoute UI.

Community
Intermediate
forcedotcomforcedotcom
803

uplifting-components-to-slds2

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

Official
Intermediate
Sumeet138Sumeet138
1

web-component-design

Design cross-framework UI component systems with shared APIs for React, Vue, and Svelte.

Community
Intermediate