skills.rest
dcinzona
dcinzonaCOMMUNITY
Explore all skills by this author →
GitHub

sf-lwc

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

Updated Aug 23, 2026
Search Tags:#typescript#accessibility#jest#graphql#salesforce#slds#lwc
One-click install
npx skills add https://github.com/dcinzona/folios --skill sf-lwc-dcinzona
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sf-lwc
Source: https://github.com/dcinzona/folios/tree/main/.agents/skills/sf-lwc
Command: npx skills add https://github.com/dcinzona/folios --skill sf-lwc-dcinzona

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides a structured, production-grade workflow and guidance for building Lightning Web Components (LWC) in Salesforce, removing uncertainty around scaffolding, data access patterns, SLDS 2 styling, accessibility, and test coverage so teams can deliver consistent, maintainable UI bundles.

Core Features & Use Cases

  • Component Scaffolding: Generate complete LWC bundles (JS, HTML, CSS, meta.xml) and templates for datatables, modals, Flow screens, and TypeScript-enabled components.
  • Data Integration Patterns: Guidance and examples for @wire (Apex & GraphQL), imperative Apex calls, Platform Events/empApi, Change Data Capture, and LMS patterns.
  • Quality & Delivery: SLDS 2 + dark mode styling hooks, WCAG accessibility checklists, Jest testing patterns and mocks, performance and state-management guidance, and deploy/test CI patterns.
  • Cross-skill Handoff: Clear delegation points to sf-apex, sf-flow, sf-deploy, and related skills for backend controllers, Flow integration, and deployments.

Quick Start

Create a responsive LWC data table for Account records that uses @wire to call an Apex method, applies SLDS 2 styling and accessibility rules, and includes a Jest unit test.

Frequently Asked Questions about sf-lwc

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

FAQPage Schema
How do I scaffold a Lightning Web Component bundle for Salesforce?▼

To scaffold a Lightning Web Component bundle, generate the complete set of files including JavaScript, HTML, CSS, and meta.xml. This workflow supports templates for datatables, modals, Flow screens, and TypeScript-enabled components for Salesforce frontends.

How do I wire an Apex method or GraphQL query in an LWC?▼

Wiring Apex methods or GraphQL queries in an LWC uses the @wire adapter to bind data reactively. This workflow provides structured integration patterns for @wire, imperative Apex calls, Platform Events/empApi, Change Data Capture, and LMS channels.

Can I use SLDS 2 styling hooks and dark mode in Lightning Web Components?▼

You can apply SLDS 2 styling hooks and dark mode in Lightning Web Components to ensure consistent theming. This workflow provides guidance for utilizing SLDS 2 styling hooks to deliver maintainable, accessible, and production-ready UI bundles.

How do I write Jest unit tests for Lightning Web Components?▼

To write Jest unit tests for Lightning Web Components, scaffold test files using mocked wire adapters and Apex stubs. This workflow provides Jest testing patterns and mocks to ensure quality and test coverage for Salesforce LWC projects.

What is the best way to ensure WCAG accessibility compliance in an LWC?▼

Ensuring WCAG accessibility compliance in an LWC involves applying structured accessibility checklists during component generation. This workflow satisfies WCAG requirements alongside SLDS 2 styling hooks and meta.xml targets for maintainable UI bundles.

Does this LWC workflow support TypeScript?▼

Yes, this LWC workflow fully supports TypeScript-enabled components. It provides scaffolding and templates specifically designed to satisfy requirements for TypeScript support in Salesforce Lightning Web Component projects.

Related Skills

Explore More Software Engineering Skills→
CollabalistCollabalist

generating-lwc-components

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

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

sf-lwc-testing

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

Community
Intermediate
ronitnugururonitnuguru
6

sf-debug

Analyze Salesforce Apex debug logs for governor limits and performance bottlenecks.

Community
Advanced
forcedotcomforcedotcom
803

micro-frontends

Generate a Micro Frontend LWC shell with iframe communication for Salesforce pages.

Official
Intermediate