jaganpro/sf-lwc
skills/sf-lwc/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add jaganpro/claude-code-sfskills sf-lwcInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 28, 2026, 2:22 PM166.3s39 files scanned
SKILL.md
- name:
- sf-lwc
- description:
- >
- TRIGGER when:
- user creates/edits LWC components, touches lwc/**/*.js, .html,
- DO NOT TRIGGER when:
- Apex classes (use sf-apex), Aura components, or Visualforce.
- license:
- MIT
- version:
- 2.1.0
- author:
- Jag Valaiyapathy
- scoring:
- 165 points across 8 categories (SLDS 2 + Dark Mode compliant)
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:
- sf-apex for controllers / services
- sf-deploy for deployment
- sf-testing only for Apex-side test loops, not Jest
High-Signal Rules
- prefer platform base components over reinventing controls
- use
@wirefor 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:
# 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.
Cross-Skill Integration
| 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 |
Reference Map
Start here
- references/component-patterns.md
- references/slds-design-guide.md
- references/lwc-best-practices.md
- references/scoring-and-testing.md
- references/jest-testing.md
Accessibility / performance / state
- references/accessibility-guide.md
- references/performance-guide.md
- references/state-management.md
- references/template-anti-patterns.md
Integration / advanced features
- references/lms-guide.md
- references/flow-integration-guide.md
- references/advanced-features.md
- references/async-notification-patterns.md
- references/triangle-pattern.md
- 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 |
Related Skills
jaganpro/sf-ai-agentforce-grid
tools
VerifiedTrustedCommunity
Use this skill whenever users want to build, inspect, debug, automate, or publish workflows in Agentforce Grid (AI Workbench) using Salesforce plus the Grid MCP or direct Grid REST calls. Trigger it for Grid workbook creation, worksheet setup, Object/Reference/AI/Agent/AgentTest/Evaluation/PromptTemplate/InvocableAction column design, prompt drafting inside Grid, worksheet execution troubleshooting, Grid YAML `apply_grid` specs, and Windows-specific Grid setup issues. Also use it when users mention AI Workbench, Grid Studio, workbook IDs, worksheet IDs, Grid Connect, or ask for recipes like "top opportunities with AI email drafts", "agent test suite in Grid", or "build this worksheet from YAML". Do not use it for generic Salesforce work unrelated to Agentforce Grid.
372SKILL.mdUpdated Apr 23, 2026
jaganpro/sf-flex-estimator
development
VerifiedTrustedCommunity
Salesforce Flex Credit estimation for Agentforce and Data Cloud workloads. TRIGGER when: user needs cost projections, scenario planning, budget sizing, or architecture tradeoff analysis for Agentforce prompts/actions, Data Cloud meters, or monthly Flex Credit usage. DO NOT TRIGGER when: user is building Agentforce metadata or .agent files themselves (use sf-ai-agentforce or sf-ai-agentscript), implementing Data Cloud assets (use sf-datacloud-*), or asking for contract-specific commercial approval that depends on non-public pricing terms.
366SKILL.mdUpdated Apr 22, 2026
jaganpro/sf-permissions
testing
VerifiedTrustedCommunity
Permission Set analysis, hierarchy viewer, and access auditing. TRIGGER when: user asks "who has access to X?", analyzes permission sets/groups, or touches .permissionset-meta.xml / .permissionsetgroup-meta.xml files. DO NOT TRIGGER when: creating new metadata (use sf-metadata), deploying permission sets (use sf-deploy), or Apex sharing logic (use sf-apex).
366SKILL.mdUpdated Apr 5, 2026
jaganpro/sf-metadata
devops
VerifiedTrustedCommunity
Salesforce metadata generation and querying with 120-point scoring. TRIGGER when: user creates custom objects, fields, validation rules, or touches .object-meta.xml, .field-meta.xml, .profile-meta.xml files. DO NOT TRIGGER when: permission set analysis (use sf-permissions), deploying metadata (use sf-deploy), or Flow XML (use sf-flow).
366SKILL.mdUpdated Apr 5, 2026