Agent skill

Experience UI Bundle Metadata Generate

by forcedotcom in forcedotcom/sf-skills

A skill your agent uses when adding a front-end React or Angular UI bundle to an EXISTING SFDX project, or configuring UI bundle metadata and config files.

Apache-2.0Auto-check passedSales & Support

Install Experience UI Bundle Metadata Generate

skills CLI
$ npx skills add forcedotcom/sf-skills --skill experience-ui-bundle-metadata-generate -a claude-code

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

GitHub CLI
$ gh skill install forcedotcom/sf-skills experience-ui-bundle-metadata-generate --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/forcedotcom/sf-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/experience-ui-bundle-metadata-generate .claude/skills/experience-ui-bundle-metadata-generate && 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
experience-ui-bundle-metadata-generate
GitHub stars
1.1k
Token cost
~2.7k tokens
SKILL.md length
1,036 words
Files
7 (incl. scripts, references)
Skills in repo
251
Repo updated
First seen
Licence
Apache-2.0

At a glance

A skill your agent uses when adding a front-end React or Angular UI bundle to an EXISTING SFDX project, or configuring UI bundle metadata and config files.

  • Works in 6 steps: Verify the scaffold is complete — run… → Verify API version — run node… → Replace all default boilerplate — the… → …
  • Adding a front-end React
  • SKILL.md covers Scaffolding a New UI Bundle, UIBundle Bundle and CSP Trusted Sites
  • Runs JavaScript scripts from its folder; calls node and sf; reaches soap.sforce.com

What it does

Experience UI Bundle Metadata Generate is an agent skill from forcedotcom/sf-skills. Use this skill when adding a front-end React or Angular UI bundle to an EXISTING SFDX project, or configuring UI bundle metadata and config files. TRIGGER when: adding or scaffolding a new UI bundle — including adding one more or another UI bundle — into a project that already exists; scaffolding a single bundle with the basic template (reactbasic or angularbasic) via sf template generate ui-bundle; editing ui-bundle.json routing, headers, or output directory; working with .uibundle-meta.xml files; or registering…

Its SKILL.md is about 2.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 8 other files, including scripts and reference files (for example `references/angular-metadata-generate.md`, `references/csp-metadata-format.md` and `references/react-metadata-generate.md`).

It sits in Sales & Support, covering Project scaffolding and CRM management. It works with Salesforce, Angular and React. The repository describes itself as: Salesforce's curated collection of agent skills for building applications. Optimized for Agentforce Vibes, compatible with all AI tools. The licence is Apache-2.0.

When your agent uses it

  • Adding a front-end React
  • Angular UI bundle to an EXISTING SFDX project
  • Configuring UI bundle metadata and config files
  • Scaffolding a new UI bundle — including adding one more

Example prompts

  • “/experience-ui-bundle-metadata-generate”

Requirements

  • Node.js

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. Verify the scaffold is complete — run node /scripts/verify-bundle-location.mjs [] [] from the project root and follow any error output…
  2. Verify API version — run node /scripts/check-api-version.mjs from the project root to ensure sourceApiVersion in sfdx-project.json is 67.0…
  3. Replace all default boilerplate — the framework reference file lists the exact stock and placeholder strings to replace
  4. Populate the home page with real content (landing section, banners, hero, navigation)
  5. Update navigation and placeholders (see the experience-ui-bundle-frontend-generate skill)
  6. Configure a hosting target — a UI bundle without a in its meta XML will not be visible in the org. Use…

What it can do on your machine

Read from SKILL.md and the folder at commit e5164d9. 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

    Ships 3 files in scripts/ (JavaScript), which the agent can run.

    Shell commands in SKILL.md call:

    • node
    • sf

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

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • soap.sforce.com

    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

Experience UI Bundle Metadata Generate loads about 2.7k tokens when it runs, and up to ~6.9k if it reads all its reference files. Until then it costs about 238 tokens; SKILL.md has 1,036 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~238
When it runs · the whole SKILL.md, loaded when a task matches
~2.7k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~6.9k

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); the scripts in this folder are not scanned.

SKILL.md

The full file from forcedotcom/sf-skills at commit e5164d9, republished under its Apache-2.0 licence (© forcedotcom). 1,036 words, ~2,674 tokens.

