Sf Lwc

This is a complete LWC development framework built around the PICKLES methodology and a 165-point scoring system across accessibility, SLDS 2 compliance, dark mode, and Jest testing. It handles component scaffolding, wire service patterns, Apex and GraphQL integration, and knows when to delegate to other Salesforce skills like sf-apex for backend logic or sf-deploy for metadata. The scoring rubric is unusually detailed, which means you get opinionated guidance on what production-ready looks like. Includes local dev server commands for hot reload and a solid reference map covering state management, LMS patterns, and Flow screen integration. If you're building LWC in a team environment where consistency matters, the structured quality gates are worth the learning curve.

skills.sh installs: 1.5K
GitHub stars: 422
last updated: Jul 14, 2026

View on GitHub

Install

$ npx -y skills add jaganpro/sf-skills --skill sf-lwc --agent claude-code

Installs into .claude/skills of the current project.

Files

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