New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Official agent skill

Salesforce Component Standards

by github in github/awesome-copilot

Quality standards for Salesforce Lightning Web Components (LWC), Aura components, and Visualforce pages.

OfficialMITAuto-check passedFrontend & Design

Install Salesforce Component Standards

skills CLI
$ npx skills add github/awesome-copilot --skill salesforce-component-standards -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install github/awesome-copilot salesforce-component-standards --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/github/awesome-copilot.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/salesforce-component-standards .claude/skills/salesforce-component-standards && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
salesforce-component-standards
GitHub stars
40k
Used in
1 other repo
Token cost
~2.4k tokens
SKILL.md length
977 words
Files
1
Skills in repo
417
Repo updated
First seen
Licence
MIT

At a glance

Quality standards for Salesforce Lightning Web Components (LWC), Aura components, and Visualforce pages.

  • Reviewing any Salesforce UI component to enforce platform-specific security and quality standards
  • SKILL.md covers Section 1 — LWC Quality…, Section 2 — Aura Component…, Section 3 — Visualforce… and Quick Reference — Component…
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Tasks that involve CRM management

What it does

Salesforce Component Standards is an agent skill from github/awesome-copilot, published by the product's own GitHub organization. Quality standards for Salesforce Lightning Web Components (LWC), Aura components, and Visualforce pages. Covers SLDS 2 compliance, accessibility (WCAG 2.1 AA), data access pattern selection, component communication rules, XSS prevention, CSRF enforcement, FLS/CRUD in AuraEnabled methods, view state management, and Jest test requirements. Use this skill when building or reviewing any Salesforce UI component to enforce platform-specific security and quality standards.

Its SKILL.md is about 2.4k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering CRM management, Web application vulnerabilities and Accessibility. It works with Salesforce, Jest and JavaScript. The repository describes itself as: Community-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot. The licence is MIT.

When your agent uses it

  • Reviewing any Salesforce UI component to enforce platform-specific security and quality standards
  • Tasks that involve CRM management
  • Tasks that involve Web application vulnerabilities

Example prompts

  • “/salesforce-component-standards”

What it can do on your machine

Read from SKILL.md and the folder at commit 727ff2e. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are apex, javascript and xml).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Salesforce Component Standards loads about 2.4k tokens when it runs. Until then it costs about 125 tokens; SKILL.md has 977 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~125
When it runs · the whole SKILL.md, loaded when a task matches
~2.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from github/awesome-copilot at commit 727ff2e, republished under its MIT licence (© github). 977 words, ~2,448 tokens.

