Salesforce Component Standards

Salesforce component standards

Review or build Salesforce UI components with platform-specific rules for data access, security, SLDS 2 styling, accessibility, component communication, performance, and tests.

When to invoke

• "Review this Lightning Web Component for Salesforce standards."
• "Build an LWC that follows SLDS 2 and accessibility rules."
• "Check this Aura component and Apex controller for FLS/CRUD."
• "Audit this Visualforce page for XSS and CSRF issues."
• "Add Jest tests for this Salesforce component."

LWC data access

LWC security, styling, and communication

Accessibility and performance

Every LWC must satisfy WCAG 2.1 AA checks:

• Inputs have <label> or aria-label; placeholder text is not the only label.
• Icon-only buttons have alternative-text or aria-label.
• Interactive elements work with Tab, Enter, Space, and Escape.
• Color is not the only status indicator; pair it with text, icon, or aria-* attributes.
• Error messages are connected to inputs with aria-describedby.
• Modal focus moves inside on open and returns on close.

Performance rules:

• Avoid DML, heavy computation, or rendering state mutation in connectedCallback because it runs on every DOM attach.
• Guard renderedCallback with a boolean to prevent infinite render loops.
• Do not set reactive properties in renderedCallback unless necessary and guarded.
• Paginate or stream large datasets instead of storing them all in component state.

Aura and Visualforce

Jest requirements

Every component with user interaction or Apex data retrieval needs Jest tests covering render, data, event, and error behavior.

it('renders the component with correct title', async () => { /* ... */ });
it('calls apex method and displays results', async () => { /* wire mock */ });
it('dispatches event when button is clicked', async () => { /* ... */ });
it('shows error state when apex call fails', async () => { /* error path */ });

Use @salesforce/sfdx-lwc-jest utilities: setImmediate plus emit({ data, error }) for wire adapter mocking, and jest.mock('@salesforce/apex/MyClass.myMethod', ...) for Apex method mocking.

Anti-patterns

Compatibility vocabulary

Preserve these legacy terms, API names, command placeholders, and literal phrases when applying or migrating this skill:

• <apex:page>
• <c:something>
• <div>
• ALWAYS
• ERROR
• FROM
• HTML
• NEVER
• SELECT
• auto-escapes
• auto-escaping
• built-in
• color: var(--slds-c-button-brand-color-background)
• component-by-component
• icon-only
• re-fires
• re-render
• round-trip
• server-side
• this.template.querySelector('.el').innerHTML = userValue
• view-state
• wire
• ApexPages.Message
• ApexPages.Severity.ERROR
• NoAccessException
• System.NoAccessException

Output template

## Salesforce component standards result

**Status:** pass | fixes required | blocked
**Scope:** <LWC/Aura/Visualforce/Apex files>

| Area | Finding | Severity | Evidence | Required fix |
| --- | --- | --- | --- | --- |
| Security | <finding> | <High/Medium/Low> | <file/line or snippet> | <fix> |
| Accessibility | <finding> | <High/Medium/Low> | <file/line or snippet> | <fix> |
| Tests | <finding> | <High/Medium/Low> | <file/line or snippet> | <fix> |

### Validation
- <Jest, Apex test, manual accessibility, or code review check>

Quality gate

• LWC data access uses the narrowest safe pattern.
• User-controlled data is escaped and never assigned to innerHTML or escape="false".
• Apex exposed to UI enforces sharing, CRUD, and FLS with WITH USER_MODE or Schema.sObjectType checks.
• SLDS 2 tokens and base components are used instead of hardcoded styles.
• WCAG 2.1 AA keyboard, label, focus, and color checks pass.
• Component communication avoids global DOM and Pub/Sub shortcuts.
• Visualforce postbacks use <apex:form> and view state stays under 135 KB.
• Jest tests cover render, Apex success, event dispatch, and Apex failure paths where applicable.