experience-ui-bundle-features-generate

UI Bundle Features Install pre-built, tested feature packages into a Salesforce UI bundle with the 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 . 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 se…

\n```\nIf found, move each file to `\u003cmetadata-root>/\u003csame-relative-subpath>` (keep `-meta.xml` sidecars attached) and delete the emptied placeholder dir(s).\n\n**Verification:**\n- [ ] Re-run `find uiBundles/\u003cAppName> -type d -regex '.*/\u003c[^/]+>

Important: agents should read /llm.txt, /llms.txt, or /.well-known/skills.json to discover the public Skillopedia API.

` — output must be empty before proceeding.","attachment_filenames":["references/angular/features.md","references/common/conflict-resolution-schema.json","references/react/features.md","scripts/detect-framework.sh"],"attachments":[{"filename":"references/angular/features.md","content":"# Angular UI Bundle Features\n\nFramework reference for the **Angular** path of `experience-ui-bundle-features-generate`. Read\nthis alongside the workflow spine in `SKILL.md`. The `@salesforce/ui-bundle-features` CLI\ninstalls the Angular variant of each feature into an Angular UI bundle (an `angular.json` at/\nabove the bundle, `@angular/core` in `package.json`, standalone components as `.ts` + `.html`\npairs under `src/app/`).\n\n## Example files\n\nFeatures ship integration examples under `__examples__/` as Angular sources — a standalone\ncomponent is a **`.ts`** class + its **`.html`** template (e.g. `account-search.ts` +\n`account-search.html`), often full working pages, not bare stubs. Integrate the pattern into\nthe target named in `describe` output, then verify before deleting the `__examples__/` dir.\n\n> Do not assume file names or a `.component` infix — Angular UI bundle starters name\n> components without it (`home.ts`, not `home.component.ts`). The `describe` `Copy Operations`\n> destination and the copied-in source are the version-matched truth for what was installed.\n\n## Files features may rewrite\n\nAngular features commonly touch app wiring:\n\n- `src/app/app.routes.ts` — route registration (route-based features add routes here)\n- `src/app/app.ts` + `src/app/app.html` — root component and its template\n- the app-layout component under `src/app/components/layout/` — the shell some features mount into\n\nThese are the paths to expect as conflicts in the two-pass conflict flow; resolve them per\n`SKILL.md` → *Conflict Handling* (the exact paths are whatever the CLI prints).\n\n## Mount the feature's entry component\n\nMount the OOTB component the feature ships rather than hand-rolling a parallel one. Angular\nmounts by **selector** (in a template) or by **route** (lazy-loaded standalone component) —\nuse whichever `describe`/README specifies. For search mounted on a results page template:\n\n```html\n\u003c!-- search-results.html — use the feature's selector; do NOT hand-roll a results page -->\n\u003csf-search />\n```\n\nOr as a route in `src/app/app.routes.ts`:\n\n```ts\nexport const routes: Routes = [\n { path: \"search\", loadComponent: () =>\n import(\"./features/search/search\").then((m) => m.Search) }, // path per describe output\n];\n```\n\nImport the feature's standalone component into whichever component's `imports:` array hosts it.\n\n## Build & verify\n\nBuild command (run from the UI bundle dir):\n\n```bash\nnpm run build\n```\n\nWorked grep for the *verify-before-delete* check — Angular splits usage across `.ts` (selector\nregistration, service imports, route entry) and `.html` (the mounted selector). Adjust the\nsymbol to one from the example you integrated:\n\n```bash\ngrep -rq \"sf-search\\|SearchService\" src/app --include='*.ts' --include='*.html' 2>/dev/null || {\n echo \"ERROR: Pattern from example not found in target files - integration incomplete\"\n echo \"Do NOT delete __examples__/ until the pattern is confirmed present\"\n exit 1\n}\n```\n\nOnly `rm -rf __examples__/` after the build passes **and** this grep confirms the pattern is\npresent in the target.\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":3091,"content_sha256":"0649c319503126ce2e2c90981bb3dc4a164b6c8bd8d8c6cb6c0e0a965ef8b739"},{"filename":"references/common/conflict-resolution-schema.json","content":"{\n \"$schema\": \"https://json-schema.org/draft/2020-12/schema\",\n \"title\": \"UI Bundle Features Conflict Resolution\",\n \"description\": \"Schema for conflict-resolution.json used by @salesforce/ui-bundle-features CLI\",\n \"type\": \"object\",\n \"patternProperties\": {\n \"^.+$\": {\n \"type\": \"string\",\n \"enum\": [\"overwrite\", \"skip\"],\n \"description\": \"Resolution strategy for a conflicting file path. 'overwrite' replaces the existing file, 'skip' keeps the existing file.\"\n }\n },\n \"additionalProperties\": false,\n \"examples\": [\n {\n \"src/appLayout.tsx\": \"overwrite\",\n \"src/routes.tsx\": \"skip\"\n }\n ]\n}\n","content_type":"application/json; charset=utf-8","language":"json","size":628,"content_sha256":"fed03031add9175e040851f49b7d623192576002956f4c015dd942d024dd8486"},{"filename":"references/react/features.md","content":"# React UI Bundle Features\n\nFramework reference for the **React** path of `experience-ui-bundle-features-generate`. Read\nthis alongside the workflow spine in `SKILL.md`. The `@salesforce/ui-bundle-features` CLI\ninstalls the React variant of each feature into a React/Vite UI bundle (`\"react\"` in the\nbundle `package.json`, `.tsx` sources under `src/`).\n\n## Example files\n\nFeatures ship integration examples under `__examples__/` as **`.tsx`** files — often full,\nworking pages with concrete names (e.g. `AccountSearch.tsx`), not bare stubs. Integrate the\npattern into the target file named in `describe` output, then verify before deleting the\n`__examples__/` dir.\n\n## Files features may rewrite\n\nReact features commonly touch the app shell and routing:\n\n- `src/appLayout.tsx` — the app layout/shell\n- `src/routes.tsx` — route registration\n- `src/App.tsx` — app entry (some features mount here)\n\nThese are the paths to expect as conflicts in the two-pass conflict flow; resolve them per\n`SKILL.md` → *Conflict Handling* (the exact paths are whatever the CLI prints).\n\n## Mount the feature's entry component\n\nMount the OOTB component the feature ships rather than hand-rolling a parallel one. For search,\nmount the feature's `\u003cSearch>` component (JSX) on the search-results page:\n\n```tsx\nimport { Search } from \"./features/search\"; // path per describe output\n// ...\nexport default function SearchResults() {\n return \u003cSearch />; // do NOT hand-roll a results page\n}\n```\n\n## Build & verify\n\nBuild command (run from the UI bundle dir):\n\n```bash\nnpm run build\n```\n\nWorked grep for the *verify-before-delete* check (adjust the symbol to one from the example\nyou integrated — here the `SearchInput`/`useSearch` pattern integrated into a page):\n\n```bash\ngrep -q \"SearchInput\\|useSearch\" src/pages/*.tsx src/components/*.tsx 2>/dev/null || {\n echo \"ERROR: Pattern from example not found in target files - integration incomplete\"\n echo \"Do NOT delete __examples__/ until the pattern is confirmed present\"\n exit 1\n}\n```\n\nOnly `rm -rf __examples__/` after the build passes **and** this grep confirms the pattern is\npresent in the target.\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":2177,"content_sha256":"9a0eeac4a6347bf68a1be72f475dca10899eee83fbee88db6ddc398bc3cb7372"},{"filename":"scripts/detect-framework.sh","content":"#!/usr/bin/env bash\n#\n# detect-framework.sh — deterministic UI Bundle framework detector.\n#\n# Usage: bash detect-framework.sh [ROOT]\n# ROOT app or uiBundle root to inspect (default: current directory)\n#\n# Prints exactly one of the following tokens to stdout, nothing else, and sets\n# a matching exit code so callers can branch without parsing:\n# react (exit 0) — React signals only\n# angular (exit 0) — Angular signals only\n# ambiguous (exit 2) — both React and Angular signals present\n# unknown (exit 3) — neither framework detected\n#\n# Step 0 of the skill acts on the result: a single framework (exit 0) proceeds;\n# `ambiguous` asks the user to disambiguate; `unknown` TERMINATES the workflow\n# (no supported framework found — do not guess).\n\nset -u\n\nROOT=\"${1:-.}\"\nangular=0\nreact=0\n\n# Resolve ROOT to an absolute path when possible (for the angular.json walk-up).\nabs_root=\"$(cd \"$ROOT\" 2>/dev/null && pwd || true)\"\n\n# 1) angular.json at or above ROOT → Angular workspace.\ndir=\"$abs_root\"\nwhile [ -n \"$dir\" ]; do\n [ -f \"$dir/angular.json\" ] && angular=1\n [ \"$dir\" = \"/\" ] && break\n dir=\"$(dirname \"$dir\")\"\ndone\n\n# 2) package.json dependencies (excluding node_modules).\nwhile IFS= read -r pkg; do\n [ -z \"$pkg\" ] && continue\n grep -q '\"@angular/core\"' \"$pkg\" 2>/dev/null && angular=1\n grep -Eq '\"react\"[[:space:]]*:' \"$pkg\" 2>/dev/null && react=1\ndone \u003c\u003cEOF\n$(find \"$ROOT\" -type d -name node_modules -prune -o -type f -name package.json -print 2>/dev/null)\nEOF\n\n# 3) Source-file signatures (excluding node_modules).\nhas_file() {\n find \"$ROOT\" -type d -name node_modules -prune -o -type f -name \"$1\" -print 2>/dev/null | grep -q .\n}\n\n# Angular: component files, routing module, or @Component-decorated classes.\nhas_file '*.component.ts' && angular=1\nhas_file 'app.routes.ts' && angular=1\nif grep -rls --exclude-dir=node_modules --include='*.ts' '@Component' \"$ROOT\" 2>/dev/null | grep -q .; then\n angular=1\nfi\n\n# React: JSX/TSX source files.\nhas_file '*.tsx' && react=1\nhas_file '*.jsx' && react=1\n\nif [ \"$angular\" -eq 1 ] && [ \"$react\" -eq 1 ]; then\n echo ambiguous\n exit 2\nelif [ \"$angular\" -eq 1 ]; then\n echo angular\n exit 0\nelif [ \"$react\" -eq 1 ]; then\n echo react\n exit 0\nelse\n echo unknown\n exit 3\nfi\n","content_type":"application/x-sh; charset=utf-8","language":"bash","size":2263,"content_sha256":"f9b33fc6555b68093c779ba33c8d96a135d23f7d67ad564c32c1215eaa55d3d3"}],"content_json":{"type":"doc","content":[{"type":"heading","attrs":{"level":1},"content":[{"text":"UI Bundle Features","type":"text"}]},{"type":"paragraph","content":[{"text":"Install pre-built, tested feature packages into a Salesforce UI bundle with the ","type":"text"},{"text":"@salesforce/ui-bundle-features","type":"text","marks":[{"type":"code_inline"}]},{"text":" CLI instead of hand-building them. This file is the ","type":"text"},{"text":"framework-neutral workflow spine","type":"text","marks":[{"type":"strong"}]},{"text":"; 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 ","type":"text"},{"text":"\u003cSKILL_DIR>/references/\u003cframework>/","type":"text","marks":[{"type":"code_inline"}]},{"text":".","type":"text"}]},{"type":"paragraph","content":[{"text":"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 ","type":"text"},{"text":"list --verbose","type":"text","marks":[{"type":"code_inline"}]},{"text":" for the full current catalog, since it can grow over time.","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"Ownership note:","type":"text","marks":[{"type":"strong"}]},{"text":" Agentforce AI conversation clients and file-upload are owned by separate skills (","type":"text"},{"text":"experience-ui-bundle-agentforce-client-generate","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"experience-ui-bundle-file-upload-generate","type":"text","marks":[{"type":"code_inline"}]},{"text":"). 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.","type":"text"}]}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"Package name:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"@salesforce/ui-bundle-features","type":"text","marks":[{"type":"code_inline"}]},{"text":" is the canonical package name. Some older templates/samples still reference the deprecated ","type":"text"},{"text":"@salesforce/ui-bundle-features-experimental","type":"text","marks":[{"type":"code_inline"}]},{"text":" name — never use the ","type":"text"},{"text":"-experimental","type":"text","marks":[{"type":"code_inline"}]},{"text":" suffix. If a command fails to resolve, confirm the published version with ","type":"text"},{"text":"npm view @salesforce/ui-bundle-features version","type":"text","marks":[{"type":"code_inline"}]},{"text":" before assuming the package name is wrong.","type":"text"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Step 0: Determine the framework","type":"text"}]},{"type":"paragraph","content":[{"text":"\u003cSKILL_DIR>","type":"text","marks":[{"type":"code_inline"}]},{"text":" = the absolute path to ","type":"text"},{"text":"this skill's own directory","type":"text","marks":[{"type":"strong"}]},{"text":" (the folder holding this ","type":"text"},{"text":"SKILL.md","type":"text","marks":[{"type":"code_inline"}]},{"text":"); resolve it from the skill path in context.","type":"text"}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"paragraph","content":[{"text":"The frameworks this skill supports are exactly the reference folders under ","type":"text"},{"text":"\u003cSKILL_DIR>/references/","type":"text","marks":[{"type":"code_inline"}]},{"text":", each containing a ","type":"text"},{"text":"features.md","type":"text","marks":[{"type":"code_inline"}]},{"text":" (so ","type":"text"},{"text":"react","type":"text","marks":[{"type":"code_inline"}]},{"text":" → ","type":"text"},{"text":"\u003cSKILL_DIR>/references/react/features.md","type":"text","marks":[{"type":"code_inline"}]},{"text":"). This is the single source of truth — adding a framework means adding a reference folder, nothing here changes.","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"If the framework is known","type":"text","marks":[{"type":"strong"}]},{"text":" — open ","type":"text"},{"text":"\u003cSKILL_DIR>/references/\u003cframework>/features.md","type":"text","marks":[{"type":"code_inline"}]},{"text":" and keep it alongside this spine. It supplies the example extensions, the integration targets, the mount example, and the build command.","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"If it is unknown","type":"text","marks":[{"type":"strong"}]},{"text":" (a standalone run where nobody said which) — run the deterministic detector on the UI bundle root before asking anyone:","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"bash"},"content":[{"text":"bash \"\u003cSKILL_DIR>/scripts/detect-framework.sh\" \"\u003cpath-to-uiBundles/\u003cname>/ dir>\"","type":"text"}]},{"type":"paragraph","content":[{"text":"Branch on the exit code (do not parse prose):","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"react","type":"text","marks":[{"type":"code_inline"}]},{"text":" or ","type":"text"},{"text":"angular","type":"text","marks":[{"type":"code_inline"}]},{"text":" (exit 0) → use that framework. ","type":"text"},{"text":"Do not ask the user","type":"text","marks":[{"type":"strong"}]},{"text":" — detection is deterministic. Open ","type":"text"},{"text":"\u003cSKILL_DIR>/references/\u003cframework>/features.md","type":"text","marks":[{"type":"code_inline"}]},{"text":".","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"ambiguous","type":"text","marks":[{"type":"code_inline"}]},{"text":" (exit 2) → both frameworks present. List ","type":"text"},{"text":"\u003cSKILL_DIR>/references/","type":"text","marks":[{"type":"code_inline"}]},{"text":" 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.","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"unknown","type":"text","marks":[{"type":"code_inline"}]},{"text":" (exit 3) → ","type":"text"},{"text":"no supported framework detected. Terminate.","type":"text","marks":[{"type":"strong"}]},{"text":" Report that neither React nor Angular signals were found in the bundle, so features cannot be installed, and stop. Do not guess.","type":"text"}]}]}]}]}]},{"type":"paragraph","content":[{"text":"Throughout the steps below, ","type":"text"},{"text":"\u003cframework>","type":"text","marks":[{"type":"code_inline"}]},{"text":" means the folder chosen here.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Workflow","type":"text"}]},{"type":"ordered_list","attrs":{"order":1,"listStyle":"number"},"content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Search project code first","type":"text","marks":[{"type":"strong"}]},{"text":" — check ","type":"text"},{"text":"src/","type":"text","marks":[{"type":"code_inline"}]},{"text":" for existing implementations before installing anything. Scope searches to ","type":"text"},{"text":"src/","type":"text","marks":[{"type":"code_inline"}]},{"text":" to avoid matching ","type":"text"},{"text":"node_modules/","type":"text","marks":[{"type":"code_inline"}]},{"text":" or ","type":"text"},{"text":"dist/","type":"text","marks":[{"type":"code_inline"}]},{"text":".","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Search available features","type":"text","marks":[{"type":"strong"}]},{"text":" — use ","type":"text"},{"text":"npx @salesforce/ui-bundle-features list","type":"text","marks":[{"type":"code_inline"}]},{"text":" with ","type":"text"},{"text":"--search \u003cquery>","type":"text","marks":[{"type":"code_inline"}]},{"text":" to filter by keyword. Use ","type":"text"},{"text":"--verbose","type":"text","marks":[{"type":"code_inline"}]},{"text":" for full descriptions.","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Describe a feature — MANDATORY before wiring.","type":"text","marks":[{"type":"strong"}]},{"text":" Run ","type":"text"},{"text":"npx @salesforce/ui-bundle-features describe \u003cfeature>","type":"text","marks":[{"type":"code_inline"}]},{"text":" and read the feature's README via ","type":"text"},{"text":"npm view \u003cpackage> readme","type":"text","marks":[{"type":"code_inline"}]},{"text":" (using the ","type":"text"},{"text":"Package:","type":"text","marks":[{"type":"code_inline"}]},{"text":" 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 ","type":"text"},{"text":"describe","type":"text","marks":[{"type":"code_inline"}]},{"text":"'s ","type":"text"},{"text":"Copy Operations","type":"text","marks":[{"type":"code_inline"}]},{"text":" 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.","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Install","type":"text","marks":[{"type":"strong"}]},{"text":" — use ","type":"text"},{"text":"npx @salesforce/ui-bundle-features install \u003cfeature> --ui-bundle-dir \u003cname>","type":"text","marks":[{"type":"code_inline"}]},{"text":". Key options:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"--dry-run","type":"text","marks":[{"type":"code_inline"}]},{"text":" to preview changes","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"--yes","type":"text","marks":[{"type":"code_inline"}]},{"text":" for non-interactive mode (skips conflicts)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"--on-conflict error","type":"text","marks":[{"type":"code_inline"}]},{"text":" to detect conflicts, then ","type":"text"},{"text":"--conflict-resolution \u003cfile>","type":"text","marks":[{"type":"code_inline"}]},{"text":" to resolve them","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Install features ","type":"text"},{"text":"before","type":"text","marks":[{"type":"strong"}]},{"text":" doing custom frontend/layout work in this bundle — features may rewrite the app layout and routing files (see the framework reference for their names), and installing after hand-built layout changes risks collisions.","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"If no matching feature is found, ask the user before building a custom implementation — a relevant feature may exist under a different name.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Conflict Handling","type":"text"}]},{"type":"paragraph","content":[{"text":"In non-interactive environments, use the two-pass approach:","type":"text"}]},{"type":"ordered_list","attrs":{"order":1,"listStyle":"number"},"content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Run install with ","type":"text"},{"text":"--on-conflict error","type":"text","marks":[{"type":"code_inline"}]},{"text":" to detect conflicts without applying them.","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Before writing the resolution file, read ","type":"text"},{"text":"references/common/conflict-resolution-schema.json","type":"text","marks":[{"type":"code_inline"}]},{"text":" for the allowed keys and enum values.","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Write a resolution file at ","type":"text"},{"text":"\u003cui-bundle-dir>/conflict-resolution.json","type":"text","marks":[{"type":"code_inline"}]},{"text":" (path is relative to the UI bundle directory being installed into, not the repo root). Key it by the exact paths the CLI printed as conflicts in pass 1, verbatim:","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"json"},"content":[{"text":"{\n \"src/appLayout.tsx\": \"overwrite\",\n \"src/routes.tsx\": \"skip\"\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"(The conflict paths are whatever the CLI printed for the detected framework — the keys above are illustrative.) Any conflicting path ","type":"text"},{"text":"not","type":"text","marks":[{"type":"em"}]},{"text":" listed defaults to ","type":"text"},{"text":"skip","type":"text","marks":[{"type":"code_inline"}]},{"text":" — the CLI will not overwrite a file you didn't explicitly mark ","type":"text"},{"text":"overwrite","type":"text","marks":[{"type":"code_inline"}]},{"text":".","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Re-run install with ","type":"text"},{"text":"--conflict-resolution \u003cpath-to-that-file>","type":"text","marks":[{"type":"code_inline"}]},{"text":".","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Post-install: Integrating Example Files","type":"text"}]},{"type":"paragraph","content":[{"text":"Features may include example files under an ","type":"text"},{"text":"__examples__/","type":"text","marks":[{"type":"code_inline"}]},{"text":" directory (plural) showing integration patterns. These are often full, working pages with concrete names, not bare placeholder templates — in the detected framework's file types (see the framework reference). For each:","type":"text"}]},{"type":"ordered_list","attrs":{"order":1,"listStyle":"number"},"content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Read the example file to understand the pattern — treat it as a working reference implementation, not necessarily a stub.","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Read the target file (shown in ","type":"text"},{"text":"describe","type":"text","marks":[{"type":"code_inline"}]},{"text":" output).","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Apply the pattern from the example into the target.","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"CRITICAL — verify before deleting:","type":"text","marks":[{"type":"strong"}]}]},{"type":"code_block","attrs":{"wrap":false,"language":"bash"},"content":[{"text":"# Verify the build passes with the integrated pattern (build command per framework reference)\nnpm run build || {\n echo \"ERROR: Build failed after integration - do NOT delete __examples__/\"\n exit 1\n}\n\n# Verify the pattern from the example is actually present in the target.\n# Adjust the grep to a key symbol/import/component from the example, over the\n# detected framework's source files (see the framework reference for a worked pattern).","type":"text"}]},{"type":"paragraph","content":[{"text":"Only delete ","type":"text"},{"text":"__examples__/","type":"text","marks":[{"type":"code_inline"}]},{"text":" after ","type":"text"},{"text":"both","type":"text","marks":[{"type":"strong"}]},{"text":" the build passes and the pattern is confirmed present in the target.","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"If either check fails, ","type":"text"},{"text":"do NOT delete ","type":"text","marks":[{"type":"strong"}]},{"text":"__examples__/","type":"text","marks":[{"type":"code_inline"},{"type":"strong"}]},{"text":" — the integration is incomplete. Fix the integration first, then re-run the verification.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Post-install: Mount the OOTB component, don't hand-roll a parallel one","type":"text"}]},{"type":"paragraph","content":[{"text":"When a feature ships an integration point, the UI ","type":"text"},{"text":"must","type":"text","marks":[{"type":"strong"}]},{"text":" use it rather than a parallel hand-rolled version. For features that ship an entry component, mount it (the framework reference shows the mount idiom); do ","type":"text"},{"text":"not","type":"text","marks":[{"type":"strong"}]},{"text":" author a bespoke page that queries data directly. A custom results page against seed data or a raw GraphQL call bypasses the installed, tested feature, so the deployed sObject/CMS logic never runs. The only exception is when the user ","type":"text"},{"text":"explicitly","type":"text","marks":[{"type":"strong"}]},{"text":" opts out and asks for a custom one — confirm that intent, don't infer it.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Hint Placeholders","type":"text"}]},{"type":"paragraph","content":[{"text":"Some copy paths use ","type":"text"},{"text":"\u003cdescriptive-name>","type":"text","marks":[{"type":"code_inline"}]},{"text":" placeholders (e.g., ","type":"text"},{"text":"\u003cdesired-page-with-search-input>","type":"text","marks":[{"type":"code_inline"}]},{"text":") that the CLI does not resolve. After installation, rename or relocate these files to the intended target, or integrate their patterns into an existing file. This is separate from the ","type":"text"},{"text":"__examples__/","type":"text","marks":[{"type":"code_inline"}]},{"text":" convention above — a single copy path can use either mechanism.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Auth Feature: Org-Side Prerequisites","type":"text"}]},{"type":"paragraph","content":[{"text":"Installing the authentication feature only copies files — it does not configure the org. This is framework-agnostic (pure org/metadata config). Before telling the user auth is done, flag that these org-side steps still need to happen (outside this skill's scope, but required for the feature to actually work):","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Digital Experiences (Experience Cloud) must be enabled, with Customer Community / Customer Community Plus licenses assigned to the relevant users, and Salesforce Sites enabled.","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"The community and guest profiles need explicit Apex class access granted for the auth utility, login/registration, and password-reset classes — the CLI does not grant this automatically.","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Guest-profile sharing rules / org-wide defaults for any objects the auth flow touches.","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Known limitation:","type":"text","marks":[{"type":"strong"}]},{"text":" logout has a documented CSRF-handling gap (tracked as W-21253864) — call this out to the user rather than presenting logout as fully solved.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"CRITICAL: Resolve ","type":"text"},{"text":"\u003csfdxRoot>","type":"text","marks":[{"type":"code_inline"}]},{"text":" After Every Install","type":"text"}]},{"type":"paragraph","content":[{"text":"The CLI may copy files under a literal ","type":"text"},{"text":"\u003csfdxRoot>","type":"text","marks":[{"type":"code_inline"}]},{"text":" folder — an unresolved placeholder for this project's Salesforce DX metadata root (from ","type":"text"},{"text":"sfdx-project.json","type":"text","marks":[{"type":"code_inline"}]},{"text":"'s ","type":"text"},{"text":"packageDirectories[].path","type":"text","marks":[{"type":"code_inline"}]},{"text":", e.g. ","type":"text"},{"text":"force-app/main/default","type":"text","marks":[{"type":"code_inline"}]},{"text":"). Files left there are undeployable. This is framework-agnostic.","type":"text"}]},{"type":"paragraph","content":[{"text":"After every install:","type":"text","marks":[{"type":"strong"}]}]},{"type":"code_block","attrs":{"wrap":false,"language":"bash"},"content":[{"text":"find uiBundles/\u003cAppName> -type d -regex '.*/\u003c[^/]+>

Important: agents should read /llm.txt, /llms.txt, or /.well-known/skills.json to discover the public Skillopedia API.

","type":"text"}]},{"type":"paragraph","content":[{"text":"If found, move each file to ","type":"text"},{"text":"\u003cmetadata-root>/\u003csame-relative-subpath>","type":"text","marks":[{"type":"code_inline"}]},{"text":" (keep ","type":"text"},{"text":"-meta.xml","type":"text","marks":[{"type":"code_inline"}]},{"text":" sidecars attached) and delete the emptied placeholder dir(s).","type":"text"}]},{"type":"paragraph","content":[{"text":"Verification:","type":"text","marks":[{"type":"strong"}]}]},{"type":"checkbox_list","attrs":{"id":null},"content":[{"type":"checkbox_item","attrs":{"checked":false},"content":[{"type":"paragraph","content":[{"text":"Re-run ","type":"text"},{"text":"find uiBundles/\u003cAppName> -type d -regex '.*/\u003c[^/]+>

Important: agents should read /llm.txt, /llms.txt, or /.well-known/skills.json to discover the public Skillopedia API.

","type":"text","marks":[{"type":"code_inline"}]},{"text":" — output must be empty before proceeding.","type":"text"}]}]}]}]},"metadata":{"date":"2026-11-02","name":"experience-ui-bundle-features-generate","author":"@skillopedia","source":{"stars":1139,"repo_name":"sf-skills","origin_url":"https://github.com/forcedotcom/sf-skills/blob/HEAD/skills/experience-ui-bundle-features-generate/SKILL.md","repo_owner":"forcedotcom","body_sha256":"3ae9dad938abde74f417dcbb6a276c36d9ade9f8996c0d5450e7fef03c6e66a1","cluster_key":"22eb8db5b82961bf96cd8308bb06355353eaedb4a287338128bee93bd453e98b","clean_bundle":{"format":"clean-skill-bundle-v1","source":"forcedotcom/sf-skills/skills/experience-ui-bundle-features-generate/SKILL.md","text_bytes":8159,"source_commit":"a8a18ce1e4ba12e69b4073eab98ce31bfbd8271e","skills_sh_rank":4307,"attachment_count":4,"text_attachments":4,"attachment_storage":"skill_attachments","binary_attachments":0},"cluster_size":1,"skill_md_path":"skills/experience-ui-bundle-features-generate/SKILL.md","import_metadata":{"date":"2026-11-02","author":"@skillopedia","version":"v1","category":"web-development","category_label":"Web"},"exact_dupes_collapsed_into_this":0},"version":"v1","category":"web-development","metadata":{"domains":["Experience"],"version":"1.2","cliTools":[{"tool":["npx"],"semver":">=7.0.0"},{"tool":["npm"],"semver":">=7.0.0"}],"accessCheck":"OrgPermissions.Networks","relatedSkills":["experience-ui-bundle-agentforce-client-generate","experience-ui-bundle-file-upload-generate"]},"import_tag":"skills-sh-top20k-2026-11","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."}},"renderedAt":1793676397198}

Important: agents should read /llm.txt, /llms.txt, or /.well-known/skills.json to discover the public Skillopedia API.