Download SKILL.mdSave it as .claude/skills/experience-ui-bundle-metadata-generate/SKILL.md (or your agent's skills folder). This skill also uses 6 other files; get the full folder from GitHub.
name
experience-ui-bundle-metadata-generate
description
Use this skill when adding a front-end React or Angular UI bundle to an EXISTING SFDX project, or configuring UI bundle metadata and config files. TRIGGER when: adding or scaffolding a new UI bundle — including adding one more or another UI bundle — into a project that already exists; scaffolding a single bundle with the basic template (reactbasic or angularbasic) via sf template generate ui-bundle; editing ui-bundle.json routing, headers, or output directory; working with *.uibundle-meta.xml files; or registering CSP Trusted Sites, resolving blocked images or fonts or external API calls, or editing cspTrustedSites/*.cspTrustedSite-meta.xml files. DO NOT TRIGGER when: creating a brand-new Salesforce project entirely from scratch, where the whole SFDX starter project (UI bundle plus Experience Site metadata and toolchain) is generated together in one step (use experience-ui-bundle-project-generate).
metadata.version
1.3
metadata.domains
Experience
metadata.minApiVersion
67.0
metadata.relatedSkills
experience-ui-bundle-custom-app-generate, experience-ui-bundle-frontend-generate, experience-ui-bundle-project-generate, experience-ui-bundle-site-generate

UI Bundle Metadata

Scaffolding a New UI Bundle

REQUIRED FIRST STEP — never skip, even if asked to. Always run sf template generate ui-bundle to create new apps — never a framework CLI (create-react-app, Vite, Angular CLI), hand-written metadata, or any other substitute.

This step is mandatory even if the user says "just create the metadata," "skip the scaffold," "only do the metadata scaffolding," or "stop after the metadata files are in place." Those instructions describe what to stop doing after the scaffold (building, deploying, authoring pages) — they do not mean skip running the scaffold command itself. The .uibundle-meta.xml and ui-bundle.json files are configuration on top of the generated project, not a replacement for it. A bundle without package.json, src/, and an entry index.html cannot be built or deployed, even if the metadata files are perfectly formed.

Determine the framework

The frameworks this skill supports are exactly the reference files under <skill_dir>/references/, each named <framework>-metadata-generate.md (react, angular, …). This is the single source of truth — adding a framework means adding a reference file, nothing here changes.

Detect the framework deterministically — run the script:

sh
node <skill_dir>/scripts/detect-framework.mjs [<ROOT>]

Always invoke via node (never as a bare executable) so this works on Windows cmd/PowerShell as well as macOS/Linux/Git Bash.

ROOT defaults to the current directory; pass the bundle or project root when editing/configuring an existing bundle. The script prints exactly one token and sets a matching exit code — branch on it:

  • react / angular (exit 0) — open <skill_dir>/references/<framework>-metadata-generate.md and use it.
  • ambiguous (exit 2, both frameworks present) — ask the user which one, then use that reference.
  • unknown (exit 3, no signals — e.g. scaffolding a brand-new bundle into a project that has none yet) — fall back to the calling context or the user's stated framework; if still undecided, list <skill_dir>/references/, derive the supported set by stripping the -metadata-generate.md suffix from each filename, and ask the user to pick.

If the calling context or the user already named the framework, that overrides detection — but still confirm a matching reference file exists. Never guess.

The reference file gives you the exact --template flag, the entry-file layout, and the default boilerplate strings to replace for that framework.

  • UI bundle name (-n): Alphanumerical only — no spaces, hyphens, underscores, or special characters.
  • Pass --output-dir to use a different location for template generation. If you do, pass that same path to the verification script in step 1 below.

After generation:

  1. Verify the scaffold is complete — run node <skill_dir>/scripts/verify-bundle-location.mjs <BundleName> [<CustomOutputDir>] [<framework>] from the project root and follow any error output. This checks both the bundle's location AND that package.json, src/, and an entry index.html exist — if any are missing, the scaffold step was skipped; go back and run sf template generate ui-bundle before continuing. Pass <CustomOutputDir> only if you used --output-dir during scaffolding (pass "" to skip it while still supplying a framework); pass <framework> (react or angular) so the remediation hint uses the right template.
  2. Verify API version — run node <skill_dir>/scripts/check-api-version.mjs from the project root to ensure sourceApiVersion in sfdx-project.json is 67.0 or higher. The script will automatically update it if needed.
  3. Replace all default boilerplate — the framework reference file lists the exact stock <title> and placeholder strings to replace
  4. Populate the home page with real content (landing section, banners, hero, navigation)
  5. Update navigation and placeholders (see the experience-ui-bundle-frontend-generate skill)
  6. Configure a hosting target — a UI bundle without a <target> in its meta XML will not be visible in the org. Use experience-ui-bundle-custom-app-generate for internal (App Launcher) apps or experience-ui-bundle-site-generate for external (Experience Site) apps.

Always install dependencies before running any scripts in the UI bundle directory.


Show full SKILL.md (440 more words)Show less

UIBundle Bundle

A UIBundle bundle MUST live under force-app/main/default/uiBundles/<AppName>/ — never create it at the SFDX project root or under any other path. The SFDX deploy command will not find it otherwise.

The bundle directory must contain:

  • <AppName>.uibundle-meta.xml — filename must exactly match the folder name
  • A build output directory (default: dist/) with at least one file
Meta XML

Required fields: masterLabel, version (max 20 chars), isActive (boolean). Optional: description (max 255 chars), target.

Target Field

The <target> element specifies where the UI bundle is hosted:

ValueUse CaseCompanion Metadata
ExperienceExternal-facing site via Digital ExperienceNetwork, CustomSite, DigitalExperienceConfig, DigitalExperienceBundle
CustomApplicationInternal app via Lightning App LauncherCustomApplication (applications/*.app-meta.xml)

A <target> is required for the app to be accessible in a Salesforce org. A UI bundle deployed without a target will not appear anywhere — no App Launcher entry, no Experience Site URL. Always pair the bundle with one of:

  • experience-ui-bundle-site-generate (for Experience target)
  • experience-ui-bundle-custom-app-generate (for CustomApplication target)

Example with Experience target:

xml
<?xml version="1.0" encoding="UTF-8"?>
<UIBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <masterLabel>propertyrentalapp</masterLabel>
    <description>A Salesforce UI Bundle.</description>
    <isActive>true</isActive>
    <version>1</version>
    <target>Experience</target>
</UIBundle>

Example with CustomApplication target:

xml
<?xml version="1.0" encoding="UTF-8"?>
<UIBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <masterLabel>propertymanagementapp</masterLabel>
    <description>A Salesforce UI Bundle.</description>
    <isActive>true</isActive>
    <version>1</version>
    <target>CustomApplication</target>
</UIBundle>
ui-bundle.json

Optional file. Allowed top-level keys: outputDir, routing, headers.

Constraints:

  • Valid UTF-8 JSON, max 100 KB
  • Root must be a non-empty object (never {}, arrays, or primitives)

Path safety (applies to outputDir and routing.fallback): Reject backslashes, leading / or \, .. segments, null/control characters, globs (*, ?, **), and %. All resolved paths must stay within the bundle.

outputDir

Non-empty string referencing a subdirectory (not . or ./). Directory must exist and contain at least one file.

routing

If present, must be a non-empty object. Allowed keys: rewrites, redirects, fallback, trailingSlash, fileBasedRouting.

  • trailingSlash: "always", "never", or "auto"
  • fileBasedRouting: boolean
  • fallback: non-empty string satisfying path safety; target file must exist
  • rewrites: non-empty array of { route?, rewrite } objects — e.g., { "route": "/app/:path*", "rewrite": "/index.html" }
  • redirects: non-empty array of { route?, redirect, statusCode? } objects — statusCode must be 301, 302, 307, or 308
headers

Non-empty array of { source, headers: [{ key, value }] } objects.

Example:

json
{
  "routing": {
    "rewrites": [{ "route": "/app/:path*", "rewrite": "/index.html" }],
    "trailingSlash": "never"
  },
  "headers": [
    {
      "source": "/assets/**",
      "headers": [{ "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }]
    }
  ]
}

Never suggest: {} as root, empty "routing": {}, empty arrays, [{}], "outputDir": ".", "outputDir": "./".


CSP Trusted Sites

Salesforce enforces Content Security Policy headers. Any external domain not registered as a CSP Trusted Site will be blocked (images won't load, API calls fail, fonts missing).

When to Create

Whenever the app references a new external domain: CDN images, external fonts, third-party APIs, map tiles, iframes, external stylesheets.

Steps
  1. Identify external domains — extract the origin (scheme + host) from each external URL in the code
  2. Check existing registrations — look in force-app/main/default/cspTrustedSites/
  3. Map resource type to CSP directive:
Resource TypeDirective Field
ImagesisApplicableToImgSrc
API calls (fetch, XHR)isApplicableToConnectSrc
FontsisApplicableToFontSrc
StylesheetsisApplicableToStyleSrc
Video / audioisApplicableToMediaSrc
IframesisApplicableToFrameSrc

Always also set isApplicableToConnectSrc to true for preflight/redirect handling.

  1. Create the metadata file — follow references/csp-metadata-format.md for the .cspTrustedSite-meta.xml format and naming rules. Place in force-app/main/default/cspTrustedSites/.

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

Files

SKILL.md and 6 other files (scripts, references) in skills/experience-ui-bundle-metadata-generate of forcedotcom/sf-skills.

  • SKILL.md
  • references/angular-metadata-generate.md
  • references/csp-metadata-format.md
  • references/react-metadata-generate.md
  • scripts/check-api-version.mjs
  • scripts/detect-framework.mjs
  • scripts/verify-bundle-location.mjs

Open the folder on GitHubat commit e5164d9

Compare with similar skills

Experience UI Bundle Metadata Generate 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.

Experience UI Bundle Metadata Generate compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Experience UI Bundle Metadata Generate this skillforcedotcom/sf-skills1.1k—~2.7kAutomated safety check: PassApache-2.0
Gh Bot Commentjetstreamapp/jetstream125—~616Automated safety check: PassCustom licence
Sf DebugJaganpro/sf-skills424—~1.3kAutomated safety check: PassMIT
Rtdfany-tdf/any-tdf779—~1.1kAutomated safety check: PassMIT
Winui AppLanceMcCarthy/DevOpsExamples1721 repos~2.8kAutomated safety check: PassApache-2.0
Nextcrmpdovhomilja/nextcrm-app712—~3.3kAutomated safety check: PassMIT

Similar skills

  • Gh Bot Comment

    jetstreamapp/jetstream

    Post GitHub PR/issue comments, reviews, and review replies as the Jetstream bot account instead of the user's personal account.

    125 GitHub stars~616 tokensUpdated today
    DevelopmentAuto-check passed
  • Sf Debug

    Jaganpro/sf-skills

    Salesforce debug log analysis and troubleshooting with 100-point scoring.

    424 GitHub stars~1.3k tokensUpdated 5 mo ago
    Sales & SupportAuto-check passed
  • Rtdf

    any-tdf/any-tdf

    Build, review, and troubleshoot RTDF React applications using exact component APIs, themes, icons, localization, and scaffolding.

    779 GitHub stars~1.1k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Winui App

    LanceMcCarthy/DevOpsExamples

    Bootstrap, develop, and design modern WinUI 3 desktop applications with C and the Windows App SDK using official Microsoft guidance, WinUI Gallery patterns, Windows App SDK samples, and…

    172 GitHub starsUsed in 1 repo~2.8k tokens
    DevOps & CloudAuto-check passed
  • Nextcrm

    pdovhomilja/nextcrm-app

    Connect to NextCRM MCP server to manage CRM data — accounts, contacts, leads, opportunities, targets, products, contracts, activities, documents, target lists, enrichment, email accounts, campaigns…

    712 GitHub stars~3.3k tokensUpdated 3 days ago
    Sales & SupportAuto-check passed
  • Admin Template Project Initializer

    southliu/south-admin-react

    Removes the south-admin-react template's demo pages, components and menu entries, after a dry-run preview and your confirmation, and cleans up the matching imports.

    580 GitHub stars~519 tokensUpdated 18 days ago
    Frontend & DesignAuto-check passed

More from forcedotcom/sf-skills

All 251 skills in this repo
  • Agentforce Architecture Analyze

    forcedotcom/sf-skills

    Declared architecture snapshot for one Agentforce agent: planner, topics, actions, flows, Apex, prompt templates, and NGA plugins.

    1.1k GitHub stars~4.5k tokensUpdated yesterday
    Auto-check passed
  • Agentforce D360 Analyze

    forcedotcom/sf-skills

    Data Cloud 360° view of a single Agentforce session. An agent skill from forcedotcom/sf-skills.

    1.1k GitHub stars~3.4k tokensUpdated yesterday
    Auto-check passed
  • Apply a Salesforce sandbox post-copy automation JSON config against a target org.

    1.1k GitHub stars~5.3k tokensUpdated yesterday
    Auto-check: notes
  • Apply a Salesforce sandbox post-copy automation JSON config against a target org.

    1.1k GitHub stars~5.4k tokensUpdated yesterday
    Auto-check: notes
  • Design Systems Slds Apply

    forcedotcom/sf-skills

    Apply SLDS-compliant UI using the correct blueprints, styling hooks, utility classes, and icons.

    1.1k GitHub stars~3.7k tokensUpdated yesterday
    Auto-check passed
  • Experience Lwc Generate

    forcedotcom/sf-skills

    Lightning Web Components with PICKLES methodology and 165-point scoring.

    1.1k GitHub stars~2.4k tokensUpdated yesterday
    Auto-check passed

Questions about Experience UI Bundle Metadata Generate

What does Experience UI Bundle Metadata Generate do?

A skill your agent uses when adding a front-end React or Angular UI bundle to an EXISTING SFDX project, or configuring UI bundle metadata and config files. Experience UI Bundle Metadata Generate is an agent skill from forcedotcom/sf-skills. Use this skill when adding a front-end React or Angular UI bundle to an EXISTING SFDX project, or configuring UI bundle metadata and config files.

When should I use Experience UI Bundle Metadata Generate?

Experience UI Bundle Metadata Generate fits situations like: adding a front-end React; angular UI bundle to an EXISTING SFDX project; configuring UI bundle metadata and config files; scaffolding a new UI bundle — including adding one more.

How do I install Experience UI Bundle Metadata Generate in Claude Code?

Run `npx skills add forcedotcom/sf-skills --skill experience-ui-bundle-metadata-generate -a claude-code`. Or copy the skill folder (skills/experience-ui-bundle-metadata-generate in forcedotcom/sf-skills) into .claude/skills/experience-ui-bundle-metadata-generate in your project. Claude Code loads it when a task matches its description.

How do I install Experience UI Bundle Metadata Generate in Codex?

Run `npx skills add forcedotcom/sf-skills --skill experience-ui-bundle-metadata-generate -a codex`. Or copy the skill folder (skills/experience-ui-bundle-metadata-generate in forcedotcom/sf-skills) into .agents/skills/experience-ui-bundle-metadata-generate in your project. Codex loads it when a task matches its description.

Can I use Experience UI Bundle Metadata Generate 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 forcedotcom/sf-skills --skill experience-ui-bundle-metadata-generate -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/experience-ui-bundle-metadata-generate, .gemini/skills/experience-ui-bundle-metadata-generate, .github/skills/experience-ui-bundle-metadata-generate and .opencode/skills/experience-ui-bundle-metadata-generate in your project.

What does Experience UI Bundle Metadata Generate need to run?

Going by SKILL.md and its folder, Experience UI Bundle Metadata Generate needs JavaScript for the scripts in its folder and the command-line tools its instructions call (node and sf). Our summary lists: Node.js.

Does Experience UI Bundle Metadata Generate access the network?

SKILL.md names 1 domain. In commands or code: soap.sforce.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Experience UI Bundle Metadata Generate 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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Experience UI Bundle Metadata Generate use?

Experience UI Bundle Metadata Generate is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Experience UI Bundle Metadata Generate use?

About 2.7k tokens (SKILL.md is roughly 11k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 4.2k tokens, read only when the agent opens those files.

What are the alternatives to Experience UI Bundle Metadata Generate?

Skills that share tags, products or a category with Experience UI Bundle Metadata Generate: Gh Bot Comment (jetstreamapp/jetstream, 125 stars), Sf Debug (Jaganpro/sf-skills, 424 stars), Rtdf (any-tdf/any-tdf, 779 stars) and Winui App (LanceMcCarthy/DevOpsExamples, 172 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Experience UI Bundle Metadata Generate?

forcedotcom (a GitHub organization) maintains it in forcedotcom/sf-skills, which has 1,060 GitHub stars. The repository holds 251 skills in this directory. The repository was last updated on October 7, 2026.

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