generating-ui-bundle-metadata
MUST activate when the project contains a uiBundles/*/src/ directory and scaffolding a new UI bundle or app, or when editing ui-bundle.json, .uibundle-meta.xml, or CSP trusted site files. Use this skill when scaffolding with sf template generate ui-bundle, configuring ui-bundle.json (routing, headers, outputDir), or registering CSP Trusted Sites. Activate when the task involves files matching *.uibundle-meta.xml, ui-bundle.json, or cspTrustedSites/*.cspTrustedSite-meta.xml.
Security Assessment
About generating-ui-bundle-metadata
A Salesforce skill for scaffolding and configuring the metadata of a UI bundle. It activates when a project contains a uiBundles/*/src/ directory and a new UI bundle or app is being scaffolded, or when editing ui-bundle.json, .uibundle-meta.xml, or CSP trusted site files. Scaffolding is done with `sf template generate ui-bundle` using `--template reactbasic` for a React-based bundle rather than create-react-app, Vite, or other generic scaffolds, and the bundle name passed with `-n` must be alphanumeric only. After generation, the workflow replaces default boilerplate, populates the home page with real content, updates navigation, and configures a hosting target.
A UIBundle bundle lives under uiBundles/<AppName>/ and must contain a `<AppName>.uibundle-meta.xml` whose filename exactly matches the folder name plus a build output directory (default dist/) with at least one file. The meta XML requires masterLabel, version (max 20 chars), and isActive, with optional description (max 255 chars) and target. The `<target>` element is required for the bundle to be accessible in an org: `Experience` hosts an external-facing Digital Experience site (paired with generating-ui-bundle-site) and `CustomApplication` adds an internal app to the Lightning App Launcher (paired with generating-ui-bundle-custom-app). A bundle deployed without a target appears nowhere.
The optional ui-bundle.json file allows only the top-level keys outputDir, routing, and headers; it must be valid UTF-8 JSON under 100 KB with a non-empty object root. Path-safety rules reject backslashes, leading slashes, '..' segments, control characters, globs, and '%' so resolved paths stay inside the bundle. Routing supports rewrites, redirects (with statusCode 301, 302, 307, or 308), fallback, trailingSlash ('always', 'never', or 'auto'), and fileBasedRouting, while headers attach key/value pairs to matched sources. The skill also covers CSP Trusted Sites: any external domain for images, fetch/XHR, fonts, stylesheets, media, or iframes must be registered with the matching directive field in force-app/main/default/cspTrustedSites/, and isApplicableToConnectSrc should always be set for preflight and redirect handling. The .cspTrustedSite-meta.xml format is described in implementation/csp-metadata-format.md.
FAQ
Which command and template should I use to scaffold a bundle?
Use `sf template generate ui-bundle` and always pass `--template reactbasic` for a React-based bundle, rather than create-react-app, Vite, or other generic scaffolds. The bundle name given with `-n` must be alphanumeric only.
Why is a target required in the meta XML?
A `<target>` is required for the bundle to be accessible in an org; without one it appears nowhere (no App Launcher entry and no Experience Site URL). Use `Experience` for external sites or `CustomApplication` for internal App Launcher apps.
What keys are allowed in ui-bundle.json?
Only the top-level keys outputDir, routing, and headers are allowed. The file must be valid UTF-8 JSON under 100 KB with a non-empty object root, never `{}`, arrays, or primitives.
What path values are rejected for safety?
For outputDir and routing.fallback the skill rejects backslashes, leading `/` or `\`, `..` segments, null/control characters, globs (`*`, `?`, `**`), and `%`, so all resolved paths stay within the bundle.
When do I need a CSP Trusted Site entry?
Whenever the app references a new external domain such as CDN images, external fonts, third-party APIs, map tiles, or iframes. Map the resource to the right directive field and also set isApplicableToConnectSrc for preflight and redirect handling.
Install generating-ui-bundle-metadata
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
forcedotcom/sf-skills