From jaganpro-sf-skills-7
Develops Salesforce Lightning Web Components using PICKLES methodology and 165-point scoring, covering wire services, Apex/GraphQL integration, SLDS styling, accessibility, performance, and Jest tests.
npx claudepluginhub jaganpro/sf-skillsThis skill uses the workspace's default tool permissions.
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.jsEnforces quality standards for Salesforce LWC, Aura, and Visualforce components: SLDS 2 compliance, WCAG 2.1 AA accessibility, data access patterns, security (XSS/CSRF/FLS/CRUD), and Jest tests. Use when building or reviewing UI components.
Explains Salesforce LWC Winter '26 features: lightning/graphql module migration from uiGraphQLApi, sf lightning dev component for local development, and platform module access in previews.
Provides expert patterns for Salesforce development including LWC, Apex triggers/classes, REST/Bulk APIs, Connected Apps, and SFDX with scratch orgs/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 sf-lwc 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:
# Preview LWC components in isolation
sf lightning dev component --target-org <alias>
# Preview a Lightning Experience app locally
sf lightning dev app --target-org <alias>
# Preview an Experience Cloud site locally
sf lightning dev site --target-org <alias>
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.
| Need | Delegate to | Reason |
|---|---|---|
| Apex controller or service | sf-apex | backend logic |
| embed in Flow screens | sf-flow | declarative orchestration |
| deploy component bundle | sf-deploy | org rollout |
| create metadata like message channels | sf-metadata | supporting metadata |
| 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 |