sf-lwc

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

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 │
└─────────────────────────────────────────────────────────────────────┘

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

Key Component Patterns

Wire vs Imperative Apex Calls

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

Communication Patterns

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

Lifecycle Hook Guidance

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.

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.

Form Building Context

LWC is the only form-building option with Jest unit testing. For forms requiring automated test coverage or CI/CD validation, prefer LWC over Screen Flows or Dynamic Forms.

Complexity spectrum: Dynamic Forms < Screen Flow < OmniStudio < Screen Flow + LWC < Full LWC

Choose the simplest tool that meets requirements — don't default to LWC when Screen Flow suffices. See sf-flow/references/form-building-guide.md for the 5-tool comparison and decision tree.

CLI Commands

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

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

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

Cross-Skill Integration

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