Experience Ui Bundle Frontend Generate

This is what you activate before touching any UI code in an existing Experience Cloud bundle app. It enforces the project conventions that Claude otherwise gets wrong: using appLayout.tsx as the shell, importing shadcn components correctly, deriving basename from the base tag for routing, and never importing Lightning Web Component modules in React. The skill also pushes you to commit to a bold aesthetic direction before generating any interface code, which is a nice antidote to the generic purple gradient problem. If you're starting a new app from scratch, there's a different skill for that. Run this when you see appLayout.tsx, routes.tsx, or a src/pages directory in the project.

skills.sh installs: 5.3K
GitHub stars: 1.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add forcedotcom/sf-skills --skill experience-ui-bundle-frontend-generate --agent claude-code

Installs into .claude/skills of the current project.

Files

UI Bundle UI

Resolve the Bundle Directory

MUST run node scripts/resolve-ui-bundle.mjs [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. Always invoke via node (never as a bare executable) so this works on Windows as well as macOS/Linux. 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.

SKILL.md on GitHub