Download SKILL.mdSave it as .claude/skills/salesforce-component-standards/SKILL.md (or your agent's skills folder).
name
salesforce-component-standards
description
Quality standards for Salesforce Lightning Web Components (LWC), Aura components, and Visualforce pages. Covers SLDS 2 compliance, accessibility (WCAG 2.1 AA), data access pattern selection, component communication rules, XSS prevention, CSRF enforcement, FLS/CRUD in AuraEnabled methods, view state management, and Jest test requirements. Use this skill when building or reviewing any Salesforce UI component to enforce platform-specific security and quality standards.

Salesforce Component Quality Standards

Apply these checks to every LWC, Aura component, and Visualforce page you write or review.

Section 1 — LWC Quality Standards

1.1 Data Access Pattern Selection

Choose the right data access pattern before writing JavaScript controller code:

Use casePatternWhy
Read a single record reactively (follows navigation)@wire(getRecord, { recordId, fields })Lightning Data Service — cached, reactive
Standard CRUD form for a single object<lightning-record-form> or <lightning-record-edit-form>Built-in FLS, CRUD, and accessibility
Complex server query or filtered list@wire(apexMethodName, { param }) on a cacheable=true methodAllows caching; wire re-fires on param change
User-triggered action, DML, or non-cacheable server callImperative apexMethodName(params).then(...).catch(...)Required for DML — wired methods cannot be @AuraEnabled without cacheable=true
Cross-component communication (no shared parent)Lightning Message Service (LMS)Decoupled, works across DOM boundaries
Multi-object graph relationshipsGraphQL @wire(gql, { query, variables })Single round-trip for complex related data
1.2 Security Rules
RuleEnforcement
No raw user data in innerHTMLUse {expression} binding in the template — the framework auto-escapes. Never use this.template.querySelector('.el').innerHTML = userValue
Apex @AuraEnabled methods enforce CRUD/FLSUse WITH USER_MODE in SOQL or explicit Schema.sObjectType checks
No hardcoded org-specific IDs in component JavaScriptQuery or pass as a prop — never embed record IDs in source
@api properties from parent: validate before useA parent can pass anything — validate type and range before using as a query parameter
1.3 SLDS 2 and Styling Standards
  • Never hardcode colours: color: #FF3366 → use color: var(--slds-c-button-brand-color-background) or a semantic SLDS token.
  • Never override SLDS classes with !important — compose with custom CSS properties.
  • Use <lightning-*> base components wherever they exist: lightning-button, lightning-input, lightning-datatable, lightning-card, etc.
  • Base components include built-in SLDS 2, dark mode, and accessibility — avoid reimplementing their behaviour.
  • If using custom CSS, test in both light mode and dark mode before declaring done.
1.4 Accessibility Requirements (WCAG 2.1 AA)

Every LWC component must pass all of these before it is considered done:

  • All form inputs have <label> or aria-label — never use placeholder as the only label
  • All icon-only buttons have alternative-text or aria-label describing the action
  • All interactive elements are reachable and operable by keyboard (Tab, Enter, Space, Escape)
  • Colour is not the only means of conveying status — pair with text, icon, or aria-* attributes
  • Error messages are associated with their input via aria-describedby
  • Focus management is correct in modals — focus moves into the modal on open and back on close
1.5 Component Communication Rules
DirectionMechanism
Parent → Child@api property or calling a @api method
Child → ParentCustomEvent — this.dispatchEvent(new CustomEvent('eventname', { detail: data }))
Sibling / unrelated componentsLightning Message Service (LMS)
Never usedocument.querySelector, window.*, or Pub/Sub libraries

For Flow screen components:

  • Events that need to reach the Flow runtime must set bubbles: true and composed: true.
  • Expose @api value for two-way binding with the Flow variable.
1.6 JavaScript Performance Rules
  • No side effects in connectedCallback: it runs on every DOM attach — avoid DML, heavy computation, or rendering state mutations here.
  • Guard renderedCallback: always use a boolean guard to prevent infinite render loops.
  • Avoid reactive property traps: setting a reactive property inside renderedCallback causes a re-render — use it only when necessary and guarded.
  • Do not store large datasets in component state — paginate or stream large results instead.
1.7 Jest Test Requirements

Every component that handles user interaction or retrieves Apex data must have a Jest test:

javascript
// Minimum test coverage expectations
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 mocking utilities:

  • wire adapter mocking: setImmediate + emit({ data, error })
  • Apex method mocking: jest.mock('@salesforce/apex/MyClass.myMethod', ...)

Section 2 — Aura Component Standards

2.1 When to Use Aura vs LWC
  • New components: always LWC unless the target context is Aura-only (e.g. extending force:appPage, using Aura-specific events in a legacy managed package).
  • Migrating Aura to LWC: prefer LWC, migrate component-by-component; LWC can be embedded inside Aura components.
Show full SKILL.md (373 more words)Show less
2.2 Aura Security Rules
  • @AuraEnabled controller methods must declare with sharing and enforce CRUD/FLS — Aura does not enforce them automatically.
  • Never use {!v.something} with unescaped user data in <div> unbound helpers — use <ui:outputText value="{!v.text}" /> or <c:something> to escape.
  • Validate all inputs from component attributes before using them in SOQL / Apex logic.
2.3 Aura Event Design
  • Component events for parent-child communication — lowest scope.
  • Application events only when component events cannot reach the target — they broadcast to the entire app and can be a performance and maintenance problem.
  • For hybrid LWC + Aura stacks: use Lightning Message Service to decouple communication — do not rely on Aura application events reaching LWC components.

Section 3 — Visualforce Security Standards

3.1 XSS Prevention
xml
<!-- ❌ NEVER — renders raw user input as HTML -->
<apex:outputText value="{!userInput}" escape="false" />

<!-- ✅ ALWAYS — auto-escaping on -->
<apex:outputText value="{!userInput}" />
<!-- Default escape="true" — platform HTML-encodes the output -->

Rule: escape="false" is never acceptable for user-controlled data. If rich text must be rendered, sanitise server-side with a whitelist before output.

3.2 CSRF Protection

Use <apex:form> for all postback actions — the platform injects a CSRF token automatically into the form. Do not use raw <form method="POST"> HTML elements, which bypass CSRF protection.

3.3 SOQL Injection Prevention in Controllers
apex
// ❌ NEVER
String soql = 'SELECT Id FROM Account WHERE Name = \'' + ApexPages.currentPage().getParameters().get('name') + '\'';
List<Account> results = Database.query(soql);

// ✅ ALWAYS — bind variable
String nameParam = ApexPages.currentPage().getParameters().get('name');
List<Account> results = [SELECT Id FROM Account WHERE Name = :nameParam];
3.4 View State Management Checklist
  • View state is under 135 KB (check in browser developer tools or the Salesforce View State tab)
  • Fields used only for server-side calculations are declared transient
  • Large collections are not persisted across postbacks unnecessarily
  • readonly="true" is set on <apex:page> for read-only pages to skip view-state serialisation
3.5 FLS / CRUD in Visualforce Controllers
apex
// Before reading a field
if (!Schema.sObjectType.Account.fields.Revenue__c.isAccessible()) {
    ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.ERROR, 'You do not have access to this field.'));
    return null;
}

