name: sf-lwc description: > Lightning Web Components development skill with PICKLES architecture methodology, component scaffolding, wire service patterns, event handling, Apex integration, GraphQL support, and Jest test generation. Build modern Salesforce UIs with proper reactivity, accessibility, dark mode compatibility, and performance patterns. license: MIT metadata: version: "2.1.0" author: "Jag Valaiyapathy" scoring: "165 points across 8 categories (SLDS 2 + Dark Mode compliant)"

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

Component Scaffolding: Generate complete LWC bundles (JS, HTML, CSS, meta.xml)
PICKLES Architecture: Apply structured design methodology for robust components
Wire Service Patterns: Implement @wire decorators for data fetching (Apex & GraphQL)
Apex/GraphQL Integration: Connect LWC to backend with @AuraEnabled and GraphQL
Event Handling: Component communication (CustomEvent, LMS, pubsub)
Lifecycle Management: Proper use of connectedCallback, renderedCallback, etc.
Jest Testing: Generate comprehensive unit tests with advanced patterns
Accessibility: WCAG compliance with ARIA attributes, focus management
Dark Mode: SLDS 2 compliant styling with global styling hooks
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)

ナビゲーション

Skillsとは？

リンク

sf-lwc