LWC Development
OfficialFreeStreamline Lightning Web Components creation and testing.
Free · Opens the source repo
What LWC Development does
The experience-lwc-generate skill is designed to assist developers in creating and managing Lightning Web Components (LWC) efficiently. It provides a structured approach to building LWC bundles, integrating various data sources such as Apex and GraphQL, and ensuring compliance with accessibility standards and SLDS 2 styling. This skill is particularly beneficial for those who frequently work with LWC, as it offers templates and best practices to streamline the development process, including component scaffolding and Jest unit testing.
When using this skill, developers can expect to utilize a variety of pre-built assets, such as basic components, data tables, and modal patterns, which can significantly reduce the time spent on boilerplate code. The skill also emphasizes the importance of following the PICKLES methodology, which guides users through the essential steps of component design, data integration, and performance optimization. This structured approach not only enhances the quality of the components but also ensures that they are maintainable and scalable.
Additionally, the skill provides a local development server for previewing components in real-time, allowing for immediate feedback and iteration. This feature is crucial for developers who want to test their components without the overhead of deployment. By leveraging the local development environment, users can ensure that their components meet the required standards before moving on to deployment or further integration tasks.
Overall, experience-lwc-generate is an invaluable tool for developers working within the Salesforce ecosystem who are focused on building high-quality, efficient Lightning Web Components. Whether you are creating new components or enhancing existing ones, this skill provides the necessary resources and guidance to facilitate a smooth development experience.
When to use it
Use this skill when developing or editing LWC components, integrating data sources, or writing Jest tests.
When not to use it
Avoid using this skill for Apex classes, Aura components, or Visualforce development.
What you can build with it
Creating a New LWC Component
When starting a new project, use this skill to scaffold your Lightning Web Component and set up the necessary files and structure.
Integrating GraphQL with LWC
Utilize this skill to implement GraphQL data fetching in your Lightning Web Components, ensuring efficient data management.
Writing Jest Tests for LWC
Leverage the provided Jest testing resources to create unit tests for your Lightning Web Components, enhancing code quality and reliability.
How to install LWC Development
View source1. Install with the skills CLI
npx skills add forcedotcom/sf-skills/experience-lwc-generate --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by forcedotcomexperience-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
- building Flow XML rather than an LWC screen component → automation-flow-generate
- deploying metadata → platform-metadata-deploy
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 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
@wirefor 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:
- Component(s) created or updated
- Data access pattern chosen
- Files changed
- Accessibility / styling / testing notes
- Next implementation or deploy step
Suggested shape:
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
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 | backend logic |
| embed in Flow screens | automation-flow-generate | declarative orchestration |
| deploy component bundle | platform-metadata-deploy | org rollout |
| create supporting metadata (message channels, objects) | platform-metadata-deploy | metadata deployment |
Reference File Index
Start here
- references/component-patterns.md — component architecture patterns and bundle design
- references/slds-design-guide.md — SLDS 2 styling, dark mode, CSS hooks
- references/lwc-best-practices.md — high-signal rules and anti-patterns
- references/scoring-and-testing.md — 165-point scoring rubric across 8 categories
- references/jest-testing.md — Jest unit test patterns and async rendering helpers
- references/slds-blueprints.json — machine-readable SLDS component blueprints
- references/cli-commands.md — SF CLI commands for LWC development
Accessibility / performance / state
- references/accessibility-guide.md — WCAG, ARIA, keyboard navigation patterns
- references/performance-guide.md — lazy loading, debouncing, rerender safety
- references/state-management.md — reactive state patterns and LMS
- references/template-anti-patterns.md — common HTML template mistakes to avoid
Integration / advanced features
- references/lms-guide.md — Lightning Message Service patterns
- references/flow-integration-guide.md — Flow screen component design
- references/advanced-features.md — Spring '26 features: TypeScript, lwc:on, GraphQL mutations
- references/async-notification-patterns.md — toast, notifications, async flows
- references/triangle-pattern.md — parent-child-sibling communication triangle
Asset templates
- assets/basic-component/basicComponent.js — wire service, error/loading states, event dispatching
- assets/datatable-component/datatableComponent.js — datatable with inline editing
- assets/flow-screen-component/flowScreenComponent.js — Flow screen with input/output properties
- assets/form-component/formComponent.js — form validation and DML patterns
- assets/graphql-component/graphqlComponent.js — GraphQL wire adapter with cursor-based pagination
- assets/jest-test/componentName.test.js.example — Jest test template (copy and rename, remove
.examplesuffix) - assets/message-channel/lmsPublisher.js — LMS publisher pattern
- assets/message-channel/lmsSubscriber.js — LMS subscriber pattern
- assets/modal-component/modalComponent.js — modal with focus trap and ESC handling
- assets/record-picker/recordPicker.js — record picker with search
- assets/state-store/store.js — reactive state store for cross-component state
- assets/typescript-component/typescriptComponent.ts — TypeScript-enabled component (Spring '26)
- assets/workspace-api/workspaceComponent.js — workspace API for tab and focus management
- assets/apex-controller/LwcController.cls — Apex controller with
@AuraEnabled(cacheable=true)patterns
Scripts
- 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 |
Frequently asked questions about LWC Development
Similar skills
Playwright Component Testing
Test React and Vue components in isolation with Playwright.
Fluent UI Blazor
Integrate Fluent UI components in Blazor applications effortlessly.
Build MCP App
Create interactive UI widgets for MCP servers.
Web Design Reviewer
Identify and fix design issues in websites efficiently.
Markstream Install
Seamlessly integrate Markstream for Markdown rendering.
GSAP & Framer Scroll Animation
Create advanced scroll animations effortlessly.