Use the LWC Development MCP Tools (Beta)

The LWC development MCP tools speed up component creation from PRD specifications and facilitate various aspects of LWC development.

MCP Tools for LWC is a pilot or beta service that is subject to the Beta Services Terms at Agreements - Salesforce.com or a written Unified Pilot Agreement if executed by Customer, and applicable terms in the Product Terms Directory. Use of this pilot or beta service is at the Customer’s sole discretion.

Note

guide_lwc_development - Comprehensive LWC development workflow and implementation guidelines
guide_lwc_best_practices - Offers LWC development best practices and coding standards guidance
create_lwc_component_from_prd - Creates LWC components from PRD specifications with proper structure and best practices
orchestrate_lwc_component_creation - Step-by-step component creation workflow guidance
orchestrate_lwc_component_optimization - Performance optimization and best practices for LWC
guide_component_accessibility - Provides accessibility guidelines and testing instructions for Lightning web components
guide_lwc_rtl_support - Right-to-Left (RTL) internationalization support and RTL development guidance
orchestrate_lwc_slds2_uplift - Analyzes LWC code along with SLDS Linter output to fix issues using Salesforce Lightning Design System 2 (SLDS 2) knowledge, and migration guidance for upgrading to SLDS 2
explore_slds_blueprints - Retrieves guidelines for the SLDS component blueprints that you need.
guide_slds_blueprints - Provides comprehensive SLDS component blueprint guidelines, reference documentation, and a complete index of all available blueprints organized by category.
explore_slds_styling - Provides usage patterns, accessibility notes, and validation checklists for semantic color styling hooks. For all other styling hooks, the tool provides the category, description, optional usage and other properties.
guide_slds_styling - Provides comprehensive SLDS styling hook guidelines, reference documentation, and a complete overview of available styling hooks by category, including principles, patterns, and accessibility notes.

To use these tools, pass the --toolsets flag as part of the args property of your MCP configuration file and specify lwc-experts. See Use DX MCP Tools for LWC for configuration details.

When working with these tools using Agentforce Vibes Extension, you must enable the a4d-general-rules-no-edit.md and a4d-lwc-rules-no-edit.md global rules. The a4d-general-rules-no-edit.md rule is enabled by default. For more information on configuring rules in Agentforce Vibes, see Agentforce Rules in the Agentforce Vibes Extension Developer Guide.

Important

Here are some sample prompts that invoke the LWC development MCP tools.

Development Workflow Guidelines (guide_lwc_development)

The guide_lwc_development tool provides guidance on LWC development by analyzing your requirements, building incrementally and testing thoroughly.

To use this tool, ask about evaluating a component based on development workflow guidelines. Example prompts include:

Outline the end-to-end workflow to build a list of case records with UI API, including error states.
Provide a development checklist for this component in these areas: data, events, a11y, tests, performance.
Compare when to use UI API vs Apex for a record update and recommend an approach.

LWC Best Practices (guide_lwc_best_practices)

The guide_lwc_best_practices tool provides LWC best practices, identifying issues and making necessary adjustments to your LWC code. The tool provides a detailed report of the identified issues and the changes made.

To use this tool, ask about reviewing a component based on LWC best practices. Example prompts include:

Review this component for LWC best practices and suggest improvements.
Recommend patterns for state management and eventing for this component.
Identify anti-patterns in this code and propose compliant alternatives.

Create LWC Components From PRD (create_lwc_component_from_prd)

The create_lwc_component_from_prd tool delivers structured instructions for analyzing PRDs and creating LWC implementations that follow Salesforce best practices.

To use this tool, ask about creating a component based on a PRD. Example prompts include:

Create an LWC component named accountList from this PRD: <paste PRD>
From the PRD below, generate the contactCard component. <paste PRD>
Generate an LWC component that displays a list of cases using getListUi based on this PRD. <paste PRD>

The create_lwc_component_from_prd tool can invoke these tools to help with task completion.

guide_figma_to_lwc_conversion: Provides SLDS guidelines and best practices for creating the component UI
orchestrate_lwc_component_optimization: Optimizes the component
orchestrate_lwc_component_testing: Create tests for the component
explore_lds_uiapi: Gets the documentation for adapters and data types when using Lightning Data Service (LDS)
guide_lds_graphql: Helps you use GraphQL API to work with Salesforce data

