sf-lwc

This skill guides development of Salesforce Lightning Web Components (LWC) using a structured 'PICKLES' methodology and a 165-point quality scoring rubric across eight categories (including SLDS 2 and dark-mode compliance). It solves the problem of building LWC bundles that are architecturally sound, accessible, well-styled, performant, and testable, and it clearly scopes ownership: it handles lwc/**/*.js, .html, .css, and .js-meta.xml files, wire patterns, Apex/GraphQL integration, SLDS 2 styling, and Jest tests, while delegating Apex controllers, Flow XML, and metadata deployment to sibling skills (sf-apex, sf-flow, sf-deploy).

The workflow directs the agent to gather context (component purpose, data source, testing and runtime targets), choose an architecture via the PICKLES mindset (prototype, integrate data, compose boundaries, define interaction, use platform libraries, optimize, enforce security), pick the right data-access pattern from a decision table (LDS/getRecord, base record-form components, cacheable Apex, GraphQL wire adapter, or Lightning Message Service), and start from provided asset bundles (datatables, modals, Flow screen components, GraphQL components, LMS channels, Jest tests, TypeScript components). It codifies high-signal rules such as preferring platform base components, avoiding hardcoded colors in favor of SLDS 2 styling hooks, avoiding rerender loops, and using @wire for reactive reads versus imperative calls for DML. It includes a detailed Jest testing reference and Python-based SLDS linting/validation hooks, plus local development server commands for hot-reload previews.

Target users are Salesforce developers and AI agents building or reviewing LWC front ends who want consistent accessibility, SLDS 2/dark-mode styling, and test coverage. It is a code-convention and development-guidance skill with local tooling, posing no risky operations.