sf-lwc: Lightning Web Components Development

Expert frontend engineer specializing in Lightning Web Components for Salesforce. Generate production-ready LWC components using the PICKLES Framework for architecture, with proper data binding, Apex/GraphQL integration, event handling, SLDS 2 styling, and comprehensive Jest tests.

Core Responsibilities

1. Component Scaffolding: Generate complete LWC bundles (JS, HTML, CSS, meta.xml)
2. PICKLES Architecture: Apply structured design methodology for robust components
3. Wire Service Patterns: Implement @wire decorators for data fetching (Apex & GraphQL)
4. Apex/GraphQL Integration: Connect LWC to backend with @AuraEnabled and GraphQL
5. Event Handling: Component communication (CustomEvent, LMS, pubsub)
6. Lifecycle Management: Proper use of connectedCallback, renderedCallback, etc.
7. Jest Testing: Generate comprehensive unit tests with advanced patterns
8. Accessibility: WCAG compliance with ARIA attributes, focus management
9. Dark Mode: SLDS 2 compliant styling with global styling hooks
10. Performance: Lazy loading, virtual scrolling, debouncing, efficient rendering

Document Map

Need	Document	Description
Component patterns	references/component-patterns.md	Wire, GraphQL, Modal, Navigation, TypeScript
LMS guide	references/lms-guide.md	Lightning Message Service deep dive
Jest testing	references/jest-testing.md	Advanced testing patterns
Accessibility	references/accessibility-guide.md	WCAG compliance, ARIA, focus management
Performance	references/performance-guide.md	Dark mode migration, lazy loading, optimization
Scoring & testing	references/scoring-and-testing.md	165-point SLDS 2 scoring, dark mode checklist, Jest patterns
Advanced features	references/advanced-features.md	Flow Screen integration, TypeScript, Dashboards, Agentforce
State management	references/state-management.md	@track, Singleton Store, @lwc/state
Template anti-patterns	references/template-anti-patterns.md	LLM template mistakes
Async notifications	references/async-notification-patterns.md	Platform Events + empApi
Flow integration	references/flow-integration-guide.md	Flow-LWC communication

---

PICKLES Framework (Architecture Methodology)

┌─────────────────────────────────────────────────────────────────────┐
│                     PICKLES FRAMEWORK                                │
├─────────────────────────────────────────────────────────────────────┤
│  P → Prototype    │  Validate ideas with wireframes & mock data    │
│  I → Integrate    │  Choose data source (LDS, Apex, GraphQL, API)  │
│  C → Composition  │  Structure component hierarchy & communication │
│  K → Kinetics     │  Handle user interactions & event flow         │
│  L → Libraries    │  Leverage platform APIs & base components      │
│  E → Execution    │  Optimize performance & lifecycle hooks        │
│  S → Security     │  Enforce permissions, FLS, and data protection │
└─────────────────────────────────────────────────────────────────────┘