// Before performing DML
if (!Schema.sObjectType.Account.isDeletable()) {
    throw new System.NoAccessException();
}

Standard controllers enforce FLS for bound fields automatically. Custom controllers do not — FLS must be enforced manually.

Quick Reference — Component Anti-Patterns Summary

Anti-patternTechnologyRiskFix
innerHTML with user dataLWCXSSUse template bindings {expression}
Hardcoded hex coloursLWC/AuraDark-mode / SLDS 2 breakUse SLDS CSS custom properties
Missing aria-label on icon buttonsLWC/Aura/VFAccessibility failureAdd alternative-text or aria-label
No guard in renderedCallbackLWCInfinite rerender loopAdd hasRendered boolean guard
Application event for parent-childAuraUnnecessary broadcast scopeUse component event instead
escape="false" on user dataVisualforceXSSRemove — use default escaping
Raw <form> postbackVisualforceCSRF vulnerabilityUse <apex:form>
No with sharing on custom controllerVF / ApexData exposureAdd with sharing declaration
FLS not checked in custom controllerVF / ApexPrivilege escalationAdd Schema.sObjectType checks
SOQL concatenated with URL paramVF / ApexSOQL injectionUse bind variables

© github, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/salesforce-component-standards of github/awesome-copilot.

Open the folder on GitHubat commit 727ff2e

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in github/awesome-copilot, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Salesforce Component Standards next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Salesforce Component Standards compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Salesforce Component Standards this skillgithub/awesome-copilot40k1 repos~2.4kAutomated safety check: PassMIT
Experience Lds Best Practices Applyforcedotcom/sf-skills1.1k—~3.4kAutomated safety check: PassApache-2.0
Web Coderboshi-xixixi/TraeSkill2741 repos~5.2kAutomated safety check: PassMIT
Experience Lwc Security Validateforcedotcom/sf-skills1.1k—~2.6kAutomated safety check: PassApache-2.0
Experience Aura Lwc Migrateforcedotcom/sf-skills1.1k—~3.5kAutomated safety check: PassApache-2.0
Ibm A11y Testing Guidelangflow-ai/langflow156k—~4.6kAutomated safety check: PassMIT

