skills.rest
Jaganpro
JaganproCOMMUNITY
Explore all skills by this author →
𝕏@jaghubGitHub

sf-lwc

Scaffold Lightning Web Components with PICKLES architecture and Jest tests.

423|97|Updated Nov 30, 2025
Search Tags:#frontend#jest#salesforce#graphQL#slds#lwc#lightning
One-click install
npx skills add https://github.com/Jaganpro/sf-skills --skill sf-lwc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sf-lwc
Source: https://github.com/Jaganpro/sf-skills/tree/main/sf-lwc
Command: npx skills add https://github.com/Jaganpro/sf-skills --skill sf-lwc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill accelerates building modern Salesforce Lightning Web Components by applying the PICKLES architecture, ensuring scalable UIs and high-quality frontends.

Core Features & Use Cases

  • PICKLES Architecture: Prototype, Integrate, Compose, Kinetics, Libraries, Execution, Security for LWC.
  • Component Scaffolding & Patterns: Generate LWC bundles (JS, HTML, CSS, meta.xml) with SLDS styling, GraphQL wiring, and Jest tests.
  • Flow & GraphQL Integration: Build Flow-screen components and wire GraphQL data via adapters; ensure accessibility and dark mode.

Quick Start

Scaffold an LWC component using templates, then integrate with a Flow screen to collect and display data.

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 for Salesforce?▼

Build production-ready Lightning Web Components using the PICKLES architecture, which applies structured scaffolding, SLDS styling, Apex and GraphQL integration, Jest testing, accessibility audits, and dark mode compatibility to ensure modular, performant components across dashboards, forms, tables, and modals.

Can I integrate GraphQL data into Salesforce LWC components?▼

Yes. Wire GraphQL data into Lightning Web Components via adapters, then bind that data to component templates while maintaining accessibility, performance optimization, and cross-cutting integrations with Flow and LMS.

How do I scaffold Lightning Web Component bundles with SLDS styling and tests?▼

Generate LWC bundles—JavaScript, HTML, CSS, and meta.xml files—pre-configured with SLDS 2 styling hooks, GraphQL wiring patterns, Jest test generation, and component scaffolding templates that apply the PICKLES structure automatically.

Does this work with Salesforce Flow screens and dark mode styling?▼

Yes. Build Flow-screen components with event handling, focus management, and dark mode compatibility built in. The PICKLES architecture ensures accessibility audits pass and code quality checks complete before deployment.

What happens after I generate a Lightning Web Component—how do I validate it?▼

After scaffolding, validate with Jest tests, accessibility audits, metadata completeness checks, and code quality verification. Then integrate the component into Flow screens, dashboards, or LMS to satisfy modular design and cross-cutting integration requirements.

Related Skills

Explore More Software Engineering Skills→
JaganproJaganpro
423

sf-lwc

Scaffold Lightning Web Components with PICKLES architecture and Jest tests.

Community
Advanced
forcedotcomforcedotcom
803

generating-lwc-components

Generate Lightning Web Component bundles with Jest tests and SLDS 2 styling.

Official
Advanced
angryracoonangryracoon

experience-lwc-generate

Generate Lightning Web Component bundles with JavaScript, HTML, CSS, and meta.xml.

Community
Advanced
CollabalistCollabalist

generating-custom-tab

Automate Salesforce Custom Tab creation for objects, web, and Visualforce pages.

Community
Advanced