Lightning Web Components with PICKLES methodology and 165-point scoring. Use this skill when the user creates or edits LWC components, builds wire service patterns, or writes Jest tests for LWC. TRIGGER when: user creates/edits LWC components, touches lwc/**/*.js, .html, .css, .js-meta.xml files, or

experience lwc generate: Lightning Web Components Development Use this skill when the user needs Lightning Web Components : LWC bundles, wire patterns, Apex/GraphQL integration, SLDS 2 styling, accessibility, performance work, or Jest unit tests. When This Skill Owns the Task Use experience lwc generate when the work involves: lwc/ / .js , .html , .css , .js meta.xml component scaffolding and bundle design wire service, Apex integration, GraphQL integration SLDS 2, dark mode, and accessibility work Jest unit tests for LWC Delegate elsewhere when the user is: writing Apex controllers or business logic first → [platform apex generate](../platform apex generate/SKILL.md) building Flow XML rather than an LWC screen component → [automation flow generate](../automation flow generate/SKILL.md) deploying metadata → [platform metadata deploy](../platform metadata deploy/SKILL.md) Required Context to Gather First Ask for or infer: component purpose and target surface data source: LDS, Apex, GraphQL, LMS, or external system via Apex whether the user needs tests whether the component must run in Flow, App Builder, Experience Cloud, or dashboard contexts accessibility and styling expectations Recommended Workflow 1. Choose the right architecture Use the PICKLES mindset: prototype integrate the right data source compose component boundaries define interaction model use platform libraries optimize execution enforce security 2. Choose the right data access pattern Need Default pattern single record UI LDS / getRecord simple CRUD form base record form components complex server query Apex @AuraEnabled(cacheable=true) related graph data GraphQL wire adapter cross DOM communication Lightning Message Service 3. Start from an asset when useful Use provided assets for: basic component bundles datatables modal patterns Flow screen components GraphQL components LMS message channels Jest tests TypeScript enabled components 4. Validate for frontend quality Check: accessibility SLDS 2 / dark mode compliance event contracts performance / rerender safety Jest coverage when required 5. Hand off supporting backend or deploy work Use: [platform apex generate](../platform apex generate/SKILL.md) for controllers / services [platform metadata deploy](../platform metadata deploy/SKILL.md) for deployment [platform apex test run](../platform apex test run/SKILL.md) only for Apex side test loops, not Jest High Signal Rules prefer platform base components over reinventing controls use @wire for reactive read only use cases; imperative calls for explicit actions and DML paths do not introduce inaccessible custom UI avoid hardcoded colors; use SLDS 2 compatible styling hooks / variables avoid rerender loops in renderedCallback() keep component communication patterns explicit and minimal Output Format When finishing, report in this order: 1. Component(s) created or updated 2. Data access pattern chosen 3. Files changed 4. Accessibility / styling / testing notes 5. Next implementation or deploy step Suggested shape: Local Development Server Preview LWC components locally with hot reload — no deployment needed. Run the commands in scripts/local dev preview.sh to start a local dev session for a component, app, or Experience Cloud site. Local Dev commands install just in time on first run. They are long running processes that open a browser with live preview. Changes to .js , .html , and .css files auto reload instantly. Requires an active org connection for data and Apex callouts. Cross Skill Integration Need Delegate to Reason Apex controller or service [platform apex generate](../platform apex generate/SKILL.md) backend logic embed in Flow screens [automation flow generate](../automation flow generate/SKILL.md) declarative orchestration deploy component bundle [platform metadata deploy](../platform metadata deploy/SKILL.md) org rollout create supporting metadata (message channels, objects) [platform metadata deploy](../platform metadata deploy/SKILL.md) metadata deployment Reference File Index Start here [references/component patterns.md](references/component patterns.md) — component architecture patterns and bundle design [references/slds design guide.md](references/slds design guide.md) — SLDS 2 styling, dark mode, CSS hooks [references/lwc best practices.md](references/lwc best practices.md) — high signal rules and anti patterns [references/scoring and testing.md](references/scoring and testing.md) — 165 point scoring rubric across 8 categories [references/jest testing.md](references/jest testing.md) — Jest unit test patterns and async rendering helpers [references/slds blueprints.json](references/slds blueprints.json) — machine readable SLDS component blueprints [references/cli commands.md](references/cli commands.md) — SF CLI commands for LWC development Accessibility / performance / state [references/accessibility guide.md](references/accessibility guide.md) — WCAG, ARIA, keyboard navigation patterns [references/performance guide.md](references/performance guide.md) — lazy loading, debouncing, rerender safety [references/state management.md](references/state management.md) — reactive state patterns and LMS [references/template anti patterns.md](references/template anti patterns.md) — common HTML template mistakes to avoid Integration / advanced features [references/lms guide.md](references/lms guide.md) — Lightning Message Service patterns [references/flow integration guide.md](references/flow integration guide.md) — Flow screen component design [references/advanced features.md](references/advanced features.md) — Spring '26 features: TypeScript, lwc:on, GraphQL mutations [references/async notification patterns.md](references/async notification patterns.md) — toast, notifications, async flows [references/triangle pattern.md](references/triangle pattern.md) — parent child sibling communication triangle Asset templates [assets/basic component/basicComponent.js](assets/basic component/basicComponent.js) — wire service, error/loading states, event dispatching [assets/datatable component/datatableComponent.js](assets/datatable component/datatableComponent.js) — datatable with inline editing [assets/flow screen component/flowScreenComponent.js](assets/flow screen component/flowScreenComponent.js) — Flow screen with input/output properties [assets/form component/formComponent.js](assets/form component/formComponent.js) — form validation and DML patterns [assets/graphql component/graphqlComponent.js](assets/graphql component/graphqlComponent.js) — GraphQL wire adapter with cursor based pagination [assets/jest test/componentName.test.js.example](assets/jest test/componentName.test.js.example) — Jest test template (copy and rename, remove .example suffix) [assets/message channel/lmsPublisher.js](assets/message channel/lmsPublisher.js) — LMS publisher pattern [assets/message channel/lmsSubscriber.js](assets/message channel/lmsSubscriber.js) — LMS subscriber pattern [assets/modal component/modalComponent.js](assets/modal component/modalComponent.js) — modal with focus trap and ESC handling [assets/record picker/recordPicker.js](assets/record picker/recordPicker.js) — record picker with search [assets/state store/store.js](assets/state store/store.js) — reactive state store for cross component state [assets/typescript component/typescriptComponent.ts](assets/typescript component/typescriptComponent.ts) — TypeScript enabled component (Spring '26) [assets/workspace api/workspaceComponent.js](assets/workspace api/workspaceComponent.js) — workspace API for tab and focus management [assets/apex controller/LwcController.cls](assets/apex controller/LwcController.cls) — Apex controller with @AuraEnabled(cacheable=true) patterns Scripts [scripts/local dev preview.sh](scripts/local dev preview.sh) — local dev server commands for component, app, and site preview Score Guide Score Meaning 150+ production ready LWC bundle 125–149 strong component with minor polish left 100–124 functional but review recommended < 100 needs significant improvement

experience-lwc-generate