lwc-offline-and-mobile
Use when designing or reviewing Lightning Web Components for the Salesforce mobile app, mobile device capabilities, or offline-aware behavior. Triggers: 'lightning/mobileCapabilities', 'mobile lwc', 'offline lwc', 'supported mobile app only', 'barcode scanner availability'. NOT for Mobile SDK or fully native app architecture unless the decision is whether LWC in the Salesforce mobile app is sufficient.
Best use case
lwc-offline-and-mobile is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Use when designing or reviewing Lightning Web Components for the Salesforce mobile app, mobile device capabilities, or offline-aware behavior. Triggers: 'lightning/mobileCapabilities', 'mobile lwc', 'offline lwc', 'supported mobile app only', 'barcode scanner availability'. NOT for Mobile SDK or fully native app architecture unless the decision is whether LWC in the Salesforce mobile app is sufficient.
Teams using lwc-offline-and-mobile should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/lwc-offline-and-mobile/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How lwc-offline-and-mobile Compares
| Feature / Agent | lwc-offline-and-mobile | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Use when designing or reviewing Lightning Web Components for the Salesforce mobile app, mobile device capabilities, or offline-aware behavior. Triggers: 'lightning/mobileCapabilities', 'mobile lwc', 'offline lwc', 'supported mobile app only', 'barcode scanner availability'. NOT for Mobile SDK or fully native app architecture unless the decision is whether LWC in the Salesforce mobile app is sufficient.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
SKILL.md Source
Use this skill when a component is expected to behave well on phones or tablets and the team needs to be explicit about what the Salesforce mobile app can and cannot provide. Mobile capability APIs, offline expectations, and container-specific behavior all need to be designed intentionally instead of assumed from desktop LWC behavior. ## Before Starting - Will the component run in the Salesforce mobile app, a mobile browser, Experience Cloud, or multiple containers? - Does it need device hardware access such as camera, barcode scanning, or location, or is the main concern responsive rendering and limited connectivity? - What must happen when the device is offline, regains connectivity, or resumes after the app was backgrounded? ## Core Concepts ### Mobile Capabilities Exist Only In Supported Mobile App Contexts Salesforce mobile capability APIs are available only when the LWC runs in a supported mobile app on a mobile device. A component that imports a mobile capability module must still detect availability and degrade gracefully for unsupported containers. ### Offline Is A Product Design Question, Not A Checkbox An LWC is not automatically offline-capable just because it renders in the mobile app. The team has to choose a data strategy that tolerates network loss, stale state, and reconnect behavior. Any Apex or server-dependent action should be treated skeptically until its offline story is explicit. ### Touch And Form Factor Shape The Interaction Model Small screens, intermittent connectivity, and foreground/background transitions make a mobile component behave differently from desktop even when the code is identical. Dense tables, hover assumptions, and desktop-only interaction patterns are usually the first things to break. ### Container Choice Matters Some requirements fit well inside the Salesforce mobile app with LWC. Others require deeper mobile platform control or a different channel strategy. Choosing between LWC in the mobile app and a more specialized mobile architecture should happen before the implementation grows around the wrong container. ## Common Patterns ### Capability-Gated Device Access **When to use:** The component needs camera, location, barcode, or another mobile capability. **How it works:** Detect capability availability first, then show the mobile path only in supported environments and offer a safe fallback elsewhere. **Why not the alternative:** Assuming every device or container supports the API causes broken buttons and dead-end UX. ### Offline-Tolerant Read And Resume Pattern **When to use:** Users may lose connectivity while viewing or collecting information. **How it works:** Keep the UI resilient to stale data, preserve in-progress state intentionally, and refresh or reconcile when connectivity returns. **Why not the alternative:** Desktop-style refresh assumptions produce confusing behavior after reconnect or app resume. ### Mobile-First Simplification **When to use:** The same business task must work on desktop and mobile, but the mobile surface has less space and less tolerance for heavy UI. **How it works:** Reduce fields, favor clear primary actions, and avoid patterns that require hover, precise pointer control, or dense grid interaction. ## Decision Guidance | Situation | Recommended Approach | Reason | |---|---|---| | Need supported device APIs inside Salesforce mobile | LWC plus mobile capability modules | Best fit when the supported app container is enough | | Must work in desktop and mobile | Capability-gated LWC with graceful fallback | Keep one component contract while respecting container differences | | Requires reliable work with intermittent connectivity | Design an explicit offline-tolerant state model | Offline behavior will not emerge automatically | | Needs deeper native platform control than the mobile app provides | Reconsider architecture, possibly Mobile SDK or another mobile approach | LWC in Salesforce mobile has deliberate boundaries | ## Recommended Workflow Step-by-step instructions for an AI agent or practitioner activating this skill: 1. Gather context — confirm the org edition, relevant objects, and current configuration state 2. Review official sources — check the references in this skill's well-architected.md before making changes 3. Implement or advise — apply the patterns from Core Concepts and Common Patterns sections above 4. Validate — run the skill's checker script and verify against the Review Checklist below 5. Document — record any deviations from standard patterns and update the template if needed --- ## Review Checklist - [ ] Mobile capability APIs are checked for availability before use. - [ ] Unsupported containers have an intentional fallback or disabled state. - [ ] Offline, reconnect, and app-resume behavior were designed explicitly. - [ ] The UI fits touch interaction and smaller form factors. - [ ] Server-dependent actions are reviewed for what happens without connectivity. - [ ] The team verified that LWC in the Salesforce mobile app is the right container choice. ## Salesforce-Specific Gotchas 1. **Mobile capability APIs are not generally available on desktop or unsupported browsers** — the component must gate them at runtime. 2. **Offline expectations fail first at the server boundary** — Apex or other server-only actions need an explicit degraded experience. 3. **App resume can leave UI state stale** — mobile users re-enter the app after navigation and backgrounding, so refresh logic matters. 4. **A layout that is acceptable on desktop can be unusable on touch devices** — form factor and interaction design are part of the implementation, not follow-up polish. ## Output Artifacts | Artifact | Description | |---|---| | Mobile/offline fit assessment | Decision on whether the LWC and container fit the mobile requirement | | Capability review | Findings on device API checks, unsupported environments, and fallback behavior | | Offline behavior plan | Guidance on stale-state handling, reconnect, and mobile-first interaction design | ## Related Skills - `lwc/wire-service-patterns` — use when the core issue is data provisioning and refresh rather than mobile behavior itself. - `lwc/lifecycle-hooks` — use when app resume, cleanup, or render timing issues dominate the bug. - `experience/experience-cloud-headless-and-lwr` — use when the requirement may fit a different channel rather than the Salesforce mobile app.
Related Skills
lwc-mobile-offline-and-briefcase
Use when designing LWCs that must work offline in the standard Salesforce Mobile App, and when configuring Briefcase Builder rules to prime records onto user devices. Covers form-factor detection (`@salesforce/client/formFactor`), Lightning Data Service offline-cache behavior, Briefcase priming-rule design, conflict resolution on reconnect, and the legacy SmartStore / IndexedDB picture for context. Triggers: 'briefcase builder rule design', 'lwc not working offline', 'how do I prime records to user devices', 'sync conflict on reconnect', 'offline draft persistence in lwc'. NOT for Field Service Mobile offline priming (use admin/fsl-mobile-app-setup or architect/fsl-offline-architecture — FSL has its own priming pipeline). NOT for general LWC mobile container patterns / device APIs (use lwc/lwc-offline-and-mobile).
fsl-offline-architecture
Use this skill when designing FSL Mobile offline-first architecture: data priming strategy, priming limits, conflict resolution patterns, and sync failure handling. Trigger keywords: FSL offline priming, briefcase sync FSL, offline data limits, conflict resolution MERGE_ACCEPT_YOURS, ghost records FSL. NOT for LWC offline-and-mobile (generic LWC offline, covered by lwc/lwc-offline-and-mobile), standard Salesforce Mobile App offline, or Experience Cloud offline.
fsl-mobile-app-extensions
Use when building custom LWC Quick Actions, Global Actions, deep links, or offline data extensions for the Salesforce Field Service (FSL) native mobile app. Trigger keywords: FSL mobile extension, LWC action FSL, field service deep link, offline custom action, FSL mobile toolkit. NOT for LWC in standard Salesforce mobile app or Lightning Experience.
fsl-custom-actions-mobile
Use this skill when building custom LWC actions for the FSL Mobile app: barcode scanning, GPS capture, photo/signature capture, or custom guided workflows on mobile. Trigger keywords: FSL Mobile custom action, lightning__GlobalAction FSL, barcode scanner LWC, mobileCapabilities, Nimbus plugin, FSL lightning SDK. NOT for standard Salesforce Mobile App quick actions, standard Experience Cloud pages, or desktop Lightning Experience LWC components.
mobile-publisher
Use when planning, configuring, or maintaining a Salesforce Mobile Publisher branded app — a customer-facing or partner-facing mobile app distributed through Apple App Store or Google Play, built on either the Experience Cloud (LWR/Aura) Mobile Publisher template or the Field Service Mobile Publisher template. Triggers: 'salesforce mobile publisher branded app', 'experience cloud mobile app store distribution', 'mobile publisher push notifications certificate', 'app store review rejection salesforce', 'mobile publisher version policy update'. NOT for the standard Salesforce Mobile App customization (use lightning-app-builder-advanced), NOT for Field Service Lightning offline configuration (use fsl-mobile-app-setup), NOT for hybrid web apps embedded in WebView.
fsl-mobile-workflow-design
Use this skill when designing, troubleshooting, or reviewing FSL Mobile worker workflows — including job lifecycle management, offline data capture, customer signature collection, parts consumption, and geolocation-triggered status transitions. Trigger keywords: FSL mobile, field service mobile workflow, offline job lifecycle, technician mobile, service appointment status, briefcase priming, parts consumption mobile, signature capture FSL. NOT for mobile app installation/configuration, FSL scheduling optimization, Dispatcher Console setup, or Work Capacity management.
fsl-mobile-app-setup
Use this skill when configuring, extending, or troubleshooting the Salesforce Field Service (FSL) Mobile app for field technicians — including offline priming strategy, app extensions, deep linking, and custom branding. Trigger keywords: FSL mobile, Field Service mobile app, offline priming, mobile extension toolkit, app extensions for field service. NOT for standard Salesforce Mobile app configuration, Lightning App Builder layouts for desktop, or Field Service Lightning dispatcher console setup.
xss-and-injection-prevention
Use when writing or reviewing Visualforce pages, Apex controllers, or LWC components that output user-supplied data, build dynamic queries, or construct HTTP responses. Triggers: 'XSS in Visualforce', 'SOQL injection vulnerability', 'how to encode output in Apex', 'JSENCODE Visualforce', 'open redirect prevention'. NOT for Apex CRUD/FLS enforcement (use soql-security or apex-crud-and-fls), NOT for Shield encryption (use shield-encryption-key-management), NOT for AppExchange security review process (use secure-coding-review-checklist).
visualforce-security-and-modernization
Use when hardening or modernizing legacy Visualforce pages — covers the platform CSRF token model and when disabling it is a security regression, view state encryption guarantees and the 170 KB ceiling, FLS/CRUD enforcement gaps on `<apex:outputField>` and on getters that return sObjects, `<apex:includeScript>` interaction with the org Content Security Policy, hosting LWC inside a VF page via `lightning:container` / `lightning-out`, and the retire-vs-harden-vs-leave-alone decision for an inventory of legacy pages. Triggers: 'should I rewrite this Visualforce page in LWC', 'CSRF protection disabled on Visualforce page is that safe', 'community user sees a field they should not on a Visualforce page', 'view state encryption is that enough for sensitive data', 'how do I host an LWC inside a Visualforce page', 'apex:dynamicComponent and apex:actionFunction safe to keep'. NOT for greenfield Visualforce architecture (use apex/visualforce-fundamentals — controller types, view state pattern selection, PDF rendering); NOT for Visualforce email template authoring (use apex/visualforce-email-templates if/when that skill is authored); NOT for general Apex security review across triggers and async (use apex/soql-security and security/secure-coding-review-checklist).
transaction-security-policies
Transaction Security policy creation and configuration: condition builder, enhanced policies, enforcement actions (block, MFA, notification, end session), real-time monitoring mode, and policy troubleshooting. NOT for Event Monitoring log analysis or Shield Event Monitoring setup (use event-monitoring). NOT for Apex testing or debug-log analysis.
sso-saml-troubleshooting
Diagnosing broken SAML SSO into Salesforce — IdP-initiated vs SP-initiated flows, signing-certificate validity / expiry, NameID format mismatches, RelayState handling, audience / entityId / issuer mismatches, clock skew, the SAML Assertion Validator in Setup, the Login History debug log, and the My Domain prerequisite for SSO. Covers the standard diagnostic loop: read the SAML response, identify which check failed, fix at the IdP or SP. NOT for OAuth / OpenID Connect SSO (see security/oauth-openid-troubleshooting), NOT for setting up SSO from scratch (see security/sso-saml-setup).
shield-kms-byok-setup
Configure Shield Platform Encryption with customer-supplied (BYOK) or customer-held (Cache-Only Key Service) tenant secrets, rotate them, and recover. NOT for Classic Encryption or field masking.