Validate and Optimize Your React Apps (Developer Preview)

Agentforce Vibes provides several Model Context Protocol (MCP) tools that orchestrate a quality validation workflow for Salesforce Multi-Framework. The validation workflow runs a set of validators and reports the results to help you get your apps ready for production. After the results are returned, the workflow stops so you can choose whether to fix the identified issues or revalidate.

These tools are available via the Salesforce DX MCP server in the experts-validation toolset.

• validate_and_optimize
• score_issues

To invoke the validation tools, ask about validating your React app. Example prompts include:

• Validate and score componentName
• Run validate_and_optimize on this component for accessibility only
• Is my app production-ready?

The validate_and_optimize tool scores code quality across multiple validators:

• Code Analyzer: run_code_analyzer
• Security: guide_lws_security
• Accessibility: guide_component_accessibility

Each validator runs and invokes the score_issues tool, producing a readiness score (0–100) and a quality grade. After all validators run, score_issues returns the overall score.

Use this tool for React apps:

• After adding or refactoring UI components and pages
• Before PR merge or deployment to ensure accessibility, responsiveness, and UX standards
• When performance or structure is suboptimal, such as in expensive renders or large lists

The score_issues tool consumes the validation findings from validate_and_optimize. The validate_and_optimize tool invokes each validator to run an analysis and then calls score_issues. After all validators are run, score_issues provide an overall readiness score.

score_issues computes a readiness score (0-100) and a quality grade (prototype, draft, review-for-production). You get a list of identified issues with recommendations on how to fix them. You can choose to fix them automatically and re-validate your component.

An issue in your code can be identified as an error, warning, or note. Each issue results in points taken off from the total score.

Aggregate scoring uses a weighted average across all the validators, weighted based on tier.

For example, a single security error alone can drop the overall score from 100 to 93.

The validate_and_optimize tool invokes several validators and returns issues per validator before presenting the results and a readiness score with actionable recommendations.

The run_code_analyzer MCP tool runs static analysis across selected files to detect code quality, security, and performance issues. The tool returns a JSON result with a path to the results file (if created) and an overall status.

The run_code_analyzer tool complements npm run lint (ESLint) and npm run build (TypeScript and Vite). It adds a static-analysis layer, such as for security, performance, or anti-patterns beyond ESLint rules.

The tool checks for code issues, including:

• ESLint (JavaScript/TypeScript linting)

  • Syntax and parse errors
  • Code-quality rules such as no-unused-vars or no-undef
  • Framework-specific or plugin-specific configuration

• PMD (Apex and JavaScript patterns)

  • Best-practice and maintainability rules
  • Potential bug patterns
  • Complexity and structure checks

• CPD (Copy and Paste Detector)

  • Detects duplicated blocks across files
  • Highlights maintainability risks from code duplication

The guide_component_accessibility tool analyzes component accessibility and provides fixes and guidance that are aligned to WCAG and Salesforce standards. It analyzes your code in accessibility areas such as roles, labels, focus management, color contrast, and ARIA patterns. If you have images in your component, the tool provides recommendations for images, such as for alt text quality, decorative vs informative, and contrast with imagery.

In analysis mode, the tool returns a list of identified violations, and it asks for your permission to apply the fixes. In fix mode, the tool applies the fixes and provides an accessibility fix report with the identified issues.

The tool checks for accessibility issues, including:

• Non-text content (SC 1.1.1): img alt text, decorative vs informative handling
• Info and Relationships (SC 1.3.1): lists and regions semantics; programmatic relationships
• Identify Input Purpose (SC 1.3.5): autocomplete tokens for personal info inputs
• Keyboard (SC 2.1.1): focusability, key handling for interactive elements, tabindex pitfalls
• Link Purpose (SC 2.4.4): descriptive link text or sufficient context
• Pointer Gestures (SC 2.5.1) and Pointer Cancellation (SC 2.5.2): single-pointer alternatives and up-event or cancel mechanisms
• Dragging Movements (SC 2.5.7): non-drag alternatives
• Label in Name (SC 2.5.3): accessible name contains a visible label
• Name Only, Role Only, Value Only (SC 4.1.2 subsets): programmatic name, correct roles, valid ARIA values

The guide_lws_security tool provides a comprehensive security analysis aligned with Lightning Web Security (LWS) and product security guidelines. The tool identifies risky browser patterns, DOM access, sandbox escapes, unsafe script/style injection, and common anti-patterns in your React code.

The tool checks for security issues, including:

• Direct window or document access
• Insecure URL handling, such as open redirects or JavaScript-based URLs
• Unsafe DOM manipulation: innerHTML, outerHTML, insertAdjacentHTML, document.write, dangerouslySetInnerHTML
• Unsafe event handler strings or dynamic script or style injection, such as the use of eval, Function constructor, and blob URLs for scripts
• Cross-surface access assumptions that can break under LWS compartmentalization
• Inadequate input validation or encoding and unsafe HTML templates
• CSRF/auth bypass in API calls (React must use @salesforce/sdk-data; no raw fetch for Salesforce APIs)