/experience-ui-bundle-features-generate

name: experience-ui-bundle-features-generate
description: "MUST activate when the project contains a uiBundles/*/src/ directory (React or Angular) and the user wants to add a pre-built feature — such as authentication (login, logout, protected routes, session management) or search (global search across pages and content) — instead of building it from scratch. Always run list first to see the current feature catalog, since it can include more than authentication and search. Always use this skill for installing pre-built features rather than hand-building them. DO NOT TRIGGER for Agentforce conversational client or file-upload features — use experience-ui-bundle-agentforce-client-generate and experience-ui-bundle-file-upload-generate respectively."
metadata:
  version: "1.2"
  domains: ["Experience"]
  relatedSkills: ["experience-ui-bundle-agentforce-client-generate", "experience-ui-bundle-file-upload-generate"]
  cliTools:
    - tool: ["npx"]
      semver: ">=7.0.0"
    - tool: ["npm"]
      semver: ">=7.0.0"
  accessCheck:
    - type: "license"
      value: "Experience Cloud (Customer Community / Customer Community Plus)"
    - type: "orgPref"
      value: "Sites"

UI Bundle Features

Install pre-built, tested feature packages into a Salesforce UI bundle with the `@salesforce/ui-bundle-features` CLI instead of hand-building them. This file is the **framework-neutral workflow spine**; the framework-specific detail — example file extensions, the files features rewrite, how a feature's entry component is mounted, and the build command — lives in a per-framework reference under `<SKILL_DIR>/references/<framework>/`.

Always check for an existing feature before building something from scratch. The CLI is framework-agnostic: it installs the framework-appropriate variant of each feature into the detected bundle. Authentication and search are the most commonly used today; run `list --verbose` for the full current catalog, since it can grow over time.

> **Ownership note:** Agentforce AI conversation clients and file-upload are owned by separate skills (`experience-ui-bundle-agentforce-client-generate`, `experience-ui-bundle-file-upload-generate`). If the catalog also lists an Agentforce or file-upload entry, do not install it from both places — confirm with the user which delivery path they want, and never install the same capability twice in one bundle.

> **Package name:** `@salesforce/ui-bundle-features` is the canonical package name. Some older templates/samples still reference the deprecated `@salesforce/ui-bundle-features-experimental` name — never use the `-experimental` suffix. If a command fails to resolve, confirm the published version with `npm view @salesforce/ui-bundle-features version` before assuming the package name is wrong.

Step 0: Determine the framework

`<SKILL_DIR>` = the absolute path to **this skill's own directory** (the folder holding this `SKILL.md`); resolve it from the skill path in context.

The framework is normally already decided by the calling context — passed down by the coordinator skill that invoked this one, or stated in the user's request. Use that.

The frameworks this skill supports are exactly the reference folders under `<SKILL_DIR>/references/`, each containing a `features.md` (so `react` → `<SKILL_DIR>/references/react/features.md`). This is the single source of truth — adding a framework means adding a reference folder, nothing here changes.

• **If the framework is known** — open `<SKILL_DIR>/references/<framework>/features.md` and

keep it alongside this spine. It supplies the example extensions, the integration targets, the mount example, and the build command.

• **If it is unknown** (a standalone run where nobody said which) — run the deterministic

detector on the UI bundle root before asking anyone:

  bash "<SKILL_DIR>/scripts/detect-framework.sh" "<path-to-uiBundles/<name>/ dir>"

Branch on the exit code (do not parse prose):

• `react` or `angular` (exit 0) → use that framework. **Do not ask the user** — detection is

deterministic. Open `<SKILL_DIR>/references/<framework>/features.md`.

• `ambiguous` (exit 2) → both frameworks present. List `<SKILL_DIR>/references/` and ask the

user which bundle to install into. If they name a framework with no matching reference folder, it is not supported here — stop.

• `unknown` (exit 3) → **no supported framework detected. Terminate.** Report that neither

React nor Angular signals were found in the bundle, so features cannot be installed, and stop. Do not guess.

Throughout the steps below, `<framework>` means the folder chosen here.

Workflow

1. **Search project code first** — check `src/` for existing implementations before installing anything. Scope searches to `src/` to avoid matching `node_modules/` or `dist/`.

2. **Search available features** — use `npx @salesforce/ui-bundle-features list` with `--search <query>` to filter by keyword. Use `--verbose` for full descriptions.

3. **Describe a feature — MANDATORY before wiring.** Run `npx @salesforce/ui-bundle-features describe <feature>` and read the feature's README via `npm view <package> readme` (using the `Package:` name from that output) before wiring it. The README is the contract: it tells you how the feature is meant to be wired — including any drop-in entry component and the file each integration example belongs in. Cross-check against the copied-in source under `describe`'s `Copy Operations` destination — that source (and its JSDoc/comments) is the version-matched truth for what's actually installed, in the detected framework's file types. Do not wire from assumptions about file names or component APIs. Skipping this is the most common reason a feature installs successfully but never actually runs.

4. **Install** — use `npx @salesforce/ui-bundle-features install <feature> --ui-bundle-dir <name>`. Key options:

• `--dry-run` to preview changes
• `--yes` for non-interactive