All authors
Claude Skills by PranavNagrecha
github.com/PranavNagrecha1,088 skills0 installs2,308 views
- 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.Votes: 0GitHub stars: 15
- Experience Cloud Lwc ComponentsUse when building custom LWC components for Experience Cloud (Experience Builder sites, LWR portals, Aura-based communities). Covers community context imports, guest user Apex access patterns, navigation API differences between LWR and Aura, and JS-meta.xml target configuration for Experience Builder exposure. Trigger keywords: build LWC for Experience Cloud, custom component community portal LWC, guest user LWC component, community context import salesforce, lightningCommunity target, @sales...Votes: 0GitHub stars: 15
- 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. NOT for internal Salesforce employee SSO configuration — use architect/experience-cloud-integration-patterns.Votes: 0GitHub stars: 15
- 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. NOT for SOSL/SOQL query development — use lwc/experience-cloud-lwc-components.Votes: 0GitHub stars: 15
- File Upload PatternsUpload files in LWC: lightning-file-upload, manual multipart, large-file chunked upload, and ContentDocument associations. NOT for ContentDocument query patterns — use data/salesforce-files-architecture. Trigger keywords: file upload, lightning-file-upload, uploadfinished, FileReader, base64, ContentVersion, ContentDocumentLink, ShareType, Visibility, VersionData, FirstPublishLocationId, Apex heap, guest user upload.Votes: 0GitHub stars: 15
- 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. Triggers: 'headless Salesforce CMS', 'deliver CMS content to external frontend', 'React app. NOT for standard Experience Builder site development — use architect/knowledge-vs-external-cms.Votes: 0GitHub stars: 15
- 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. NOT for Knowledge admin setup (article types, categories) or Einstein Article Recommendations — use admin/knowledge-base-administration.Votes: 0GitHub stars: 15
- Lifecycle HooksUse when building or reviewing Lightning Web Components — specifically lifecycle. Triggers: 'LWC', 'connectedCallback', 'renderedCallback', 'memory leak', 'NavigationMixin', 'wire'. Triggers: 'LWC', 'connectedCallback', 'renderedCallback', 'memory leak', 'NavigationMixin', 'wire'. Also: 'disconnectedCallback', 'errorCallback', 'render()', 'multiple templates', 'hook order', 'parent child lifecycle', 'infinite rerender', 'component subscribes twice'. NOT for Aura components — use lwc/navigatio...Votes: 0GitHub stars: 15
- 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. Triggers: 'lightning navigation 404', 'navigate to deleted record', 'NavigationMixin error toast', 'graceful fallback when target page missing', 'permission denied on navigation'. NOT for ordinary NavigationMixin calls that work — use lwc/lwc-navigation-mixin. NOT for designing URL/deep-link routing — use lwc/navigation-and-routing.Votes: 0GitHub stars: 15
- 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. NOT for the legacy Aura-based Lightning Out (beta) or its $Lightning — use lwc/tableau-embedding-in-lightning.Votes: 0GitHub stars: 15
- Lwc Accessibility PatternsUse when implementing ARIA attributes, keyboard navigation, live regions, WCAG 2.1, focus traps, or accessible datatables in LWCs. Triggers: aria-live, role=grid, focus trap, WCAG AA. NOT for a general accessibility review — use lwc/lwc-accessibility. NOT for SLDS theming without a11y behavior — use lwc/lwc-css-and-styling.Votes: 0GitHub stars: 15
- Lwc AccessibilityUse when designing or reviewing LWCs for keyboard access, semantic labeling, focus. Triggers: LWC accessibility, keyboard nav, aria-label, aria-labelledby, aria-describedby, label for id, focus order, delegatesFocus, tabindex, shadow DOM label association, live region, screen reader. NOT for specific ARIA/datatable implementation patterns — use lwc/lwc-accessibility-patterns. NOT for SLDS styling with no assistive-tech impact — use lwc/lwc-css-and-styling.Votes: 0GitHub stars: 15
- 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 admin-facing design attributes. Triggers: 'lwc not appearing in app builder', 'expose lwc to record page', 'design attribute datasource picklist', 'supportedformfactors mobile small', 'targetconfigs for record page vs app page', 'masterla...Votes: 0GitHub stars: 15
- 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. NOT for the basic imperative Apex import-and-call pattern or cacheable=true rules — use lwc/lwc-imperative-apex. NOT for @wire provisioning basics — use lwc/wire-service-patterns.Votes: 0GitHub stars: 15
- 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. Covers component selection. NOT for custom forms backed by Apex wire methods or @wire(getRecord) with fully manual f — use lwc/lwc-data-table. Also the base-component-first decision (base component vs raw SLDS blueprint markup vs custom component vs third-party web component) and the everyday ...Votes: 0GitHub stars: 15
- 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. NOT for CRM Analytics embedding — use admin/crm-analytics-app-creation. NOT for Tableau embedding — use lwc/tableau-embedding-in-lightning.Votes: 0GitHub stars: 15
- 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 legacy `if:true` / `if:false` cleanup. Triggers: 'lwc:if vs if:true', 'lwc:elseif not working', 'conditional rendering in lwc', 'complex boolean in template'. NOT for choosing between component types at runtime — use lwc/lwc-dynamic-comp...Votes: 0GitHub stars: 15
- 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 the `lightning/platformWorkspaceApi` and `lightning/platformUtilityBarApi` modules. Triggers: 'openSubtab in LWC', 'refresh console tab from LWC', 'IsConsoleNavigation context detection', 'set tab label dynamically'. NOT for declarative ...Votes: 0GitHub stars: 15
- 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. Triggers: 'sync data across tabs', 'BroadcastChannel LWC', 'storage event fallback'. NOT for state sync within the same Lightning page — use lwc/component-communication. NOT for console tab and utility bar APIs — use lwc/lwc-console-workspace-api.Votes: 0GitHub stars: 15
- 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 upgrades breaking hand-rolled selectors. NOT for app-scope theming or SLDS 2 hook migration — use lwc/lwc-styling-hooks. NOT for picking shadow vs light DOM — use lwc/lwc-shadow-vs-light-dom-decision.Votes: 0GitHub stars: 15
- 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. Triggers: 'custom cell type lightning datatable', 'progress bar column', 'image column', 'inline edit picklist in datatable', 'rich text column'. NOT for stock column types, key-field, or basic row actions — use lwc/lwc-data-table. NOT for 1,000-row vir...Votes: 0GitHub stars: 15
- Lwc Custom Event PatternsCustomEvent design — bubbles/composed/cancelable, detail payloads, naming, and why an event is not reaching the parent. Triggers: 'event not reaching parent', 'composed shadow DOM', 'child component cannot tell the parent something changed', 'how does a child lwc notify its parent'. NOT for parent-to-child @api — use lwc/component-communication. NOT for sibling fan-out via Lightning Message Service — use lwc/message-channel-patterns.Votes: 0GitHub stars: 15
- 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. Use when lightning-input-field or lightning-record-picker won't work (cross-org search, computed filters, custom result rendering). NOT for the base lightning-record-picker — use lwc/lwc-record-picker. NOT for in-form lookups inside lightning-record-edit-form.Votes: 0GitHub stars: 15
- Lwc Data TableFirst-time lightning-datatable setup — columns, key-field, basic sort, row actions. Triggers: lightning-datatable basics, datatable columns, key-field, fieldName, draft-values, onsave, onsort, onrowaction, customTypes, LightningDatatable, refreshApex after save. NOT for inline edit, custom types, infinite scroll — use lwc/lwc-datatable-advanced. NOT for datasets too large for datatable — use lwc/lwc-virtualized-lists.Votes: 0GitHub stars: 15
- Lwc Datatable AdvancedAdvanced lightning-datatable — inline edit, custom cell types, infinite scroll, row errors. Triggers: datatable inline edit, custom cell type, onloadmore. NOT for first-time datatable setup — use lwc/lwc-data-table. NOT for fully custom virtual grids — use lwc/lwc-virtualized-lists.Votes: 0GitHub stars: 15
- 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. NOT for Jest test failures — use `lwc-testing` — and NOT for Apex debug logs, which are — use lwc/common-lwc-runtime-errors.Votes: 0GitHub stars: 15
- 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. NOT for uploading a file the user dropped on the component — use lwc/file-upload-patterns.Votes: 0GitHub stars: 15
- 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. Triggers: 'render different components based on record type', 'dynamically load lwc at runtime', 'lwc:component lwc:is constructor', 'lazy load component only when needed', 'dynamic import lwc'. NOT for lwc:if over a fixed component set — use lwc/lwc-conditional-rendering. NOT for page performance tuning — use lwc/lw...Votes: 0GitHub stars: 15
- Lwc Error BoundariesIsolate component errors so one failure does not blank an entire page using errorCallback and graceful fallbacks. NOT for server-side Apex exception design — use apex/exception-handling. Also covers: normalising error.body across UI API read, UI API write, Apex and network shapes; fallback UI; retry by remount; telemetry hand-off from the boundary.Votes: 0GitHub stars: 15
- 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.Votes: 0GitHub stars: 15
- 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. NOT for Flow screen design or Apex-only validation logic — use lwc/lwc-lightning-record-forms.Votes: 0GitHub stars: 15
- 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. Covers both. NOT for single-record reads where `getRecord` from `lightning/uiRecordApi` already fits — use lwc/wire-service-patterns.Votes: 0GitHub stars: 15
- Lwc Imperative ApexCall Apex methods imperatively from LWC — on button click, lifecycle hooks, or conditional logic. Covers import syntax, cacheable vs non-cacheable, async/await patterns, error handling, loading states, and Promise.all. NOT for reactive @wire reads — use lwc/wire-service-patterns. NOT for mocking the call in a Jest test — use lwc/lwc-testing.Votes: 0GitHub stars: 15
- 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 events. Triggers: 'lwc in flow screen', 'FlowAttributeChangeEvent', 'flow screen component not updating', 'flow validate method', 'flow navigation from lwc'. NOT for custom property editors (use custom-property-editor-for-flow), NOT for embedd...Votes: 0GitHub stars: 15
- Lwc InternationalizationBuild LWCs with translation, locale-aware formatting, and RTL layouts. Triggers: LWC i18n, custom labels LWC, RTL layout, @salesforce/label import, @salesforce/i18n locale, timeZone, currency, Intl.NumberFormat in LWC, Translations metadata, date off by one day, mock a label in Jest. NOT for Translation Workbench admin setup — use admin/custom-label-management. NOT for org-wide multi-language config — use admin/multi-language-and-translation.Votes: 0GitHub stars: 15
- 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, wire-service mocks via `@salesforce/wire-service-jest-util`, imperative Apex mocks via `jest.fn()`, simulated user interactions (`click`, `keydown`, `focus`), ARIA attribute and accessible-name assertions, focus-management tests, keyboard-navigation...Votes: 0GitHub stars: 15
- 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`. Triggers: 'updateRecord cache not refreshing', 'createRecord returns DUPLICATES_DETECTED', 'updateRecord input shape with field references', 'lightning-record-edit-form submit not committing', 'should I use LDS write or imperative Apex DML'. NOT for read-only wires (use lwc/wi...Votes: 0GitHub stars: 15
- Lwc Light DomUse Light DOM in LWC when third-party libraries or global CSS require document-level access. Triggers: light DOM LWC, renderMode light, shadow DOM escape. NOT for choosing Shadow vs Light DOM — use lwc/lwc-shadow-vs-light-dom-decision. NOT for managed-package distribution constraints — use architect/omnistudio-vs-standard-decision.Votes: 0GitHub stars: 15
- 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.Votes: 0GitHub stars: 15
- 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.Votes: 0GitHub stars: 15
- 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 and the Live Preview VS Code extension — including single-component preview with platform-module access (LDS wire adapters, `@salesforce` scoped modules, Apex controllers) and knowing which edits live-reload vs need a manual redeploy. Trig...Votes: 0GitHub stars: 15
- 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. NOT for Aura → LWC migration — use lwc/aura-to-lwc-migration. NOT for general LWC security review — use lwc/lwc-security.Votes: 0GitHub stars: 15
- 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. 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 t...Votes: 0GitHub stars: 15
- 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. Triggers: 'lightning modal in lwc', 'toast or modal decision', 'focus trap in modal', 'overlay close result', 'extends LightningModal', 'lightning-modal-body', 'close(result)', 'LightningConfirm', 'LightningAlert', 'LightningPrompt', 'lightning/toast', 'ShowToastEvent', 'modal stacking', 'CloseActionScreenEvent'...Votes: 0GitHub stars: 15
- Lwc Navigation MixinNavigate between Lightning pages, records, and apps from LWC via NavigationMixin. Triggers: NavigationMixin, navigate, standard__recordPage. NOT for URL/deep-link strategy across apps — use lwc/navigation-and-routing. NOT for cross-tab state — use lwc/lwc-cross-tab-state-sync.Votes: 0GitHub stars: 15
- Lwc Offline And MobileUse 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', 'barcode scanner lwc', 'isAvailable', 'supportedFormFactors', 'formFactor Small', 'pull to refresh not working', 'lightning/uiGraphQLApi vs lightning/graphql'. NOT for Mobile SDK or fully native app architecture unless the decision is whether LWC i — use apex/fsl-mobile-app-extensio...Votes: 0GitHub stars: 15
- 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. Trigger keywords: lwc performance budget, bundle size limit, lcp budget, lighthouse ci, lwc size gate. NOT for runtime optimization techniques, Lightning page tuning, or general LCP causes — use lwc/lwc-performance.Votes: 0GitHub stars: 15
- 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. Triggers: 'slow lwc', 'rerenders too much', 'key index', 'dynamic import', 'large list lag'. NOT for 1,000+ row lists — use lwc/lwc-virtualized-lists. NOT for a slow record page overall — use admin/lightning-app-builder-advanced.Votes: 0GitHub stars: 15
- 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. Covers runtime type coercion (the `@api` decorator does NOT validate types), required-prop checks, and design attributes. NOT for component-to-component messaging (use lwc/component-communication) or reactive state — use lwc/lwc-reactive-state-patterns.Votes: 0GitHub stars: 15
- Lwc Pubsub PatternsLegacy pubsub communication between LWCs on the same page (deprecated — prefer LMS). Triggers: pubsub LWC, c-pubsub, pageRef pubsub. NOT for modern cross-component messaging — use lwc/message-channel-patterns. NOT for parent-child events — use lwc/lwc-custom-event-patterns.Votes: 0GitHub stars: 15