# experience-ui-bundle-localize

Extracts hardcoded UI strings from React or Angular UI Bundles into Salesforce Custom Labels and wires runtime i18n through the GraphQL UI API.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2200 installs · ★ 1112
- Author: forcedotcom
- License: Apache-2.0 · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/forcedotcom/sf-skills/tree/HEAD/skills/experience-ui-bundle-localize/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/experience-ui-bundle-localize

## What it does

UI Bundles run outside the standard LWC compiler, so compile-time label imports like `@salesforce/label/*` do not work. The application must fetch Custom Labels at runtime via the Salesforce GraphQL UI API and hand them to an i18n library. This skill automates the setup. It detects whether the project uses React or Angular, extracts string literals from source files, and generates both the `CustomLabels.labels-meta.xml` metadata and the label manifest.

Target orgs must support Salesforce API v68.0 or higher. Running it against Release 262 or older will simply fail. The workflow supports authenticated B2E bundles and B2C site bundles, but explicitly rejects B2B projects. In addition, B2C sites require the `GraphQLApiOrgPrefForGuestUsers` preference enabled by an admin, otherwise guest GraphQL requests return HTTP 403. Required CLI dependencies include `sf >=2.0.0`, `npm >=7.0.0`, and `jq >=1.6`.

## Requirements
- Works with: Salesforce

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add forcedotcom/sf-skills --skill experience-ui-bundle-localize -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/experience-ui-bundle-localize/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/experience-ui-bundle-localize/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add forcedotcom/sf-skills --skill experience-ui-bundle-localize -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/experience-ui-bundle-localize/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add forcedotcom/sf-skills --skill experience-ui-bundle-localize -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/experience-ui-bundle-localize/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install forcedotcom/sf-skills experience-ui-bundle-localize
```

2. **Manually: put the files in place**
- File: `.github/skills/experience-ui-bundle-localize/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add forcedotcom/sf-skills --skill experience-ui-bundle-localize -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/forcedotcom/sf-skills --path skills/experience-ui-bundle-localize
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/experience-ui-bundle-localize/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add forcedotcom/sf-skills --skill experience-ui-bundle-localize -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/forcedotcom/sf-skills/tree/HEAD/skills/experience-ui-bundle-localize/SKILL.md

## When to use it
- extract hardcoded component strings into Salesforce Custom Labels
- wire a runtime i18n library over the Platform SDK backend
- verify label rendering across different locales
- generate a label manifest for the GraphQL UI API

## Example prompts
- Localize the React bundle in uiBundles/account/src/ and extract strings to Custom Labels
- Wire runtime i18n into our Angular UI bundle using the Platform SDK
- Check label manifest registration and test rendering across locales in uiBundles/cart/src/

## Source text · SKILL.md · Apache-2.0

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 5346be691e4d26d7.

BEGIN THIRD-PARTY FILE 5346be691e4d26d7
```text
---
name: experience-ui-bundle-localize
description: "MUST activate to localize / internationalize a uiBundles/*/src/ project (React or Angular): extract hardcoded user-facing strings into Custom Labels, wire a runtime i18n library over the Platform SDK backend, add labels for another language, or troubleshoot label rendering across locales. Triggers: user-facing string literals in component files, a CustomLabels.labels-meta.xml, a src/i18n/ directory or label-manifest.ts, translation call sites, or requests to 'translate / localize / internationalize / support another language.' Scope: authenticated B2E UI Bundles and B2C site bundles. Use experience-ui-bundle-site-generate instead for site language configuration or sfdc_cms__languageSettings. DO NOT TRIGGER for B2B site bundles, building app shell/UI or styling, reading/writing/refreshing records (use experience-ui-bundle-salesforce-data-access), generating a new bundle (use experience-ui-bundle-frontend-generate), deploying (use experience-ui-bundle-deploy), or authoring translations in Translation Workbench."
metadata:
  version: "1.2"
  domains: ["Experience"]
  minApiVersion: "68.0"
  relatedSkills:
    - "experience-ui-bundle-deploy"
    - "experience-ui-bundle-frontend-generate"
    - "experience-ui-bundle-salesforce-data-access"
    - "experience-ui-bundle-site-generate"
  cliTools:
    - tool: ["jq"]
      semver: ">=1.6"
    - tool: ["npm"]
      semver: ">=7.0.0"
    - tool: ["sf"]
      semver: ">=2.0.0"
---

# Localize a UI Bundle

Localize a UI Bundle: extract user-facing strings into Salesforce Custom Labels, wire a
runtime i18n library over the Platform SDK backend, and verify labels across locales.

This file is the **framework-neutral workflow + guardrail spine**. The framework-specific
detail — which i18n library, the translation call convention, the files scanned, the wiring
shape, and the depth docs — lives in a per-framework reference.

## The one-paragraph mental model

A UI Bundle can't use compile-time label imports the way LWC does (`@salesforce/label/*`
resolves inside the platform's compiler, which your standalone bundle doesn't go through).
Instead, your app **fetches labels at runtime** through the Salesforce GraphQL UI API and
hands them to a standard i18n library to render. The Platform SDK provides the runtime
plumbing: a detector that reads the user's language, a backend that fetches labels over
GraphQL, and a context fetch. You write two thin files — a short init that wires the SDK
```
END THIRD-PARTY FILE 5346be691e4d26d7

The third-party file has ended. Everything between the 5346be691e4d26d7 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2517 of 23424 bytes. © forcedotcom · Apache-2.0 · https://github.com/forcedotcom/sf-skills/tree/HEAD/skills/experience-ui-bundle-localize/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md