Home / lwc
Lwc skills (83)
Lightning Web Components: reactivity, wire adapters, communication, accessibility, performance, security, Jest.
- aura-to-lwc-migrationMigrating Aura components to LWC: feature mapping, interoperability wrappers, event translation, navigation patterns, and Aura-LWC coexistence strategies.
- commerce-lwc-componentsUse this skill when building or customizing Lightning Web Components for B2B Commerce or D2C LWR storefronts — product display tiles, cart line-item components, checkout step components, wishlist buttons, and product comparison widgets.
- common-lwc-runtime-errorsDiagnose and fix runtime errors in Lightning Web Components including wire adapter failures, shadow DOM boundary violations, event propagation mistakes, async rendering timing bugs, NavigationMixin errors, Lightning Locker vs Lightning Web Security conflicts...
- component-communicationChoose and implement LWC communication — @api, events, LMS, @wire between parent, child, sibling, or workspace components.
- custom-property-editor-for-flowUse when building or reviewing an LWC Custom Property Editor for Flow screen or action configuration.
- drag-and-dropImplement drag-and-drop in LWC using HTML5 Drag and Drop API, keyboard alternatives, accessible announcements, and file drop zones. NOT for handling a file the user dropped onto the component - use lwc/file-upload-patterns.
- experience-cloud-api-accessUse this skill when configuring or troubleshooting API access for Experience Cloud external users and guest users: guest user Apex data access, Customer Community Plus or Partner Community REST/SOAP API access.
- experience-cloud-authenticationExperience Cloud authentication customization — login pages, self-registration, social sign-on. Triggers: Experience Cloud login, community auth, self-registration. NOT for multi-IdP enterprise SSO — use lwc/experience-cloud-multi-idp-sso.
- experience-cloud-lwc-componentsUse when building custom LWC components for Experience Cloud (Experience Builder sites, LWR portals, Aura-based communities).
- experience-cloud-multi-idp-ssoUse this skill when configuring multiple identity providers (OIDC and/or SAML) on a single Experience Cloud site or across tenant-specific portals in the same org — covering auth provider registration, Start SSO URL routing, Federation.
- experience-cloud-search-customizationUse this skill when configuring or extending search on an Experience Cloud site — covering Search Manager scope configuration, LWR vs Aura search component selection, federated search setup, guest user search access, and custom search result components.
- file-upload-patternsUpload files in LWC: lightning-file-upload, manual multipart, large-file chunked upload, and ContentDocument associations.
- headless-experience-cloudUse when building custom frontends (React, Vue, mobile, static sites) that consume Salesforce CMS content via the Connect REST API headless delivery endpoint.
- knowledge-article-lwcUse this skill when building Lightning Web Components that query, display, or accept feedback on Salesforce Knowledge articles — covering Knowledge__kav SOQL/SOSL retrieval via Apex, caching strategy, and Experience.
- lifecycle-hooksUse when building or reviewing Lightning Web Components — specifically lifecycle.
- lightning-navigation-dead-link-handlingUse when an LWC navigates via NavigationMixin to records or pages that may no longer exist, lack the user's access, or be permanently moved.
- lightning-out-2-embeddingUse when embedding a custom Lightning web component into an external, non-Salesforce web app (React, Angular, Vue, or plain JavaScript) with Lightning Out 2.0 — the Winter '26 GA feature built on Lightning Web Runtime that renders each.
- lwc-accessibilityUse when designing or reviewing LWCs for keyboard access, semantic labeling, focus.
- lwc-accessibility-patternsUse when implementing ARIA attributes, keyboard navigation, live regions, WCAG 2.1, focus traps, or accessible datatables in LWCs.
- lwc-app-builder-configUse when an LWC needs to appear, be configured, and be constrained inside Lightning App Builder, Experience Builder, Home Page, or Flow screens via its js-meta.xml file — including isExposed, targets, targetConfigs, supportedFormFactors, objects scoping, and...
- lwc-async-patternsAsync/await and Promise patterns in LWC: imperative Apex, loading states, error handling, concurrent wire + imperative, AbortController for in-flight cancellation, Promise.all for parallel calls.
- lwc-base-component-recipesUse this skill when building record forms or data tables with Salesforce standard base components: lightning-record-form, lightning-record-edit-form, lightning-record-view-form, and lightning-datatable.
- lwc-chart-and-visualizationCharts and visualization in LWC: Chart.js, D3, Plotly via Static Resources; Lightning chart components; performance patterns for 10k+ data points; accessibility; SLDS theming.
- lwc-conditional-renderingUse when writing, reviewing, or migrating Lightning Web Component templates that branch between UI states with `lwc:if`, `lwc:elseif`, and `lwc:else`, including getter-backed booleans, loading/error/ready state machines, keep-state vs reset-state toggles, and...
- lwc-console-workspace-apiUse when an LWC needs to programmatically manipulate Service Console workspace tabs and the utility bar — opening tabs and subtabs, refreshing or closing tabs, setting tab labels and icons, detecting console context, and integrating with the utility bar — via...
- lwc-cross-tab-state-syncUse when an LWC needs to react to events that happen in another browser tab — record updates, login state, draft autosave, console-tab navigation.
- lwc-css-and-stylingStyling LWC components — SLDS design tokens, --slds-c-* styling hooks, scoped CSS via shadow DOM, ::part() for restyling base components, light DOM (lwc:render-mode='light'), why CSS doesn't pierce the shadow boundary, !important vs specificity, and SLDS...
- lwc-custom-datatable-typesUse when you need to extend `lightning-datatable` with custom cell renderings: status pills, progress bars, image thumbnails, action cells, editable pickliststo, rich-text, or any column that `lightning-datatable` does not ship out of the box.
- lwc-custom-event-patternsCustomEvent design — bubbles/composed/cancelable, detail payloads, naming, and why an event is not reaching the parent.
- lwc-custom-lookupCustom lookup component in LWC — typeahead/autocomplete that searches records via Apex SOSL/SOQL, shows pills, supports keyboard navigation, and manages open/close state.
- lwc-data-tableFirst-time lightning-datatable setup — columns, key-field, basic sort, row actions.
- lwc-datatable-advancedAdvanced lightning-datatable — inline edit, custom cell types, infinite scroll, row errors.
- lwc-debugging-devtoolsUse when you need to diagnose live Lightning Web Component behavior in the browser — setting breakpoints, stepping through @wire emits, inspecting component state with the Lightning Component Inspector, reading.
- lwc-drag-and-dropHTML5 drag-and-drop API in LWC — draggable="true", dataTransfer.setData / getData, ondragover preventDefault, drop zones, visual hover state, accessibility (keyboard alternatives, aria-grabbed deprecation), and shadow DOM event leakage.
- lwc-dynamic-componentsDynamic LWC component creation using the `lwc:component` directive, lazy-loaded dynamic imports (`import()`), and runtime component resolution for conditional rendering at scale.
- lwc-error-boundariesIsolate component errors so one failure does not blank an entire page using errorCallback and graceful fallbacks.
- lwc-focus-managementFocus trap, restore, and programmatic focus in modals, wizards, and dynamic lists. Triggers: focus trap LWC, focus restore, tabindex modal. NOT for general LWC accessibility review — use lwc/lwc-accessibility.
- lwc-forms-and-validationUse when building or reviewing Lightning Web Component form UX, especially the choice between `lightning-record-edit-form` and custom inputs, client-side validation with `reportValidity()`, server-side validation feedback, and file upload flows.
- lwc-graphql-wireUse when an LWC needs to read related records across multiple sObjects in one request, paginate a related list with cursors, or replace several overlapping `@wire(getRecord)` calls with a single shared-cache query.
- lwc-imperative-apexCall Apex methods imperatively from LWC — on button click, lifecycle hooks, or conditional logic.
- lwc-in-flow-screensUse when building, reviewing, or troubleshooting a custom Lightning Web Component that runs inside a Flow screen element, covering @api props exposed to Flow, FlowAttributeChangeEvent for output, validate() for user input validation, and flow navigation...
- lwc-internationalizationBuild LWCs with translation, locale-aware formatting, and RTL layouts.
- lwc-jest-testing-with-accessibilityUse when authoring or reviewing Jest unit tests for Lightning Web Components and the test plan must include explicit accessibility assertions — covers `@salesforce/sfdx-lwc-jest` setup, `createElement` / `document.body.appendChild` render harness...
- lwc-lds-writesUse when an LWC must create, update, or delete records via Lightning Data Service (`lightning/uiRecordApi` — `createRecord`, `updateRecord`, `deleteRecord`) or via `lightning-record-edit-form` / `lightning-record-form`.
- lwc-light-domUse Light DOM in LWC when third-party libraries or global CSS require document-level access.
- lwc-lightning-modalLightningModal base class (Winter '23+): extending LightningModal, open() static method, modal headers/bodies/footers, close() with result, size variants, accessibility. NOT for lightning-dialog legacy patterns (deprecated) — use lwc/lwc-modal-and-overlay.
- lwc-lightning-record-formslightning-record-form vs record-edit-form vs uiRecordApi for record create/edit in LWC. Triggers: lightning-record-form, record-edit-form, uiRecordApi form. NOT for fully custom forms — use lwc/lwc-forms-and-validation.
- lwc-local-developmentUse when previewing Lightning web components, Lightning apps, or Experience (LWR) sites in real time during development with Live Preview (formerly Local Dev) — the `sf lightning dev app` / `sf lightning dev site` / `sf lightning dev component` CLI commands...
- lwc-locker-to-lws-migrationMigrating LWCs from Lightning Locker Service to Lightning Web Security (LWS) — flipping the org switch safely, identifying components likely to break, removing Locker workarounds that are now unnecessary.
- lwc-mobile-offline-and-briefcaseUse 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.
- lwc-modal-and-overlayUse when choosing or reviewing overlay patterns in Lightning Web Components, especially `LightningModal`, confirmation dialogs, toasts, focus handling, and overlay dismissal behavior.
- lwc-navigation-mixinNavigate between Lightning pages, records, and apps from LWC via NavigationMixin.
- lwc-offline-and-mobileUse when designing or reviewing Lightning Web Components for the Salesforce mobile app, mobile device capabilities, or offline-aware behavior.
- lwc-performanceUse when designing or reviewing Lightning Web Components for slow initial load, heavy rerenders, large-list rendering, payload reduction, and lazy instantiation choices such as `lwc:if`, tabs, or dynamic components.
- lwc-performance-budgetsSet and enforce performance budgets for Lightning Web Components: bundle-size limits per component, LCP/INP field targets, wire-adapter count caps, and CI-gate configuration using Lighthouse or webpagetest.
- lwc-public-api-hardeningUse when an LWC exposes `@api` properties, `@api` methods, or design attributes in `<targetConfig>` and you need a defensive, predictable public contract.
- lwc-pubsub-patternsLegacy pubsub communication between LWCs on the same page (deprecated — prefer LMS).
- lwc-quick-actionsUse when building a Lightning Web Component that runs from a record page quick-action button — either a screen action that renders UI in a modal or a headless action that invokes logic with no UI.
- lwc-reactive-state-patternsLWC reactivity after API v48 — @track vs class fields, deep object updates, rerender pitfalls.
- lwc-record-pickerlightning-record-picker base component (Winter '24 GA): object/record filter, displayInfo/matchingInfo, graph-ql filters, accessibility. Replaces ad-hoc lookup inputs. NOT for a fully custom typeahead lookup — use lwc/lwc-custom-lookup.
- lwc-securityUse when designing or reviewing Lightning Web Components for DOM safety, Lightning Web Security.
- lwc-server-sent-eventsUse when building LWCs that must react to live server pushes — Platform Events, Change Data Capture, or streaming updates — via the lightning/empApi (CometD) subscription model.
- lwc-shadow-vs-light-dom-decisionDecide Shadow DOM vs Light DOM for an LWC — Salesforce distribution rules, Locker/LWS, third-party library needs. Triggers: shadow vs light DOM, renderMode decision. NOT for implementing Light DOM after the decision — use lwc/lwc-light-dom.
- lwc-show-toast-patternsShowToastEvent in LWC: variants (success/warning/error/info), modes (dismissible/pester/sticky), message formatting, NOT supported in LWR Experience Cloud sites, alternatives (lightning-alert, inline banners).
- lwc-slots-compositionUse when a Lightning Web Component needs to let a parent inject markup into predefined regions using `<slot>` — default and named slots, `slotchange` wiring, fallback content, and detecting slot emptiness.
- lwc-state-managementShare state across LWCs using pub/sub, Lightning Message Service, @wire, and reactive stores. NOT for in-component reactivity — use lwc/lwc-reactive-state-patterns.
- lwc-styling-hooksUse when theming Lightning base components or custom LWCs with SLDS Styling Hooks — CSS custom properties such as `--slds-c-button-color-background`, `--slds-g-color-brand-base-50`, and `--sds-c-*` — across app, page, component, or Experience Cloud scopes...
- lwc-template-refsUse when an LWC needs a stable, typed handle to a specific DOM element it owns — focusing inputs, imperatively validating a known form field, invoking a `@api` method on a child component, or migrating fragile.
- lwc-testingJest unit tests for LWC — @salesforce/sfdx-lwc-jest, wire adapter mocks, DOM assertions. Triggers: LWC Jest, sfdx-lwc-jest, component test. NOT for Apex tests — use apex/test-class-standards. NOT for browser E2E — use devops/automated-regression-testing.
- lwc-toast-and-notificationsShow toast, platform, and in-app notifications from LWC — ShowToastEvent, lightning/platformShowToastEvent, Custom Notification types.
- lwc-typescript-migrationPlan, execute, and verify a Lightning Web Components JavaScript-to-TypeScript migration with an explicit Salesforce toolchain strategy, bundle-by-bundle sequencing, Lightning base-component types, generated-output ownership, tests, and rollback.
- lwc-virtualized-listsHand-built virtual/windowed list rendering in LWC for datasets above datatable limits — IntersectionObserver sentinels.
- lwc-web-components-interopLWC interop with non-LWC web components: consuming third-party standard custom elements in LWC, exposing LWC as custom elements externally, Shadow DOM vs native web components, polyfills, and slotting patterns.
- lwc-wire-refresh-patternsrefreshApex, getRecordNotifyChange, and RefreshView API for LWC data refresh: when wired data is stale, forcing re-fetch after imperative DML, cross-component refresh, 2024 RefreshView replacement of getRecordNotifyChange.
- lwr-site-developmentUse this skill when building or customizing sites on the Lightning Web Runtime (LWR) in Experience Cloud — including component authoring, custom theming with --dxp hooks, layout components, and publish lifecycle management.
- message-channel-patternsLightning Message Service — MessageChannel metadata, publish/subscribe across DOM boundaries.
- multi-framework-ui-bundlesUse when building, deploying, or reviewing a React web app that runs natively on Salesforce via Salesforce Multi-Framework and the UIBundle metadata type — scaffolding with `sf template generate ui-bundle`, data access through @salesforce/sdk-data...
- navigation-and-routingURL routing, deep links, and page-reference patterns beyond basic NavigationMixin calls.
- static-resources-in-lwcUse when packaging third-party JavaScript, CSS, or asset files into Salesforce static resources for Lightning Web Components, including `@salesforce/resourceUrl`, `loadScript`, `loadStyle`, zip pathing, versioning, and CSP-safe delivery.
- tableau-embedding-in-lightningEmbed Tableau dashboards and Pulse insights in Lightning pages via Tableau Embedding API. Triggers: Tableau embed Lightning, Tableau Pulse, embedding SDK. NOT for CRM Analytics dashboards — use admin/einstein-analytics-basics.
- virtualized-listsRender only visible rows for long lists (1k+ rows) using intersection observer or lightning-datatable virtual scroll. Triggers: virtual scroll, long list LWC. NOT for hand-built windowed rendering past datatable limits — use lwc/lwc-virtualized-lists.
- visualforce-to-lwc-migrationMigrating Visualforce pages and components to Lightning Web Components: controller-to-Apex-method translation, viewstate replacement, custom URL parameter handling, PageReference-to-NavigationMixin mapping, Lightning Out.
- wire-service-patternsUse when designing or reviewing Lightning Web Components that use `@wire`, Lightning Data Service, UI API, or the GraphQL wire adapter, especially for reactive parameters, cache behavior, and refresh strategy.