Similar skills

  • Experience Lds Best Practices Apply

    forcedotcom/sf-skills

    A skill your agent uses when reviewing or implementing Lightning Data Service best practices in an LWC (.js, .html, .js-meta.xml) — UIAPI vs Apex, refreshApex / notifyRecordUpdateAvailable…

    1.1k GitHub stars~3.4k tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

  • Web Coder

    boshi-xixixi/TraeSkill

    Expert 10x engineer with comprehensive knowledge of web development, internet protocols, and web standards.

    274 GitHub starsUsed in 1 repo~5.2k tokens
    Frontend & DesignAuto-check passed

  • Experience Lwc Security Validate

    forcedotcom/sf-skills

    Use this skill as THE specialized Lightning Web Security (LWS) validator for a Lightning Web Component bundle (.js, .ts, .html, .css, .js-meta.xml) — the canonical LWS/Product-Security review for…

    1.1k GitHub stars~2.6k tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

  • Experience Aura Lwc Migrate

    forcedotcom/sf-skills

    A skill your agent uses to analyze a Salesforce Aura component bundle (.cmp, .app, .evt, .intf, Controller.js, Helper.js, Renderer.js) and produce a framework-agnostic migration blueprint (PRD.yaml…

    1.1k GitHub stars~3.5k tokensUpdated 4 days ago
    Product & Project ManagementAuto-check passed

  • Ibm A11y Testing Guide

    langflow-ai/langflow

    Reference guide for writing and running Langflow frontend accessibility tests with axe (Jest) and IBM Equal Access (Playwright page.runA11yScan).

    156k GitHub stars~4.6k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Connect Component To Figma

    dequelabs/cauldron

    Add a Figma Code Connect (.figma.tsx) file for a Cauldron React component.

    129 GitHub stars~2k tokensUpdated today
    Frontend & DesignAuto-check passed

More from github/awesome-copilot

All 417 skills in this repo

  • Acquire Codebase Knowledge

    github/awesome-copilot

    Official

    Maps an unfamiliar codebase into seven evidence-backed documents in docs/codebase/, using a scan script and templates, for onboarding or architecture write-ups.

    40k GitHub starsUsed in 1 repo~2.3k tokens
    Auto-check passed

  • Azure Architecture Autopilot

    github/awesome-copilot

    Official

    Designs Azure infrastructure from a natural-language description, or diagrams an existing resource group, then refines the design through conversation and deploys it with Bicep.

    40k GitHub starsUsed in 1 repo~1.9k tokens
    Auto-check passed

  • Draw.io Diagram Generator

    github/awesome-copilot

    Official

    Generates, edits and validates draw.io files with correct mxGraph XML, covering flowcharts, architecture, sequence, ER and UML class diagrams.

    40k GitHub starsUsed in 1 repo~4.9k tokens
    Auto-check passed

  • Credit Risk Data Cleaning

    github/awesome-copilot

    Official

    Cleans raw credit data and screens variables before loan modeling, dropping unstable, noisy or redundant features and writing an Excel report of every step.

    40k GitHub starsUsed in 1 repo~1.5k tokens
    Auto-check passed

  • Daily Focus Board

    github/awesome-copilot

    Official

    Builds a warm, browser-based daily focus board the user updates by talking to their agent, with Eisenhower priorities, a brain-dump box and kind not-today carryover.

    40k GitHub stars~3k tokensUpdated today
    Auto-check passed

  • Python Pypi Package Builder

    github/awesome-copilot

    Official

    End-to-end skill for building, testing, linting, versioning, and publishing a production-grade Python library to PyPI.

    40k GitHub starsUsed in 1 repo~4.6k tokens
    Auto-check passed

Works with

Categories

Questions about Salesforce Component Standards

What does Salesforce Component Standards do?

Quality standards for Salesforce Lightning Web Components (LWC), Aura components, and Visualforce pages. Salesforce Component Standards is an agent skill from github/awesome-copilot, published by the product's own GitHub organization. Quality standards for Salesforce Lightning Web Components (LWC), Aura components, and Visualforce pages.

When should I use Salesforce Component Standards?

Salesforce Component Standards fits situations like: reviewing any Salesforce UI component to enforce platform-specific security and quality standards; tasks that involve CRM management; tasks that involve Web application vulnerabilities.

How do I install Salesforce Component Standards in Claude Code?

Run `npx skills add github/awesome-copilot --skill salesforce-component-standards -a claude-code`. Or copy the skill folder (skills/salesforce-component-standards in github/awesome-copilot) into .claude/skills/salesforce-component-standards in your project. Claude Code loads it when a task matches its description.

How do I install Salesforce Component Standards in Codex?

Run `npx skills add github/awesome-copilot --skill salesforce-component-standards -a codex`. Or copy the skill folder (skills/salesforce-component-standards in github/awesome-copilot) into .agents/skills/salesforce-component-standards in your project. Codex loads it when a task matches its description.

Can I use Salesforce Component Standards in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add github/awesome-copilot --skill salesforce-component-standards -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/salesforce-component-standards, .gemini/skills/salesforce-component-standards, .github/skills/salesforce-component-standards and .opencode/skills/salesforce-component-standards in your project.

What does Salesforce Component Standards need to run?

SKILL.md names no scripts, command-line tools or credentials: Salesforce Component Standards is instructions for the agent only.

Does Salesforce Component Standards access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Salesforce Component Standards safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Salesforce Component Standards use?

Salesforce Component Standards is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Salesforce Component Standards use?

About 2.4k tokens (SKILL.md is roughly 9.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Salesforce Component Standards?

Skills that share tags, products or a category with Salesforce Component Standards: Experience Lds Best Practices Apply (forcedotcom/sf-skills, 1.1k stars), Web Coder (boshi-xixixi/TraeSkill, 274 stars), Experience Lwc Security Validate (forcedotcom/sf-skills, 1.1k stars) and Experience Aura Lwc Migrate (forcedotcom/sf-skills, 1.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Salesforce Component Standards?

github (a GitHub organization, an official publisher) maintains it in github/awesome-copilot, which has 39,748 GitHub stars. The repository holds 417 skills in this directory. The repository was last updated on October 7, 2026.

Source: github/awesome-copilot on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.