sf-lwc

Generate Lightning Web Components with validated patterns for Salesforce development.

Updated Apr 27, 2026
One-click install
npx skills add https://github.com/tomz/agent-skills --skill sf-lwc-tomz
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: sf-lwc
Source: https://github.com/tomz/agent-skills/tree/main/sf-lwc
Command: npx skills add https://github.com/tomz/agent-skills --skill sf-lwc-tomz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Salesforce developers face complexity when building and maintaining Lightning Web Components (LWCs) across pages and data contexts. This Skill consolidates the canonical structure, data wiring patterns, lifecycle management, and common gotchas into a single, practical guide that speeds up development and reduces errors.

Core Features & Use Cases

  • Component structure and file layout for LWCs, including templates, controllers, and metadata configurations
  • Data wiring with Lightning Data Service and Apex, including wire adapters and imperative calls
  • Lifecycle hooks and reactive properties to manage state and DOM interactions
  • Navigation, events, and inter-component communication patterns across Salesforce pages
  • Lightning Datatable usage and common UI patterns
  • Practical gotchas, anti-patterns, and performance considerations to avoid regressions

Quick Start

Set up a Salesforce DX project and load this skill to start building and refining Lightning Web Components following the patterns described.

Frequently Asked Questions about sf-lwc

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

FAQPage Schema
How do I wire Apex methods and Lightning Data Service in LWC components?

Wiring Apex and Lightning Data Service in LWC components involves using the wire adapter for reactive data binding and imperative Apex calls for on-demand execution. This Skill provides validated patterns for both approaches to streamline Salesforce data integration.

What is the canonical file structure and metadata configuration for a Lightning Web Component?

The canonical LWC file structure includes HTML templates, JavaScript controllers, and XML metadata configurations. This Skill outlines the standard component layout and best practices to ensure modular and maintainable Salesforce development.

How do I manage component state and DOM interactions using LWC lifecycle hooks?

Managing LWC component state relies on lifecycle hooks and reactive properties to handle DOM interactions and state changes. This Skill details how to implement these hooks effectively to avoid common regressions and manage component behavior.

What are the best practices for Lightning Datatable usage and inter-component events in Salesforce?

Lightning Datatable usage and inter-component communication require specific event patterns and navigation strategies across page contexts. This Skill covers common UI patterns with datatables and event handling to ensure robust component interaction.

What common gotchas and anti-patterns should I avoid when developing Lightning Web Components?

Common LWC gotchas and anti-patterns often involve improper wire service usage, navigation errors, and performance regressions. This Skill highlights these specific limitations and provides precautions to maintain optimal component performance.

Do I need a Salesforce DX project to start building Lightning Web Components with these patterns?

Setting up a Salesforce DX project is the recommended prerequisite to start building and refining Lightning Web Components using these validated patterns. The Skill integrates directly into the Salesforce DX workflow for practical application.