skills.rest
forcedotcom
forcedotcomOFFICIAL
Explore all skills by this author →
Website𝕏@salesforcedevsGitHub

generating-lwc-components

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

803|289|Updated Nov 7, 2025
Search Tags:#accessibility#code generation#lwc#lightning-web-components#jest testing#slds 2#wire service
One-click install
npx skills add https://github.com/forcedotcom/sf-skills --skill generating-lwc-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generating-lwc-components
Source: https://github.com/forcedotcom/sf-skills/tree/main/skills/generating-lwc-components
Command: npx skills add https://github.com/forcedotcom/sf-skills --skill generating-lwc-components

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill prevents slow, error-prone Lightning Web Component (LWC) builds by generating complete components that follow Salesforce UI patterns, accessibility expectations, and testable architecture.

Core Features & Use Cases

  • End-to-end LWC bundle scaffolding: Generates LWC files (JS, HTML, CSS, and js-meta.xml) in a ready-to-implement structure for the chosen use case.
  • PICKLES-driven implementation guidance: Applies a structured workflow to choose architecture, data access patterns, event models, and performance/security considerations.
  • Quality instrumentation: Incorporates SLDS 2 and dark mode compatibility expectations, accessibility requirements, and Jest unit test generation.
  • Integration-ready patterns: Supports wire service patterns, Apex/GraphQL integration guidance, Flow screen integration, and Lightning Message Service concepts.

Quick Start

Generate a Lightning Web Component bundle and Jest tests for a data table experience by asking: Create a data table component for Account records with SLDS 2 styling, dark mode readiness, accessibility, and Jest unit tests.

Frequently Asked Questions about generating-lwc-components

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

FAQPage Schema
How do I generate a Lightning Web Component bundle with accessibility and Jest tests included?▼

You can generate a Lightning Web Component bundle by describing your UI requirement and data source. The skill outputs complete LWC files including JS, HTML, CSS, and js-meta.xml with built-in accessibility guardrails and Jest test scaffolding.

What is the PICKLES methodology for Lightning Web Components?▼

The PICKLES methodology for Lightning Web Components is a structured workflow that guides architecture selection, data access patterns, event models, and performance considerations. It ensures generated LWC bundles follow robust frontend patterns and Salesforce UI expectations.

Can I use the wire service and Apex to build LWC components for Flow screens?▼

Yes, you can use the wire service and Apex to build LWC components for Flow screens. The skill provides integration-ready patterns including wire service, Apex, GraphQL, Lightning Message Service, and Flow screen contexts.

What's the best way to ensure my LWC code supports SLDS 2 and dark mode?▼

The best way to ensure your LWC code supports SLDS 2 and dark mode is to generate it with built-in quality instrumentation. The skill applies SLDS 2 and dark mode compatibility expectations automatically during LWC generation.

Does my LWC bundle need separate tools for Jest unit test generation?▼

Your LWC bundle does not need separate tools for Jest unit test generation. The skill generates Jest unit test scaffolding directly within the complete LWC bundle output during the initial component creation.

Why does my generated LWC component include specific data access patterns for Lightning Message Service?▼

Your generated LWC component includes specific data access patterns for Lightning Message Service because the skill applies integration-ready patterns. It ensures robust frontend architecture by selecting appropriate data access methods for LMS, Apex, and GraphQL contexts.

Related Skills

Explore More Software Engineering Skills→
CollabalistCollabalist

generating-lwc-components

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

Community
Advanced
JaganproJaganpro
423

sf-lwc

Scaffold Lightning Web Components with PICKLES architecture and Jest tests.

Community
Advanced
padjeipadjei

lwc-patterns

Provide guidelines and patterns for building Lightning Web Components in Salesforce.

Community
Intermediate
AvinavaAvinava
1

sf-knowledge-lightning

Consolidate Lightning Aura knowledge for Salesforce developers from topic files.

Community
Intermediate