Use Skills for LWC Development

Invoke skills by describing what you want in natural language. Agentforce Vibes selects the matching skill automatically. In the next section, sample prompts demonstrate phrasing patterns that trigger each skill. In your prompts, you can use “Lightning web component” or “LWC component” interchangeably.

For full details on the skills, see the Salesforce Skills Library on GitHub.

LWC and other Salesforce-specific skills are enabled by default with Agentforce Vibes. See Skills in Agentforce Vibes.

These skills create new Lightning web components and modernize existing ones, from picking the right base components to documenting and converting them to TypeScript.

Builds Lightning web components, or brings an existing one into compliance with modern LWC best practices, covering areas such as project structure, @api properties and methods, custom events, LMS, lifecycle hooks, reactivity, templates, styling, and metadata in .js-meta.xml.

Sample prompts include:

• “Build an LWC component that displays a filterable list of cases.”
• “Modernize this component and fix its parent-child component communication.”

Creates a component from a Figma design, a Product Requirements Document (PRD), or another design artifact, orchestrating the full workflow from requirements through code generation, optimization, linting, and testing.

Sample prompts include:

• “Build an LWC component from this Figma design.”
• “Generate an LWC component from this PRD.”

Picks the right Lightning Base Component (lightning-*) for a UI task, retrieves its full API, and wires it into your LWC code.

Sample prompts include:

• “Which Lightning base component should I use for a multi-column editable table?”
• “I need a modal with a record form inside it. Use the right base components.”

Converts an LWC JavaScript file to TypeScript with full type annotations and a matching .d.ts file that exposes only the component’s @api surface.

Sample prompts include:

• “Convert this LWC to TypeScript and add types to the @api properties.”
• “Generate a .d.ts file with the public type definitions for this component.”

These skills connect your components to Salesforce data, such as applying Lightning Data Service best practices, building GraphQL queries, and turning data needs into validated specifications.

Reviews or implements Lightning Data Service best practices in an LWC, from choosing UI API vs. Apex, keeping the UI in sync with refreshApex and notifyRecordUpdateAvailable, to importing references from @salesforce/schema.

Sample prompts include:

• “Should I use UI API or Apex to load this record data?”
• “My data is stale after I save. Fix this LWC so it refreshes correctly.”

Generates, integrates, and tests Lightning Data Service GraphQL queries and mutations, which include introspecting the org schema, building schema-validated queries, and wiring them into an LWC via the lightning/graphql adapters.

Sample prompts include:

• “Wire a GraphQL query into this LWC to fetch the account name and its open opportunities.”
• “Create an LDS GraphQL mutation to update the contact’s email and verify it against my org.”

Turns an ambiguous, natural-language data need into a PRD-ready specification with validated Salesforce object and field API names and a recommended data access API (GraphQL, UI API, or Apex).

Sample prompts include:

• “I want to show account data on this component. Figure out which fields and which API to use.”
• “Turn ‘get the contact’s info and recent activity’ into a concrete data requirement spec.”

These skills convert components from other frameworks, such as Aura or React, into LWC components.

Converts an existing Aura component bundle (.cmp, controller, helper, renderer, CSS, interface, event) to LWC through a workflow that consists of analysis, PRD, enhancement, and generation.

Sample prompts include:

• “Migrate this Aura component to LWC.”
• “Convert these aura:attribute definitions and force:recordData usage into modern LWC equivalents.”

Migrates legacy Salesforce UI stacks onto modern LWC, verifying Aura-to-LWC conversion completeness and upgrading Lightning Out Beta host pages ($Lightning.use()) to Lightning Out 2.0 (<lightning-out-application>) with the OAuth Proof Key for Code Exchange (PKCE) flow.

Sample prompts include:

• “Verify that my Aura-to-LWC migration is complete.”
• “Upgrade this Lightning Out Beta host page to Lightning Out 2.0.”

Migrates a React component (JSX/TSX, hooks, effects) to a Lightning web component, mapping props, events, data, and hooks through a framework-agnostic PRD before generating, optimizing, and testing the LWC.

Sample prompts include:

• “Migrate this React component to LWC.”
• “Convert these React hooks and JSX into LWC.”

These skills verify your components before you ship them, generating Jest tests and UTAM page objects, and previewing components at runtime in a local dev environment.

Creates, enhances, or validates Jest unit tests and UTAM page objects for LWC through a workflow that consists of reviewing and validation. The workflow protects passing tests from regression and enables mocking of wire adapters correctly.

Sample prompts include:

• “Generate Jest tests for this LWC, including the wire adapter mocks.”
• “The tests for this component are missing coverage. Add the missing cases and a UTAM page object.”

Runs Salesforce Lightning Preview for apps or single components and extracts the runtime DOM for inspection — sf lightning dev, Live Preview, and shadow DOM extraction.

Sample prompts include:

• “Preview this component locally and show me the rendered HTML.”
• “Start the local dev server and extract the shadow DOM for this app.”

These skills audit your components against Salesforce quality standards for accessibility, mobile offline support, right-to-left internationalization, and Lightning Web Security compliance.

Reviews component markup, JavaScript, and CSS for WCAG 2.2 accessibility violations across focus management, ARIA, color contrast, and keyboard interaction, and provides remediation guidance.

Sample prompts include:

• “Review this component for accessibility issues and fix any WCAG violations.”
• “Check the keyboard navigation and ARIA attributes on this LWC for screen reader support.”

Reviews an LWC component for right-to-left (RTL) internationalization correctness, producing code-level fixes for CSS logical properties, bidirectional text, keyboard semantics, and RTL-aware SLDS class usage.

Sample prompts include:

• “Review this component for RTL and i18n correctness.”
• “Replace the physical left/right CSS properties in this component with logical equivalents.”

Reviews an LWC component for Lightning Web Security (LWS) compliance and Product Security framework violations, producing either a severity-ranked finding list with remediations or a SARIF score report.

Sample prompts include:

• “Review this component for Lightning Web Security violations.”
• “Score this component’s security compliance and flag any dangerous DOM operations.”

Runs simple accessibility (Sa11y) unit tests on LWCs with Jest, in either a Salesforce core (Bazel) or standalone environment, setting the required flags and choosing the right target granularity.

Sample prompts include:

• “Run the Sa11y accessibility Jest tests for this component.”
• “Run the a11y unit tests and update the snapshots.”

j

Get Started

Create Lightning Web Components

Work with Lightning Base Components

Communicate with Events

Work with Salesforce Data

Develop Secure Code

Use Components in Salesforce Targets

Use Components Outside Salesforce with Lightning Out 2.0

Aura Coexistence

Migrate Aura Components

Debug Lightning Web Components

Test Lightning Web Components

Improve Performance

Use Agentforce Vibes for LWC Development

Use Skills for LWC Development

Use DX MCP Tools for LWC (Beta)

LWC API Modules

Reference