sf-lwc-development

Builds Lightning Web Components with wire adapters, events, lifecycle hooks, and js-meta.xml configuration.

2|Updated Sep 12, 2026
One-click install
npx skills add https://github.com/grzmol/vibe-force --skill sf-lwc-development-grzmol
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: sf-lwc-development
Source: https://github.com/grzmol/vibe-force/tree/main/skills/sf-lwc-development
Command: npx skills add https://github.com/grzmol/vibe-force --skill sf-lwc-development-grzmol

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building Lightning Web Components on Salesforce requires choosing correctly between @wire, imperative Apex, and Lightning Data Service, configuring js-meta.xml targets for App Builder and Experience Cloud, and avoiding reactivity and event-propagation pitfalls that cause silent bugs or infinite render loops. ## Core Features & Use Cases - Data access decision tables: Maps each read/write requirement to the correct mechanism (getRecord, GraphQL wire, cacheable Apex, LDS writes, record-form components) with refresh paths via refreshApex and notifyRecordUpdateAvailable. - Component patterns and anti-patterns: Covers @api/@track/@wire decorators, lifecycle hook safety rules, template directives (lwc:if, for:each, lwc:ref, slots), CustomEvent vs Lightning Message Service communication, and shadow vs light DOM trade-offs. - Use Case: When asked to build an account card component exposed on a record page, the skill produces the bundle structure, a js-meta.xml with lightning__RecordPage target and object-scoped targetConfigs, a getRecord wire with $recordId, and the Jest/deploy verification commands. ## Quick Start Ask the assistant to create a Lightning Web Component that displays account fields on a record page and refreshes after an Apex update.

Frequently Asked Questions about sf-lwc-development

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

FAQPage Schema
How do I choose between @wire and imperative Apex in LWC?

Use @wire for reads that should be cached and automatically refreshed, such as getRecord or a cacheable=true Apex method. Use imperative Apex for writes, user-triggered actions, and any method that performs DML, since cacheable methods cannot write.

How do I expose an LWC to a record page or Flow screen?

Set isExposed to true in the component's js-meta.xml and add the appropriate target such as lightning__RecordPage or lightning__FlowScreen. Use targetConfigs to declare editable properties, restrict objects, or set form factors.

Why does my LWC not rerender after updating a field?

Mutating a property of an untracked object does not trigger a rerender because the field reference never changed. Reassign the field with a new object or array using spread syntax, or use @track only when in-place mutation is unavoidable.

How do I refresh LDS data after an Apex update in LWC?

Call notifyRecordUpdateAvailable with the affected record ids after the imperative Apex write resolves, so Lightning Data Service refreshes dependent wires. For Apex wires specifically, call refreshApex with the provisioned wire result.

When should I use Lightning Message Service instead of CustomEvent?

Use CustomEvent with default non-bubbling options for child-to-parent communication. Use Lightning Message Service with MessageContext for sibling or cross-DOM communication, including Aura and Visualforce, and always unsubscribe in disconnectedCallback.

Can an @AuraEnabled(cacheable=true) method perform DML?

No, a cacheable Apex method cannot perform DML and is the only shape @wire accepts. Split the logic into a cacheable read method and a separate non-cacheable @AuraEnabled method for the write.