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?

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.

Note

Accessibility Guidelines Tool (guide_component_accessibility)

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

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)