These tools aren’t guaranteed to be invoked by create_lwc_component_from_prd. See LWC MCP Tools Usage Considerations.

Note

Component Creation Workflow (orchestrate_lwc_component_creation)

The orchestrate_lwc_component_creation tool guides users through the entire process from gathering requirements to testing and optimization.

To use this tool, ask about guidelines on creating a component. Example prompts include:

Outline step-by-step tasks to build a contact list component.
Recommend data access (UI API vs Apex) and eventing approach for this component.
Provide an a11y checklist (roles, labels, keyboard, focus) tailored to this UI.

Component Optimization Workflow (orchestrate_lwc_component_optimization)

The orchestrate_lwc_component_optimization tool offers guidance on optimizing your components for performance, maintainability, and best practices.

To use this tool, ask about optimizing a component and proposing performance strategies. Example prompts include:

Recommend virtualization or pagination for long lists and heavy DOM updates.
Propose strategies to reduce wire traffic via field minimization, batching, and caching.
Provide a performance checklist for TTI, CPU cost, paint, and memory.

LWC Accessibility Guidelines (guide_component_accessibility)

The guide_component_accessibility tool provides detailed knowledge about accessibility guidelines for LWC.

To use this tool, ask about reviewing a component based on LWC accessibility guidelines. Example prompts include:

Review this component for accessibility and list concrete fixes with code examples.
Provide a step-by-step plan to run a11y Jest tests for this component and interpret failures.
Generate an ARIA/keyboard checklist for this component and verify focus management.

Right-to-Left (RTL) Guidelines (guide_lwc_rtl_support)

The guide_lwc_rtl tool provides detailed knowledge about RTL internationalization guidelines for LWC.

To use this tool, ask about evaluating a component based on RTL guidelines. Example prompts include:

Assess this component for RTL readiness and list CSS logical property changes.
Provide RTL testing steps and visual checks for this component.
Convert these LTR styles to RTL-safe equivalents and explain choices: <paste CSS>

SLDS 2 Uplift Workflow (orchestrate_lwc_slds2_uplift)

The orchestrate_lwc_slds2_uplift tool provides guidance on SLDS 2 best practices for LWC.

The orchestrate_lwc_slds2_uplift tool is not yet generally available (NON-GA). To use this tool, specify the --allow-non-ga-tools flag in your DX MCP Server configuration.

Note

To use this tool, ask about enhancing a component based on SLDS 2 guidelines and best practices. Also ask about migrating a component to use SLDS 2. Example prompts include:

Run the SLDS 2 uplift workflow on SLDS components. Group violations by rule and component. Include a brief rationale per rule and call out any rules requiring manual remediation.
Analyze this component for SLDS 2 issues. Generate a brief summary listing files changed, rules fixed, and remaining violations. Ensure no visual regressions by avoiding disruptive class removals without substitutions.
Identify hardcoded color values, SLDS class overrides, and instances where deprecated design tokens can be updated to SLDS 2 styling hooks and suggest compatible replacements. Map each finding to an SLDS Linter rule. Output a table with columns: Rule, File Location, Problem, Recommended Fix. Provide a step-by-step fix order to minimize cascading changes.
Uplift this component to SLDS 2—list class/token replacements and provide before/after diffs.
Create an SLDS 2 migration guide for this component and call out any breaking changes.
Generate a step-by-step SLDS 2 uplift checklist for my components with search/replace patterns and sample updates.

Explore SLDS Blueprints (explore_slds_blueprints)

The explore_slds_blueprints tool provides detailed guidance for SLDS blueprints. To use this tool, ask for the blueprints by using one of these optional parameters.

The explore_slds_blueprints tool is not yet generally available (NON-GA). To use this tool, specify the --allow-non-ga-tools flag in your DX MCP Server configuration.

Note

Name: Returns the blueprint that matches the name you provide
Category: Filter by blueprint categories (Actions, Input, Layout, Navigation, Display, Data, Feedback, Overlay, and Complex Components)
Search: Filter blueprints by name or description
Component: Filter by a base component name, such as lightning-button or lightning-card
SLDS class: Filter by SLDS class name, such as slds-button or slds-accordion
Styling hook: Filter by styling hook names, such as --slds-c-accordion-heading-color

