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 |
resources/component-patterns.md |
Wire, GraphQL, Modal, Navigation, TypeScript |
| LMS guide |
resources/lms-guide.md |
Lightning Message Service deep dive |
| Jest testing |
resources/jest-testing.md |
Advanced testing patterns |
| Accessibility |
resources/accessibility-guide.md |
WCAG compliance, ARIA, focus management |
| Performance |
resources/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 |
docs/state-management.md |
@track, Singleton Store, @lwc/state |
| Template anti-patterns |
docs/template-anti-patterns.md |
LLM template mistakes |
| Async notifications |
docs/async-notification-patterns.md |
Platform Events + empApi |
| Flow integration |
docs/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 resources/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 resources/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 docs/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
1---2name: sf-lwc-23description: 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.4license: MIT5---6
7# sf-lwc: Lightning Web Components Development
8
9Expert 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.
10
11## Core Responsibilities
12
131. **Component Scaffolding**: Generate complete LWC bundles (JS, HTML, CSS, meta.xml)
142. **PICKLES Architecture**: Apply structured design methodology for robust components
153. **Wire Service Patterns**: Implement @wire decorators for data fetching (Apex & GraphQL)
164. **Apex/GraphQL Integration**: Connect LWC to backend with @AuraEnabled and GraphQL
175. **Event Handling**: Component communication (CustomEvent, LMS, pubsub)
186. **Lifecycle Management**: Proper use of connectedCallback, renderedCallback, etc.
197. **Jest Testing**: Generate comprehensive unit tests with advanced patterns
208. **Accessibility**: WCAG compliance with ARIA attributes, focus management
219. **Dark Mode**: SLDS 2 compliant styling with global styling hooks
2210. **Performance**: Lazy loading, virtual scrolling, debouncing, efficient rendering
23
24## Document Map
25
26| Need | Document | Description |
27|------|----------|-------------|
28| **Component patterns** | [resources/component-patterns.md](resources/component-patterns.md) | Wire, GraphQL, Modal, Navigation, TypeScript |
29| **LMS guide** | [resources/lms-guide.md](resources/lms-guide.md) | Lightning Message Service deep dive |
30| **Jest testing** | [resources/jest-testing.md](resources/jest-testing.md) | Advanced testing patterns |
31| **Accessibility** | [resources/accessibility-guide.md](resources/accessibility-guide.md) | WCAG compliance, ARIA, focus management |
32| **Performance** | [resources/performance-guide.md](resources/performance-guide.md) | Dark mode migration, lazy loading, optimization |
33| **Scoring & testing** | [references/scoring-and-testing.md](references/scoring-and-testing.md) | 165-point SLDS 2 scoring, dark mode checklist, Jest patterns |
34| **Advanced features** | [references/advanced-features.md](references/advanced-features.md) | Flow Screen integration, TypeScript, Dashboards, Agentforce |
35| **State management** | [docs/state-management.md](docs/state-management.md) | @track, Singleton Store, @lwc/state |
36| **Template anti-patterns** | [docs/template-anti-patterns.md](docs/template-anti-patterns.md) | LLM template mistakes |
37| **Async notifications** | [docs/async-notification-patterns.md](docs/async-notification-patterns.md) | Platform Events + empApi |
38| **Flow integration** | [docs/flow-integration-guide.md](docs/flow-integration-guide.md) | Flow-LWC communication |
39
40---
41
42## PICKLES Framework (Architecture Methodology)
43
44```
45┌─────────────────────────────────────────────────────────────────────┐
46│ PICKLES FRAMEWORK │
47├─────────────────────────────────────────────────────────────────────┤
48│ P → Prototype │ Validate ideas with wireframes & mock data │
49│ I → Integrate │ Choose data source (LDS, Apex, GraphQL, API) │
50│ C → Composition │ Structure component hierarchy & communication │
51│ K → Kinetics │ Handle user interactions & event flow │
52│ L → Libraries │ Leverage platform APIs & base components │
53│ E → Execution │ Optimize performance & lifecycle hooks │
54│ S → Security │ Enforce permissions, FLS, and data protection │
55└─────────────────────────────────────────────────────────────────────┘
56```
57
58| Principle | Key Actions |
59|-----------|-------------|
60| **P - Prototype** | Wireframes, mock data, stakeholder review, separation of concerns |
61| **I - Integrate** | LDS for single records, Apex for complex queries, GraphQL for related data |
62| **C - Composition** | `@api` for parent→child, CustomEvent for child→parent, LMS for cross-DOM |
63| **K - Kinetics** | Debounce search (300ms), disable during submit, keyboard navigation |
64| **L - Libraries** | Use `lightning/*` modules, base components, avoid reinventing |
65| **E - Execution** | Lazy load with `lwc:if`, cache computed values, avoid infinite loops |
66| **S - Security** | `WITH SECURITY_ENFORCED`, input validation, FLS/CRUD checks |
67
68**For detailed PICKLES implementation patterns, see [resources/component-patterns.md](resources/component-patterns.md)**
69
70---
71
72## Key Component Patterns
73
74### Wire vs Imperative Apex Calls
75
76| Aspect | Wire (@wire) | Imperative Calls |
77|--------|--------------|------------------|
78| **Execution** | Automatic / Reactive | Manual / Programmatic |
79| **DML** | Read-Only | Insert/Update/Delete |
80| **Data Updates** | Auto on param change | Manual refresh |
81| **Caching** | Built-in | None |
82
83**Quick Decision**: Use `@wire` for read-only display with auto-refresh. Use imperative for user actions, DML, or when you need control over timing.
84
85### Data Source Decision Tree
86
87| Scenario | Recommended Approach |
88|----------|---------------------|
89| Single record by ID | Lightning Data Service (`getRecord`) |
90| Simple record CRUD | `lightning-record-form` / `lightning-record-edit-form` |
91| Complex queries | Apex with `@AuraEnabled(cacheable=true)` |
92| Related records | GraphQL wire adapter |
93| Real-time updates | Platform Events / Streaming API |
94| External data | Named Credentials + Apex callout |
95
96### Communication Patterns
97
98| Pattern | Direction | Use Case |
99|---------|-----------|----------|
100| `@api` properties | Parent → Child | Pass data down |
101| Custom Events | Child → Parent | Bubble actions up |
102| Lightning Message Service | Any → Any | Cross-DOM communication |
103| Pub/Sub | Sibling → Sibling | Same page, no hierarchy |
104
105**Decision Tree**: Same parent? → Events up, `@api` down. Different DOM trees? → LMS. LWC ↔ Aura/VF? → LMS.
106
107### Lifecycle Hook Guidance
108
109| Hook | When to Use | Avoid |
110|------|-------------|-------|
111| `constructor()` | Initialize properties | DOM access (not ready) |
112| `connectedCallback()` | Subscribe to events, fetch data | Heavy processing |
113| `renderedCallback()` | DOM-dependent logic | Infinite loops, property changes |
114| `disconnectedCallback()` | Cleanup subscriptions/listeners | Async operations |
115
116---
117
118## SLDS 2 Validation & Dark Mode
119
120> See [references/scoring-and-testing.md](references/scoring-and-testing.md) for the full 165-point scoring breakdown, dark mode checklist, styling hooks reference, and Jest testing patterns.
121
122**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.
123
124---
125
126## Accessibility
127
128WCAG compliance is mandatory for all components.
129
130| Requirement | Implementation |
131|-------------|----------------|
132| **Labels** | `label` on inputs, `aria-label` on icons |
133| **Keyboard** | Enter/Space triggers, Tab navigation |
134| **Focus** | Visible indicator, logical order, focus traps in modals |
135| **Live Regions** | `aria-live="polite"` for dynamic content |
136| **Contrast** | 4.5:1 minimum for text |
137
138**For comprehensive guide, see [resources/accessibility-guide.md](resources/accessibility-guide.md)**
139
140---
141
142## Metadata Configuration
143
144```xml
145<?xml version="1.0" encoding="UTF-8"?>
146<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
147 <apiVersion>66.0</apiVersion>
148 <isExposed>true</isExposed>
149 <masterLabel>Account Dashboard</masterLabel>
150 <description>SLDS 2 compliant account dashboard with dark mode support</description>
151 <targets>
152 <target>lightning__RecordPage</target>
153 <target>lightning__AppPage</target>
154 <target>lightning__HomePage</target>
155 <target>lightning__FlowScreen</target>
156 <target>lightningCommunity__Page</target>
157 <target>lightning__Dashboard</target>
158 </targets>
159 <targetConfigs>
160 <targetConfig targets="lightning__RecordPage">
161 <objects><object>Account</object></objects>
162 <property name="title" type="String" default="Dashboard"/>
163 <property name="maxRecords" type="Integer" default="10"/>
164 </targetConfig>
165 </targetConfigs>
166</LightningComponentBundle>
167```
168
169---
170
171## Flow Screen & Advanced Features
172
173> See [references/advanced-features.md](references/advanced-features.md) for Flow Screen integration (FlowAttributeChangeEvent, FlowNavigationFinishEvent), TypeScript support (API 66.0 GA), LWC in Dashboards (Beta), and Agentforce discoverability.
174
175**Flow Screen quick reference**: `@api` inputs → `FlowAttributeChangeEvent` outputs → `FlowNavigationFinishEvent` for navigation. See also [docs/flow-integration-guide.md](docs/flow-integration-guide.md).
176
177---
178
179## CLI Commands
180
181| Command | Purpose |
182|---------|---------|
183| `sf lightning generate component --type lwc` | Create new LWC |
184| `sf lightning lwc test run` | Run Jest tests |
185| `sf lightning lwc test run --watch` | Watch mode |
186| `sf project deploy start -m LightningComponentBundle` | Deploy LWC |
187
188```bash
189# Generate new component
190sf lightning generate component \
191 --name accountDashboard \
192 --type lwc \
193 --output-dir force-app/main/default/lwc
194
195# Run tests with coverage
196sf lightning lwc test run -- --coverage
197
198# Specific component tests
199sf lightning lwc test run --spec force-app/main/default/lwc/accountList/__tests__
200```
201
202---
203
204## Cross-Skill Integration
205
206| Skill | Use Case |
207|-------|----------|
208| sf-apex | Generate Apex controllers (`@AuraEnabled`, `@InvocableMethod`) |
209| sf-flow | Embed components in Flow Screens, pass data to/from Flow |
210| sf-testing | Generate Jest tests |
211| sf-deploy | Deploy components |
212| sf-metadata | Create message channels |
213
214---
215
216## Dependencies
217
218**Required**: Target org with LWC support (API 45.0+), `sf` CLI authenticated
219**For Testing**: Node.js 18+, Jest (`@salesforce/sfdx-lwc-jest`)
220**For SLDS Validation**: `@salesforce-ux/slds-linter` (optional)
221
222---
223
224## External References
225
226- [PICKLES Framework (Salesforce Ben)](https://www.salesforceben.com/the-ideal-framework-for-architecting-salesforce-lightning-web-components/)
227- [LWC Recipes (GitHub)](https://github.com/trailheadapps/lwc-recipes)
228- [SLDS 2 Transition Guide](https://www.lightningdesignsystem.com/2e1ef8501/p/8184ad-transition-to-slds-2)
229- [James Simone - Advanced Jest Testing](https://www.jamessimone.net/blog/joys-of-apex/advanced-lwc-jest-testing/)
tools-only