lwc

/lwc

Work with Salesforce Lightning Web Components using --new, --explain, --refine, or --bug-fix.

Usage

/lwc --new          Create a new LWC component with Apex controller and tests
/lwc --explain      Explain what an existing LWC component does
/lwc --refine       Modify an existing LWC component
/lwc --bug-fix      Diagnose and fix a bug in an LWC component

---

--new: Create a New LWC Component

Gather Requirements

Ask the user:

1. Component name (camelCase, e.g., accountSummaryCard)
2. Purpose and what it displays/does
3. Where is it placed? (App Page, Record Page, Home Page, utility bar, flow screen)
4. Does it need Apex data? (which object, which fields)
5. Any parent/child component interactions? (@api properties, custom events)
6. Navigation, toast notifications, or Lightning Message Service?

LWC Standards (baked in)

File Structure:

force-app/main/default/lwc/accountSummaryCard/
├── accountSummaryCard.html          — template
├── accountSummaryCard.js            — controller
├── accountSummaryCard.js-meta.xml   — metadata (targets, supported contexts)
└── accountSummaryCard.css           — styles (optional)

Component Template Pattern:

<!-- accountSummaryCard.html -->
<template>
    <!-- Loading state -->
    <template if:true={isLoading}>
        <lightning-spinner alternative-text="Loading" size="small"></lightning-spinner>
    </template>

    <!-- Error state -->
    <template if:true={error}>
        <p class="slds-text-color_error">{errorMessage}</p>
    </template>

    <!-- Data state -->
    <template if:true={account}>
        <lightning-card title={account.Name} icon-name="standard:account">
            <div class="slds-p-around_medium">
                <p>{account.Industry}</p>
            </div>
            <div slot="footer">
                <lightning-button label="Edit" onclick={handleEdit}></lightning-button>
            </div>
        </lightning-card>
    </template>
</template>