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.
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?
Validate and Optimize Tool (validate_and_optimize)
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.
Validators are weighted by importance — security issues impact the overall score far more than best-practice issues.
Note
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
Scoring Tool (score_issues)
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.
Grade
Score
Meaning
review-for-production
≥ 90
Ready for human review
prototype
60–89
Functional but has notable issues
draft
< 60
Significant issues need addressing
Impact of a single issue on a validator's score
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.
Finding
Score
Points Lost
1 error
80
−20
1 warning
96
−4
1 note
100
~0
Validator weights in the overall score
Aggregate scoring uses a weighted average across all the validators, weighted based on tier.
Tier
Weight
Validators
Blocker
50
guide_lws_security
Critical
30
run_code_analyzer
Important
20
guide_component_accessibility
For example, a single security error alone can drop the overall score from 100 to 93.
Validators
The validate_and_optimize tool invokes several validators and returns issues per validator before presenting the results and a readiness score with actionable recommendations.
Code Analyzer Tool (run_code_analyzer)
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
Configure the Code Analyzer tool to ignore eslint.config.js. For more information, see Customize the Configuration in the Salesforce Code Analyzer Developer Guide.
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
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
Security Guidelines Tool (guide_lws_security)
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/platform-sdk; no raw fetch for Salesforce APIs)
Developer Preview
This feature is available as a developer preview. The feature isn’t generally available unless or until Salesforce announces its general availability in documentation or in press releases or public statements. All commands, parameters, and other features are subject to change or deprecation at any time, with or without notice. Don't implement functionality in production with these commands or tools.