experience-lwc-generate

frontendforcedotcom5.8K installs

Lightning Web Components with PICKLES methodology and 165-point scoring. Use this skill when the user creates or edits LWC components, builds wire service patterns, or writes Jest tests for LWC. 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 platform-apex-generate), Aura components, or Visualforce.

Install

npx skills add https://github.com/forcedotcom/sf-skills --skill experience-lwc-generate

SKILL.md

---name: experience-lwc-generatedescription: Lightning Web Components with PICKLES methodology and 165-point scoring. Use this skill when the user creates or edits LWC components, builds wire service patterns, or writes Jest tests for LWC. 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 platform-apex-generate), Aura components, or Visualforce.metadata: version: 1.1domains: ["Experience"]minApiVersion: 66.0relatedSkills: cliTools: - tool: ["sf"]semver: >=2.0.0---

experience-lwc-generate: 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 experience-lwc-generate 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 → platform-apex-generate
building Flow XML rather than an LWC screen component → automation-flow-generate
deploying metadata → platform-metadata-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:

platform-apex-generate for controllers / services
platform-metadata-deploy for deployment
platform-apex-test-run only for Apex-side test loops, not Jest

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:

Component(s) created or updated
Data access pattern chosen
Files changed
Accessibility / styling / testing notes
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. Run the commands in scripts/local-dev-preview.sh to start a local dev session for a component, app, or Experience Cloud site.

Local Dev commands install just-in-time on first run. 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	platform-apex-generate	backend logic
embed in Flow screens	automation-flow-generate	declarative orchestration
deploy component bundle	platform-metadata-deploy	org rollout
create supporting metadata (message channels, objects)	platform-metadata-deploy	metadata deployment

Reference File Index

Start here

references/component-patterns.md — component architecture patterns and bundle design
references/slds-design-guide.md — SLDS 2 styling, dark mode, CSS hooks
references/lwc-best-practices.md — high-signal rules and anti-patterns
references/scoring-and-testing.md — 165-point scoring rubric across 8 categories
references/jest-testing.md — Jest unit test patterns and async rendering helpers
references/slds-blueprints.json — machine-readable SLDS component blueprints
references/cli-commands.md — SF CLI commands for LWC development

Accessibility / performance / state

references/accessibility-guide.md — WCAG, ARIA, keyboard navigation patterns
references/performance-guide.md — lazy loading, debouncing, rerender safety
references/state-management.md — reactive state patterns and LMS
references/template-anti-patterns.md — common HTML template mistakes to avoid

Integration / advanced features

references/lms-guide.md — Lightning Message Service patterns
references/flow-integration-guide.md — Flow screen component design
references/advanced-features.md — Spring '26 features: TypeScript, lwc:on, GraphQL mutations
references/async-notification-patterns.md — toast, notifications, async flows
references/triangle-pattern.md — parent-child-sibling communication triangle

Asset templates

assets/basic-component/basicComponent.js — wire service, error/loading states, event dispatching
assets/datatable-component/datatableComponent.js — datatable with inline editing
assets/flow-screen-component/flowScreenComponent.js — Flow screen with input/output properties
assets/form-component/formComponent.js — form validation and DML patterns
assets/graphql-component/graphqlComponent.js — GraphQL wire adapter with cursor-based pagination
assets/jest-test/componentName.test.js.example — Jest test template (copy and rename, remove .example suffix)
assets/message-channel/lmsPublisher.js — LMS publisher pattern
assets/message-channel/lmsSubscriber.js — LMS subscriber pattern
assets/modal-component/modalComponent.js — modal with focus trap and ESC handling
assets/record-picker/recordPicker.js — record picker with search
assets/state-store/store.js — reactive state store for cross-component state
assets/typescript-component/typescriptComponent.ts — TypeScript-enabled component (Spring '26)
assets/workspace-api/workspaceComponent.js — workspace API for tab and focus management
assets/apex-controller/LwcController.cls — Apex controller with @AuraEnabled(cacheable=true) patterns

Scripts

scripts/local-dev-preview.sh — local dev server commands for component, app, and site preview

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