Example prompts include:

What is .slds-button.slds-button_icon?
Show the component blueprint specifications for .slds-wrap.
Show example markup for .slds-assistive-text.

SLDS Blueprints Guidance (guide_slds_blueprints)

The guide_slds_blueprints tool provides SLDS blueprints guidance and reference documentation organized by category, along with usage principles and how to use blueprints vs base components.

The guide_slds_blueprints tool is not yet generally available (NON-GA). To use this tool, specify the --allow-non-ga-tools flag in your DX MCP Server configuration.

Note

To use this tool, ask about the available SLDS component blueprints and how to use them. Example prompts include:

Give me an overview of the available SLDS component blueprints.
What are the accessibility considerations for SLDS component blueprints?
What button component blueprints are available?

Explore SLDS Styling Hooks (explore_slds_styling)

The explore_slds_styling tool provides guidance for SLDS styling hooks with support for exact lookup, fuzzy matching, prefix search, and wildcard patterns.

The explore_slds_styling tool is not yet generally available (NON-GA). To use this tool, specify the --allow-non-ga-tools flag in your DX MCP Server configuration.

Note

To use this tool, ask about SLDS styling hooks by using one of these optional search capabilities.

Hooks: Search with an array of hook names, for example, ["--slds-g-color-accent-1", "--slds-g-color-accent-2"]
Prefix: Match all hooks starting with a prefix, such as --slds-g-color-accent-
Search: Search term with support for wildcards (_) and fuzzy matching, such as accent or --slds-g-color-accent-_
Category: Filter by hook category (color, font, spacing, sizing, border, shadow, timing, dimension)
Subcategory: Filter by hook subcategory (semantic, palette, system)
Type: Filter by value type (color, dimension, font-family, font-size, font-weight, line-height, shadow, timing)
Detail level: Controls the output verbosity (summary, detailed, full)

Example prompts include:

Explain how to use the --slds-g-color-surface-container-1 styling hook and provide an example.
What is --slds-g-color-accent-1?
What styling hooks start with --slds-g-color-error?

SLDS Styling Hooks Guidance (guide_slds_styling)

The guide_slds_styling tool provides SLDS styling hooks guidance and reference documentation for different styling hooks categories, including principles, patterns, and accessibility notes for each category.

The guide_slds_styling tool is not yet generally available (NON-GA). To use this tool, specify the --allow-non-ga-tools flag in your DX MCP Server configuration.

Note

To use this tool, ask about styling hooks and how they work by targeting one of these optional topic areas.

Overview: Using SLDS styling hooks that ensure components are theme-aware, maintainable, and automatically adapt to brand customizations, dark mode, density settings, and accessibility requirements
Colors: Using SLDS color styling hooks, covering semantic, system, and palette hook options with guidance on how to use each type to maintain accessibility, support theming, and create visual hierarchy
Spacing: Using SLDS spacing styling hooks to establish consistent, accessible spacing and visual hierarchy that adapts to user density preferences
Typography: Using SLDS typography styling hooks that control font size, weight, line height, and readability through systematic font scales and base sizes to establish visual hierarchy and accessibility across interfaces
Sizing: Using SLDS sizing styling hooks to establish consistent, accessible spacing and visual hierarchy that adapts to user density preferences
Borders: Using SLDS borders and radius styling hooks that control border width and corner curvature to establish visual structure and consistency across UI elements
Shadows: Using SLDS shadow styling hooks that establish visual hierarchy, depth, elevation, and focus states through depth levels, directional shadows, and accessible focus indicators

Example prompts include:

Give me an overview of the SLDS styling hooks that are available.
Show me how the SLDS 2 color styling hooks work.
What are the SLDS typography styling hooks that are available?

LWC Compilation Error Reference (reference_lwc_compilation_error)

The reference_lwc_compilation_error tool provides guidance on fixing error codes that can be returned during compilation.

To use this tool, ask about an LWC compilation error code. Example prompts include:

How do I fix error code LWC1034?
Tell me more about LWC1011.
Show me recommendations for LWC1035.

For more information on LWC error codes, see Error Codes and Messages.

See Also