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.

• 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_lwc_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.

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

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.

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.

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 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_design_general: 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

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.

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.

The guide_lwc_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.

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>

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

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.

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.

• 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.

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.

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?

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

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?

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.

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?

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

• Salesforce DX MCP Server
• LWC MCP Tools Reference
• Run Jest Tests for LWC