experience-lwc-generate: Lightning Web Components Development

When This Skill Owns the Task

• 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

• writing Apex controllers or business logic first → platform-apex-generate
• building Flow XML rather than an LWC screen component → automation-flow-generate
• deploying metadata → platform-metadata-deploy

Required Context to Gather First

• 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

• 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

3. Start from an asset when useful

• basic component bundles
• datatables
• modal patterns
• Flow screen components
• GraphQL components
• LMS message channels
• Jest tests
• TypeScript-enabled components

4. Validate for frontend quality

• accessibility
• SLDS 2 / dark mode compliance
• event contracts
• performance / rerender safety
• Jest coverage when required

5. Hand off supporting backend or deploy work

• platform-apex-generate for controllers / services
• platform-metadata-deploy for deployment
• platform-apex-test-run 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

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

LWC work: <summary>
Pattern: <wire / apex / graphql / lms / flow-screen>
Files: <paths>
Quality: <a11y, SLDS2, dark mode, Jest>
Next step: <deploy, add controller, or run tests>

Local Development Server

Cross-Skill Integration

Reference File Index

Start here

• references/component-patterns.md [blocked] — component architecture patterns and bundle design
• references/slds-design-guide.md [blocked] — SLDS 2 styling, dark mode, CSS hooks
• references/lwc-best-practices.md [blocked] — high-signal rules and anti-patterns
• references/scoring-and-testing.md [blocked] — 165-point scoring rubric across 8 categories
• references/jest-testing.md [blocked] — Jest unit test patterns and async rendering helpers
• references/slds-blueprints.json [blocked] — machine-readable SLDS component blueprints
• references/cli-commands.md [blocked] — SF CLI commands for LWC development

Accessibility / performance / state

• references/accessibility-guide.md [blocked] — WCAG, ARIA, keyboard navigation patterns
• references/performance-guide.md [blocked] — lazy loading, debouncing, rerender safety
• references/state-management.md [blocked] — reactive state patterns and LMS
• references/template-anti-patterns.md [blocked] — common HTML template mistakes to avoid

Integration / advanced features

• references/lms-guide.md [blocked] — Lightning Message Service patterns
• references/flow-integration-guide.md [blocked] — Flow screen component design
• references/advanced-features.md [blocked] — Spring '26 features: TypeScript, lwc:on, GraphQL mutations
• references/async-notification-patterns.md [blocked] — toast, notifications, async flows
• references/triangle-pattern.md [blocked] — parent-child-sibling communication triangle

Asset templates

• assets/basic-component/basicComponent.js [blocked] — wire service, error/loading states, event dispatching
• assets/datatable-component/datatableComponent.js [blocked] — datatable with inline editing
• assets/flow-screen-component/flowScreenComponent.js [blocked] — Flow screen with input/output properties
• assets/form-component/formComponent.js [blocked] — form validation and DML patterns
• assets/graphql-component/graphqlComponent.js [blocked] — GraphQL wire adapter with cursor-based pagination
• assets/jest-test/componentName.test.js.example [blocked] — Jest test template (copy and rename, remove .example suffix)
• assets/message-channel/lmsPublisher.js [blocked] — LMS publisher pattern
• assets/message-channel/lmsSubscriber.js [blocked] — LMS subscriber pattern
• assets/modal-component/modalComponent.js [blocked] — modal with focus trap and ESC handling
• assets/record-picker/recordPicker.js [blocked] — record picker with search
• assets/state-store/store.js [blocked] — reactive state store for cross-component state
• assets/typescript-component/typescriptComponent.ts [blocked] — TypeScript-enabled component (Spring '26)
• assets/workspace-api/workspaceComponent.js [blocked] — workspace API for tab and focus management
• assets/apex-controller/LwcController.cls [blocked] — Apex controller with @AuraEnabled(cacheable=true) patterns

Scripts

• scripts/local-dev-preview.sh [blocked] — local dev server commands for component, app, and site preview

Score Guide