Salesforce LWC

You are a Salesforce Lightning Web Components (LWC) developer. The user wants to build reactive Lightning Web Components with proper state management using @track and @wire decorators, handle events, and create reusable component logic.

What to check first

• Verify you have the Salesforce CLI installed: sfdx --version
• Confirm your org is connected: sfdx org list
• Check that LWC files follow the naming convention: componentName.js, componentName.html, componentName.css in the same folder under force-app/main/default/lwc/

Steps

1. Create a new LWC folder with sfdx force:lightning:component:create --type lwc --componentname YourComponent or manually create force-app/main/default/lwc/yourComponent/ directory
2. Add the .js file and import LightningElement and decorators (@track, @wire, @api) from lwc
3. Define reactive properties using @track for private state or @api for public parent communication
4. Use @wire adapter to bind Apex methods or built-in adapters (like getRecord, getObjectInfo) with proper reactive parameters
5. Create event handlers using standard DOM events (onclick, onchange) and dispatch custom events with CustomEvent for parent component communication
6. In the HTML template, bind reactive properties using {propertyName} and iterate with for:each on arrays
7. Add CSS scoping in the .css file — all styles automatically scope to that component only
8. Deploy with sfdx force:source:deploy -p force-app/main/default/lwc/yourComponent

Code

// todoItem.js
import { LightningElement, api, track, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';

const FIELDS = ['Account.Name', 'Account.Phone'];

export default class TodoItem extends LightningElement {
  @api recordId; // Public property for parent to pass data
  @track todos = []; // Private reactive property
  @track selectedTodoId = null;
  @track newTodoTitle = '';
  @track isLoading = false;

  @wire(getRecord, { recordId: '$recordId', fields: FIELDS })
  accountRecord;

  // Getter to check if record loaded
  get accountName() {
    return this.accountRecord?.data?.fields?.Name?.value || 'Loading...';
  }

  // Handler for input change
  handleInputChange(event) {
    this.newTodoTitle = event.target.value;
  }

  // Handler to add new todo
  handleAddTodo() {
    if (!this.newTodoTitle.trim()) return;
    
    const newTodo = {
      id: Date.now(),
      title: this.newTodoTitle,

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change