Principle	Key Actions
P - Prototype	Wireframes, mock data, stakeholder review, separation of concerns
I - Integrate	LDS for single records, Apex for complex queries, GraphQL for related data
C - Composition	@api for parent→child, CustomEvent for child→parent, LMS for cross-DOM
K - Kinetics	Debounce search (300ms), disable during submit, keyboard navigation
L - Libraries	Use lightning/* modules, base components, avoid reinventing
E - Execution	Lazy load with lwc:if, cache computed values, avoid infinite loops
S - Security	WITH SECURITY_ENFORCED, input validation, FLS/CRUD checks

For detailed PICKLES implementation patterns, see references/component-patterns.md

---

Key Component Patterns

Wire vs Imperative Apex Calls

Aspect	Wire (@wire)	Imperative Calls
Execution	Automatic / Reactive	Manual / Programmatic
DML	Read-Only	Insert/Update/Delete
Data Updates	Auto on param change	Manual refresh
Caching	Built-in	None

Quick Decision: Use @wire for read-only display with auto-refresh. Use imperative for user actions, DML, or when you need control over timing.

Data Source Decision Tree

Scenario	Recommended Approach
Single record by ID	Lightning Data Service (getRecord)
Simple record CRUD	lightning-record-form / lightning-record-edit-form
Complex queries	Apex with @AuraEnabled(cacheable=true)
Related records	GraphQL wire adapter
Real-time updates	Platform Events / Streaming API
External data	Named Credentials + Apex callout

Communication Patterns

Pattern	Direction	Use Case
@api properties	Parent → Child	Pass data down
Custom Events	Child → Parent	Bubble actions up
Lightning Message Service	Any → Any	Cross-DOM communication
Pub/Sub	Sibling → Sibling	Same page, no hierarchy

Decision Tree: Same parent? → Events up, @api down. Different DOM trees? → LMS. LWC ↔ Aura/VF? → LMS.

Lifecycle Hook Guidance

Hook	When to Use	Avoid
constructor()	Initialize properties	DOM access (not ready)
connectedCallback()	Subscribe to events, fetch data	Heavy processing
renderedCallback()	DOM-dependent logic	Infinite loops, property changes
disconnectedCallback()	Cleanup subscriptions/listeners	Async operations

---

SLDS 2 Validation & Dark Mode

See references/scoring-and-testing.md for the full 165-point scoring breakdown, dark mode checklist, styling hooks reference, and Jest testing patterns.

Quick summary: 8 categories, 165 total points. 150+ Production-ready | 125+ Good | 100+ Functional | <75 Needs work. Dark mode requires CSS variables only (--slds-g-color-*), no hardcoded colors.

---

Accessibility

WCAG compliance is mandatory for all components.

Requirement	Implementation
Labels	label on inputs, aria-label on icons
Keyboard	Enter/Space triggers, Tab navigation
Focus	Visible indicator, logical order, focus traps in modals
Live Regions	aria-live="polite" for dynamic content
Contrast	4.5:1 minimum for text

For comprehensive guide, see references/accessibility-guide.md

---

Metadata Configuration

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>66.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Account Dashboard</masterLabel>
    <description>SLDS 2 compliant account dashboard with dark mode support</description>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__FlowScreen</target>
        <target>lightningCommunity__Page</target>
        <target>lightning__Dashboard</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects><object>Account</object></objects>
            <property name="title" type="String" default="Dashboard"/>
            <property name="maxRecords" type="Integer" default="10"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

---

Flow Screen & Advanced Features

See references/advanced-features.md for Flow Screen integration (FlowAttributeChangeEvent, FlowNavigationFinishEvent), TypeScript support (API 66.0 GA), LWC in Dashboards (Beta), and Agentforce discoverability.

Flow Screen quick reference: @api inputs → FlowAttributeChangeEvent outputs → FlowNavigationFinishEvent for navigation. See also references/flow-integration-guide.md.

---

CLI Commands

Command	Purpose
sf lightning generate component --type lwc	Create new LWC
sf lightning lwc test run	Run Jest tests
sf lightning lwc test run --watch	Watch mode
sf project deploy start -m LightningComponentBundle	Deploy LWC

# Generate new component
sf lightning generate component \
  --name accountDashboard \
  --type lwc \
  --output-dir force-app/main/default/lwc

# Run tests with coverage
sf lightning lwc test run -- --coverage

# Specific component tests
sf lightning lwc test run --spec force-app/main/default/lwc/accountList/__tests__

---

Cross-Skill Integration

Skill	Use Case
sf-apex	Generate Apex controllers (@AuraEnabled, @InvocableMethod)
sf-flow	Embed components in Flow Screens, pass data to/from Flow
sf-testing	Generate Jest tests
sf-deploy	Deploy components
sf-metadata	Create message channels

---

Dependencies

Required: Target org with LWC support (API 45.0+), sf CLI authenticated
For Testing: Node.js 18+, Jest (@salesforce/sfdx-lwc-jest)
For SLDS Validation: @salesforce-ux/slds-linter (optional)

---

External References

• PICKLES Framework (Salesforce Ben)
• LWC Recipes (GitHub)
• SLDS 2 Transition Guide
• James Simone - Advanced Jest Testing