Help us improve
Share bugs, ideas, or general feedback.
From sf-skills
Generates Lightning Web Components bundles, wire patterns, Apex/GraphQL integration, SLDS 2 styling, accessibility, and Jest tests using PICKLES methodology.
npx claudepluginhub ccmalcom/sf-skills-plugin --plugin sf-skillsHow this skill is triggered — by the user, by Claude, or both
Slash command
/sf-skills:generating-lwc-componentsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
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.
CREDITS.mdREADME.mdassets/apex-controller/LwcController.clsassets/basic-component/basicComponent.cssassets/basic-component/basicComponent.htmlassets/basic-component/basicComponent.jsassets/basic-component/basicComponent.js-meta.xmlassets/datatable-component/datatableComponent.htmlassets/datatable-component/datatableComponent.jsassets/flow-screen-component/flowScreenComponent.cssassets/flow-screen-component/flowScreenComponent.htmlassets/flow-screen-component/flowScreenComponent.jsassets/flow-screen-component/flowScreenComponent.js-meta.xmlassets/form-component/formComponent.htmlassets/form-component/formComponent.jsassets/graphql-component/graphqlComponent.htmlassets/graphql-component/graphqlComponent.jsassets/jest-test/componentName.test.js.exampleassets/message-channel/RecordSelected.messageChannel-meta.xmlassets/message-channel/lmsPublisher.jsExplains Salesforce LWC Winter '26 features: lightning/graphql module migration from uiGraphQLApi, sf lightning dev component for local development, and platform module access in previews.
Builds Lightning Web Components for Salesforce B2B Commerce storefronts using @api/@track/@wire decorators, commerce-specific wire adapters, custom events, Lightning Web Security, Jest unit testing, and component lifecycle.
Provides expert patterns for Salesforce platform development including Lightning Web Components, Apex triggers, REST/Bulk APIs, Connected Apps, and Salesforce DX with scratch orgs and 2GP.
Share bugs, ideas, or general feedback.
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.
Use generating-lwc-components when the work involves:
lwc/**/*.js, .html, .css, .js-meta.xmlDelegate elsewhere when the user is:
Ask for or infer:
Use the PICKLES mindset:
| 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 |
Use provided assets for:
Check:
Use:
@wire for reactive read-only use cases; imperative calls for explicit actions and DML pathsrenderedCallback()When finishing, report in this order:
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>
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.
| Need | Delegate to | Reason |
|---|---|---|
| Apex controller or service | generating-apex | backend logic |
| embed in Flow screens | generating-flow | declarative orchestration |
| deploy component bundle | deploying-metadata | org rollout |
| create supporting metadata (message channels, objects) | deploying-metadata | metadata deployment |
.example suffix)@AuraEnabled(cacheable=true) patterns| 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 |