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

sf-lwc-mobile

Build mobile-ready Lightning Web Components with touch targets and offline patterns.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers build mobile-first Lightning Web Components that work reliably on Salesforce Mobile and standard mobile browsers by addressing touch targets, thumb-zone layouts, offline readiness, and responsive patterns.

Core Features & Use Cases

  • Touch targets sized at least 48x48px across interactive elements.
  • Thumb-zone aware layouts and bottom action bars for easy reach on mobile.
  • Offline-capable UI patterns and responsive typography to adapt across devices.
  • Use cases include building LWC for mobile apps, forms, dashboards, and data views optimized for mobile constraints.

Quick Start

Implement the mobile-first patterns described above in your LWC to ensure touch targets meet 48px, include a bottom thumb-zone action bar, and apply responsive typography.

Frequently Asked Questions about sf-lwc-mobile

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

FAQPage Schema
How do I make Lightning Web Components touch-friendly for the Salesforce Mobile App?▼

To make Lightning Web Components touch-friendly for the Salesforce Mobile App, implement mobile-first patterns ensuring interactive elements meet 48x48px touch target requirements and utilize thumb-zone layouts for accessible reach.

What is the minimum touch target size for LWC mobile responsive design?▼

The minimum touch target size for LWC mobile responsive design is 48x48px. Sizing interactive elements to this dimension ensures reliable touch accuracy across small mobile devices and tablets within the Salesforce App.

How do I build offline-capable LWC UIs for Salesforce mobile devices?▼

Build offline-capable LWC UIs by applying offline patterns alongside responsive typography and SLDS-based styling. This approach ensures your components maintain functionality and adapt across mobile devices when network connectivity is unavailable.

Does this approach support responsive layouts across small devices and tablets?▼

Yes, this approach supports responsive layouts across small devices and tablets. It applies SLDS-based responsive styling and dynamic typography to adapt component views seamlessly across varying mobile screen sizes.

What is the best way to layout bottom action bars for mobile UX patterns in LWC?▼

The best way to layout bottom action bars for mobile UX patterns in LWC is positioning them within the thumb-zone. This placement ensures easy reach and comfortable interaction for users navigating forms or dashboards on mobile.

Can I use SLDS for dynamic typography in mobile-first Lightning Web Components?▼

Yes, you can use SLDS for dynamic typography in mobile-first Lightning Web Components. Applying SLDS-based responsive styling allows text and UI elements to adapt dynamically across different mobile screen dimensions.

Related Skills

Explore More Software Engineering Skills→
padjeipadjei

design-systems-slds-apply

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

Community
Intermediate
Rikinshah787Rikinshah787
5

recon

Audit website mobile responsiveness for touch and offline readiness.

Community
Intermediate
cheatcode-aicheatcode-ai
15

mobile-app

Build mobile-first responsive web surfaces with Expo Router or Next.js.

Official
Intermediate
bhanu91221bhanu91221
2

aura-patterns

Guide Salesforce developers through Aura-to-LWC migration and interop patterns.

Community
Advanced