skills.rest
ronitnuguru
ronitnuguruCOMMUNITY
Explore all skills by this author →
GitHub

sf-lwc

Scaffold Salesforce Lightning Web Components with the PICKLES framework.

6|Updated Dec 20, 2023
Search Tags:#testing#jest#graphql#flow#salesforce#lwc#pickles
One-click install
npx skills add https://github.com/ronitnuguru/Package-Visualizer --skill sf-lwc-ronitnuguru
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sf-lwc
Source: https://github.com/ronitnuguru/Package-Visualizer/tree/main/.cursor/skills/sf-lwc
Command: npx skills add https://github.com/ronitnuguru/Package-Visualizer --skill sf-lwc-ronitnuguru

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

Salesforce teams struggle to build scalable Lightning Web Components that adhere to accessibility standards, SLDS 2 styling, and consistent architectural patterns across complex apps. This Skill provides a guided, repeatable framework (PICKLES) to scaffold components, wire data sources, test rigorously, and enforce UI/UX quality at scale.

Core Features & Use Cases

  • Component scaffolding: starter templates for LWC bundles (JS, HTML, CSS, and meta.xml) to accelerate UI development.
  • Data integration: supports Apex, GraphQL, and Salesforce UI APIs with both reactive (@wire) and imperative patterns.
  • Quality & accessibility: SLDS 2 compatibility, keyboard navigation, and Jest-based testing to ensure production readiness.
  • Real-world use cases: build dashboards, Flow-integrated UIs, and cross-component communications using LMS and established patterns.

Quick Start

Generate a new LWC scaffold using the sf-lwc skill and begin implementing it with the PICKLES framework, SLDS 2 styling, and Jest tests.

Frequently Asked Questions about sf-lwc

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build production-ready Lightning Web Components that follow SLDS 2 standards?▼

Build production-ready Lightning Web Components by applying a guided framework that scaffolds bundles, wires data sources, and enforces SLDS 2 styling with accessibility standards for scalable UI architecture.

What is the best way to wire Apex and GraphQL data into LWC?▼

Wire Apex and GraphQL data into LWC using both reactive @wire patterns and imperative calls to handle data binding and integration efficiently across diverse component contexts.

Can I use this framework to build LWC components for Flow screens and dashboards?▼

Yes, you can scaffold LWC components for Flow screens, dashboards, and record pages using provided starter templates and established patterns for cross-component communication via Lightning Message Service.

How do I set up Jest testing for Salesforce LWC components?▼

Set up Jest testing for Salesforce LWC components by applying a framework enforcing rigorous Jest-based tests, ensuring component reliability, keyboard navigation accessibility, and overall production readiness.

Does this LWC scaffolding approach support cross-component communication?▼

This LWC scaffolding approach supports cross-component communication using Lightning Message Service and established architectural patterns, ensuring robust event handling and data flow across complex app contexts.

Related Skills

Explore More Software Engineering Skills→
jiten-singh-shahijiten-singh-shahi
13

sf-lwc-testing

Write and debug LWC Jest tests with component mounting and Apex mocking.

Community
Intermediate
CollabalistCollabalist

generating-lwc-components

Generate Lightning Web Component bundles with Apex, GraphQL, and Jest tests.

Community
Advanced
tomztomz

sf-lwc

Generate Lightning Web Components with validated patterns for Salesforce development.

Community
Advanced
jiten-singh-shahijiten-singh-shahi
13

sf-aura-development

Maintain and migrate Salesforce Aura components with event and Apex integration fixes.

Community
Intermediate