Agent skill · forcedotcom
experience-ui-bundle-frontend-generate
MUST activate before editing ANY file under uiBundles/*/src/ (or the bundle's index.html) for visual or UI changes to an EXISTING app — pages, components, sections, layout, styling, colors, fonts, navigation, animations, branding, or any look-and-feel change. Use this skill when modifying pages, components, layout, styling, navigation, or branding in an existing UI bundle app. Activate when the project contains appLayout.tsx, routes.tsx, src/pages/, src/components/, src/styles/global.css, or the bundle's index.html. This skill contains critical project-specific conventions (appLayout.tsx shell, shadcn/ui components, Tailwind CSS, Salesforce base-path routing, module restrictions) that override general knowledge. Without this skill, generated code will use wrong imports, break routing, or ignore project structure. Do NOT use when creating a new app from scratch or the bundle has not been scaffolded yet (use experience-ui-bundle-app-coordinate instead).
What it needs
About 8k tokens when loaded.
What this skill does
UI Bundle UI Resolve the Bundle Directory MUST run scripts/resolve-ui-bundle.sh [project-root] before applying any rule below or writing any file — an ad-hoc find/ls is not a substitute; it does not enforce the exit-code gate below. It reads sfdx-project.json's packageDirectories[0].path (does not assume force-app — the source path is configurable) and looks under <sourceDir>/main/default/uiBundles/: Exit 0, bundle path printed to stdout: exactly one bundle directory found — that is the bundle directory. Use that exact directory name; never substitute a different name (e.g. a generic "AcmePortal" example from a prompt template) for the one actually printed. Exit 2, candidates printed to stderr: multiple uiBundles/ subdirectories exist — do not guess, and do not write to any of them, or to a bundle name not in the printed list. Ask the user which app/bundle they mean before editing or running any command. Exit 1: sfdx-project.json missing/invalid, or no bundle directory found at all. Run all npm/lint/build/dev commands from inside the resolved bundle directory, never from the project root. Preconditions Before applying any rule below, confirm this is an existing, scaffolded UI bundle: MUST run scripts/check-preconditions.sh <bundle-dir> with the directory resolve-ui-bundle.sh printed. Single-bundle (exit 0) case: run it once, on that bundle. Multi-bundle (exit 2) case: do not run it yet — first ask the user which app/bundle they mean, per the Resolve step above. Once the user names the bundle, run check-preconditions.sh on that one bundle only. Never run it against multiple candidates speculatively before the user has chosen — that means touching/inspecting bundles the user didn't ask about. Exit 0: the bundle has src/appLayout.tsx, src/routes.tsx, and src/components/ui/ — proceed. Exit 1, missing pieces listed: this is a fresh SFDX project, a non-UI-bundle React project, or a partially-scaffolded bundle — stop. Do not fall back to generic React knowledge (e.g. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills forcedotcom/experience-ui-bundle-frontend-generate--bc7003