Skip to content

sf-lwc

Lightning Web Components with PICKLES methodology and 165-point scoring. TRIGGER when: user creates/edits LWC components, touches lwc/**/*.js, .html, .css, .js-meta.xml files, or asks about wire service, SLDS, or Jest LWC tests. DO NOT TRIGGER when: Apex classes (use sf-apex), Aura components, or Visualforce.

1,506
installs
0 up / 0 down, score 0.00
votes
424
repo stars
Updated
6 months ago
In the catalog since
1 Oct 2026
From
jaganpro/sf-skills
Web & Frontend
Get it through your agent npx skills add jaganpro/sf-skills@sf-lwc

Skill instructions

Rendered from the published SKILL.md, 175 lines.

sf-lwc: Lightning Web Components Development

Use this skill when the user needs Lightning Web Components: LWC bundles, wire patterns, Apex/GraphQL integration, SLDS 2 styling, accessibility, performance work, or Jest unit tests.

When This Skill Owns the Task

Use sf-lwc when the work involves:

  • lwc/**/*.js, .html, .css, .js-meta.xml
  • component scaffolding and bundle design
  • wire service, Apex integration, GraphQL integration
  • SLDS 2, dark mode, and accessibility work
  • Jest unit tests for LWC

Delegate elsewhere when the user is:

  • writing Apex controllers or business logic first → sf-apex
  • building Flow XML rather than an LWC screen component → sf-flow
  • deploying metadata → sf-deploy

Required Context to Gather First

Ask for or infer:

  • component purpose and target surface
  • data source: LDS, Apex, GraphQL, LMS, or external system via Apex
  • whether the user needs tests
  • whether the component must run in Flow, App Builder, Experience Cloud, or dashboard contexts
  • accessibility and styling expectations

Recommended Workflow

1. Choose the right architecture

Use the PICKLES mindset:

  • prototype
  • integrate the right data source
  • compose component boundaries
  • define interaction model
  • use platform libraries
  • optimize execution
  • enforce security

2. Choose the right data access pattern

Need Default pattern
single-record UI LDS / getRecord
simple CRUD form base record form components
complex server query Apex @AuraEnabled(cacheable=true)
related graph data GraphQL wire adapter
cross-DOM communication Lightning Message Service

3. Start from an asset when useful

Use provided assets for:

  • basic component bundles
  • datatables
  • modal patterns
  • Flow screen components
  • GraphQL components
  • LMS message channels
  • Jest tests
  • TypeScript-enabled components

4. Validate for frontend quality

Check:

  • accessibility
  • SLDS 2 / dark mode compliance
  • event contracts
  • performance / rerender safety
  • Jest coverage when required

5. Hand off supporting backend or deploy work

Use:

High-Signal Rules

  • prefer platform base components over reinventing controls
  • use @wire for reactive read-only use cases; imperative calls for explicit actions and DML paths
  • do not introduce inaccessible custom UI
  • avoid hardcoded colors; use SLDS 2-compatible styling hooks / variables
  • avoid rerender loops in renderedCallback()
  • keep component communication patterns explicit and minimal

Output Format

When finishing, report in this order:

  1. Component(s) created or updated
  2. Data access pattern chosen
  3. Files changed
  4. Accessibility / styling / testing notes
  5. Next implementation or deploy step

Suggested shape:

LWC work: <summary>
Pattern: <wire / apex / graphql / lms / flow-screen>
Files: <paths>
Quality: <a11y, SLDS2, dark mode, Jest>
Next step: <deploy, add controller, or run tests>

Local Development Server

Preview LWC components locally with hot reload — no deployment needed:

# Preview LWC components in isolation
sf lightning dev component --target-org <alias>

# Preview a Lightning Experience app locally
Show the whole skill (55 more lines)

sf lightning dev app --target-org

Preview an Experience Cloud site locally

sf lightning dev site --target-org 


In current SF CLI releases, these Local Dev commands are installed just-in-time the first time you run them. They are long-running processes that open a browser with live preview. Changes to `.js`, `.html`, and `.css` files auto-reload instantly. Requires an active org connection for data and Apex callouts.

---

## Cross-Skill Integration

| Need | Delegate to | Reason |
|---|---|---|
| Apex controller or service | [sf-apex](../sf-apex/SKILL.md) | backend logic |
| embed in Flow screens | [sf-flow](../sf-flow/SKILL.md) | declarative orchestration |
| deploy component bundle | [sf-deploy](../sf-deploy/SKILL.md) | org rollout |
| create metadata like message channels | [sf-metadata](../sf-metadata/SKILL.md) | supporting metadata |

---

## Reference Map

### Start here
- [references/component-patterns.md](references/component-patterns.md)
- [references/slds-design-guide.md](references/slds-design-guide.md)
- [references/lwc-best-practices.md](references/lwc-best-practices.md)
- [references/scoring-and-testing.md](references/scoring-and-testing.md)
- [references/jest-testing.md](references/jest-testing.md)

### Accessibility / performance / state
- [references/accessibility-guide.md](references/accessibility-guide.md)
- [references/performance-guide.md](references/performance-guide.md)
- [references/state-management.md](references/state-management.md)
- [references/template-anti-patterns.md](references/template-anti-patterns.md)

### Integration / advanced features
- [references/lms-guide.md](references/lms-guide.md)
- [references/flow-integration-guide.md](references/flow-integration-guide.md)
- [references/advanced-features.md](references/advanced-features.md)
- [references/async-notification-patterns.md](references/async-notification-patterns.md)
- [references/triangle-pattern.md](references/triangle-pattern.md)
- [assets/](assets/)

---

## Score Guide

| Score | Meaning |
|---|---|
| 150+ | production-ready LWC bundle |
| 125–149 | strong component with minor polish left |
| 100–124 | functional but review recommended |
| < 100 | needs significant improvement |