Agent skill

Experience UI Bundle Project Generate

by forcedotcom in forcedotcom/sf-skills

Generates a minimal, ready-to-develop SFDX starter project from template instead of hand-scaffolding files.

Apache-2.0Auto-check passedSales & Support

Install Experience UI Bundle Project Generate

skills CLI
$ npx skills add forcedotcom/sf-skills --skill experience-ui-bundle-project-generate -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install forcedotcom/sf-skills experience-ui-bundle-project-generate --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/forcedotcom/sf-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/experience-ui-bundle-project-generate .claude/skills/experience-ui-bundle-project-generate && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
experience-ui-bundle-project-generate
GitHub stars
1.1k
Token cost
~2k tokens
SKILL.md length
892 words
Files
6 (incl. scripts, references)
Skills in repo
248
Repo updated
First seen
Licence
Apache-2.0

At a glance

Generates a minimal, ready-to-develop SFDX starter project from template instead of hand-scaffolding files.

  • Works in 4 steps: Offer the choice → Generate the project into the target root → Install dependencies (you do this — do… → …
  • Starting a brand-new Salesforce UI bundle app (React
  • SKILL.md covers Step 1: Offer the choice, Step 2: Generate the project…, Step 3: Install dependencies… and Step 4: Confirm and hand off, plus 1 more section
  • Runs JavaScript scripts from its folder; calls sf, node and npm

What it does

Experience UI Bundle Project Generate is an agent skill from forcedotcom/sf-skills. Generates a minimal, ready-to-develop SFDX starter project from template instead of hand-scaffolding files. Use this skill when starting a brand-new Salesforce UI bundle app (React or Angular) and the initial project must be scaffolded — trigger phrases include create, start, or scaffold a new UI bundle app, generate a starter project, or use a prebuilt/starter template. DO NOT TRIGGER when: editing, styling, or adding pages or components to an EXISTING app (use experience-ui-bundle-frontend-generate)…

Its SKILL.md is about 2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 7 other files, including scripts and reference files (for example `references/angular-project-generate.md` and `references/react-project-generate.md`).

It sits in Sales & Support, covering Project scaffolding and CRM management. It works with Salesforce, React and Angular. The repository describes itself as: Salesforce's curated collection of agent skills for building applications. Optimized for Agentforce Vibes, compatible with all AI tools. The licence is Apache-2.0.

When your agent uses it

  • Starting a brand-new Salesforce UI bundle app (React
  • Angular) and the initial project must be scaffolded — trigger phrases include create
  • Scaffold a new UI bundle app
  • Generate a starter project

Example prompts

  • “Use the experience-ui-bundle-project-generate skill to generate a minimal, ready-to-develop SFDX starter project from template instead of…”
  • “/experience-ui-bundle-project-generate”

Requirements

  • Node.js

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Offer the choice
  2. Generate the project into the target root
  3. Install dependencies (you do this — do NOT hand off uninstalled)
  4. Confirm and hand off

What it can do on your machine

Read from SKILL.md and the folder at commit 3c15867. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 3 files in scripts/ (JavaScript), which the agent can run.

    Shell commands in SKILL.md call:

    • sf
    • node
    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Experience UI Bundle Project Generate loads about 2k tokens when it runs, and up to ~3.1k if it reads all its reference files. Until then it costs about 251 tokens; SKILL.md has 892 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~251
When it runs · the whole SKILL.md, loaded when a task matches
~2k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~3.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from forcedotcom/sf-skills at commit 3c15867, republished under its Apache-2.0 licence (© forcedotcom). 892 words, ~2,017 tokens.

Download SKILL.mdSave it as .claude/skills/experience-ui-bundle-project-generate/SKILL.md (or your agent's skills folder). This skill also uses 5 other files; get the full folder from GitHub.
name
experience-ui-bundle-project-generate
description
Generates a minimal, ready-to-develop SFDX starter project from template instead of hand-scaffolding files. Use this skill when starting a brand-new Salesforce UI bundle app (React or Angular) and the initial project must be scaffolded — trigger phrases include create, start, or scaffold a new UI bundle app, generate a starter project, or use a prebuilt/starter template. DO NOT TRIGGER when: editing, styling, or adding pages or components to an EXISTING app (use experience-ui-bundle-frontend-generate); configuring ui-bundle.json or metadata files (use experience-ui-bundle-metadata-generate); deploying to an org (use experience-ui-bundle-deploy); when the user explicitly says they want to hand-scaffold from scratch; or when creating a brand-new standalone Salesforce project that also needs full setup — relocating the session, connecting an org, setting the default, and enabling source tracking (use dx-project-create in the salesforce-development plugin).
metadata.version
1.2
metadata.domains
Experience
metadata.relatedSkills
experience-ui-bundle-app-coordinate, experience-ui-bundle-deploy, experience-ui-bundle-frontend-generate, experience-ui-bundle-metadata-generate…

Using a UI Bundle Template

Before building a Salesforce UI bundle app from scratch, offer the user a prebuilt starter template. The Salesforce CLI generates these — a complete, deployable SFDX project (UI bundle + toolchain + an npm run setup automation) — in one command. Starting from a starter is faster and less error-prone than hand-scaffolding.

The CLI command is sf template generate project.

Step 1: Offer the choice

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

The frameworks this skill supports are exactly the reference files under <SKILL_DIR>/references/, each named <framework>-project-generate.md (so react → <SKILL_DIR>/references/react-project-generate.md). This is the single source of truth — adding a framework means adding a reference file, nothing here changes.

  • If the framework is known — open <SKILL_DIR>/references/<framework>-project-generate.md.
  • If it is unknown (a standalone run where nobody said which) — list <SKILL_DIR>/references/, derive the supported set by stripping the -project-generate.md suffix from each filename, and ask the user to pick one of those. If the user names a framework with no matching reference file, it is not supported here — hand off to experience-ui-bundle-app-coordinate to scaffold from scratch.

Each reference lists that framework's --template flags and what each starter contains. Pick the one that fits the user's audience (internal vs. external).

If the user prefers to start from scratch (or neither template fits), stop here and let experience-ui-bundle-app-coordinate scaffold a new project. This skill is opt-in — do not force a template.

Once the user picks, carry the chosen --template flag into Step 2.

Step 2: Generate the project into the target root

The project contents must land directly at the target root $DEST — so sfdx-project.json sits at $DEST/sfdx-project.json, with no extra wrapper subfolder. sf template generate project always nests its output under a --name subfolder, so <SKILL_DIR>/scripts/generate-project.mjs generates into $DEST, flattens the subfolder's contents up into $DEST (overwriting anything already there on conflict), and removes the now-empty subfolder — all through Node's fs/child_process APIs, so it runs the same way on Windows cmd/PowerShell as it does on macOS/Linux/Git Bash.

  • <SKILL_DIR> = the absolute path to this skill's own directory — the folder containing this SKILL.md; resolve it from the skill path in context
  • $NAME — the project name (alphanumerical only — no spaces, hyphens, underscores, or special characters). Ask the user for it. It also names the UI bundle, so it shows up inside the project.
  • $DEST — the target root directory the contents land in (use . for the current directory).
  • $TEMPLATE — the --template flag value from the framework reference chosen in Step 1 (e.g. reactinternalapp).

Run the script with the actual, literal values substituted for $NAME, $DEST, and $TEMPLATE — do not use shell variable assignment/interpolation (NAME=... / $NAME / %NAME% / $env:NAME) since that syntax differs across bash, cmd, and PowerShell and this command must work in all three:

sh
node "<SKILL_DIR>/scripts/generate-project.mjs" "<name>" "<dest>" "<template>"

The script prints OK: project root landed at <dest> (...) and exits 0 on success. It exits non-zero (with a clear stderr message) if sf template generate project fails, the generated project has no sfdx-project.json, or the flatten didn't leave a valid project root — stop and surface the failure rather than continuing.

sfdx-project.json must sit at $DEST/sfdx-project.json. The project also contains package.json, force-app/main/default/uiBundles/$NAME/ (the UI bundle), scripts/, config/, and README.md. See the framework reference from Step 1 for the specific bundle contents.

Show full SKILL.md (340 more words)Show less

Step 3: Install dependencies (you do this — do NOT hand off uninstalled)

If the generated project ships without node_modules, install dependencies yourself before handing the project back — a fresh template is not runnable (preview/build/lint all fail) until deps are present. The user should receive a ready-to-develop project.

There are multiple package.json files, each needing its own install:

  • the project root ($DEST/package.json), and
  • the UI bundle dir under $DEST/force-app/main/default/uiBundles/$NAME/ — this holds the toolchain the preview server loads, so it must have node_modules too.

<SKILL_DIR>/scripts/install-deps.mjs runs npm install for the root and for every UI bundle that has a package.json (via Node's child_process with an explicit cwd — no cd && shell chaining), then verifies node_modules landed everywhere it installed:

sh
node "<SKILL_DIR>/scripts/install-deps.mjs" "<dest>"

Substitute the literal $DEST value from Step 2 for <dest>. The script prints OK: all dependencies installed. and exits 0 on success; it exits non-zero with a listed summary of which install(s) failed otherwise. First-run install of the bundle is the heavy step; expect a short wait. If an install fails, surface it — don't hand off a half-installed project.

Step 4: Confirm and hand off

install-deps.mjs already prints a verification summary (root + each UI bundle's node_modules) as part of Step 3. To look around the generated project yourself, use your own file-listing/read tools rather than a shell ls — that works identically regardless of the underlying OS shell.

The project is now ready to develop and deploy. If there's a README.md in the template, take a look at it to see if there is any extra step or guidance for the user.

From here, continue development with the other ui-bundle skills (experience-ui-bundle-frontend-generate, experience-ui-bundle-salesforce-data-access, experience-ui-bundle-deploy, etc.) against the now-scaffolded project — scaffolding and dependency install are already done.

Notes

  • The starters are minimal — no seeded sample data or custom objects. Build the rest with the other ui-bundle skills.
  • These templates use the uiBundles metadata convention. The UI bundle directory and meta XML are named after the project name you pass to --name.
  • sf template generate project --help lists all available templates if the flag names ever change.

© forcedotcom, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 5 other files (scripts, references) in skills/experience-ui-bundle-project-generate of forcedotcom/sf-skills.

  • SKILL.md
  • references/angular-project-generate.md
  • references/react-project-generate.md
  • scripts/flatten-project.mjs
  • scripts/generate-project.mjs
  • scripts/install-deps.mjs

Open the folder on GitHubat commit 3c15867

Compare with similar skills

Experience UI Bundle Project Generate next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Experience UI Bundle Project Generate compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Experience UI Bundle Project Generate this skillforcedotcom/sf-skills1.1k—~2kAutomated safety check: PassApache-2.0
Gh Bot Commentjetstreamapp/jetstream125—~616Automated safety check: PassCustom licence
Sf DebugJaganpro/sf-skills424—~1.3kAutomated safety check: PassMIT
Nextcrmpdovhomilja/nextcrm-app711—~3.3kAutomated safety check: PassMIT
External Consumersforcedotcom/salesforcedx-vscode1k—~1.8kAutomated safety check: PassBSD-3-Clause
Salesforce DeveloperJeffallan/claude-skills12k—~1.9kAutomated safety check: PassMIT

Similar skills

  • Gh Bot Comment

    jetstreamapp/jetstream

    Post GitHub PR/issue comments, reviews, and review replies as the Jetstream bot account instead of the user's personal account.

    125 GitHub stars~616 tokensUpdated yesterday
    DevelopmentAuto-check passed
  • Sf Debug

    Jaganpro/sf-skills

    Salesforce debug log analysis and troubleshooting with 100-point scoring.

    424 GitHub stars~1.3k tokensUpdated 5 mo ago
    Sales & SupportAuto-check passed
  • Nextcrm

    pdovhomilja/nextcrm-app

    Connect to NextCRM MCP server to manage CRM data — accounts, contacts, leads, opportunities, targets, products, contracts, activities, documents, target lists, enrichment, email accounts, campaigns…

    711 GitHub stars~3.3k tokensUpdated 2 days ago
    Sales & SupportAuto-check passed
  • External Consumers

    forcedotcom/salesforcedx-vscode

    Known external consumers of APIs from this monorepo's extensions.

    1k GitHub stars~1.8k tokensUpdated today
    DevelopmentAuto-check passed
  • Salesforce Developer

    Jeffallan/claude-skills

    Writes Apex, Lightning Web Components and SOQL for the Salesforce platform, with bulkified triggers, governor-limit checks, 90% test coverage and Salesforce DX deployment.

    12k GitHub stars~1.9k tokensUpdated 4 days ago
    DevelopmentAuto-check passed
  • Sf Apex

    Jaganpro/sf-skills

    Generates and reviews Salesforce Apex code with 150-point scoring.

    424 GitHub stars~2k tokensUpdated 5 mo ago
    Sales & SupportAuto-check passed

More from forcedotcom/sf-skills

All 248 skills in this repo
  • Agentforce Architecture Analyze

    forcedotcom/sf-skills

    Declared architecture snapshot for one Agentforce agent: planner, topics, actions, flows, Apex, prompt templates, and NGA plugins.

    1.1k GitHub stars~3.6k tokensUpdated 5 days ago
    Auto-check passed
  • Agentforce D360 Analyze

    forcedotcom/sf-skills

    Data Cloud 360° view of a single Agentforce session. An agent skill from forcedotcom/sf-skills.

    1.1k GitHub stars~2.9k tokensUpdated 5 days ago
    Auto-check passed
  • Apply a Salesforce sandbox post-copy automation JSON config against a target org.

    1.1k GitHub stars~5.3k tokensUpdated 5 days ago
    Auto-check: notes
  • Apply a Salesforce sandbox post-copy automation JSON config against a target org.

    1.1k GitHub stars~5.4k tokensUpdated 5 days ago
    Auto-check: notes
  • Design Systems Slds Apply

    forcedotcom/sf-skills

    Apply SLDS-compliant UI using the correct blueprints, styling hooks, utility classes, and icons.

    1.1k GitHub stars~3.7k tokensUpdated 5 days ago
    Auto-check passed
  • Experience Lwc Generate

    forcedotcom/sf-skills

    Lightning Web Components with PICKLES methodology and 165-point scoring.

    1.1k GitHub stars~2.4k tokensUpdated 5 days ago
    Auto-check passed

Questions about Experience UI Bundle Project Generate

What does Experience UI Bundle Project Generate do?

Generates a minimal, ready-to-develop SFDX starter project from template instead of hand-scaffolding files. Experience UI Bundle Project Generate is an agent skill from forcedotcom/sf-skills. Generates a minimal, ready-to-develop SFDX starter project from template instead of hand-scaffolding files.

When should I use Experience UI Bundle Project Generate?

Experience UI Bundle Project Generate fits situations like: starting a brand-new Salesforce UI bundle app (React; angular) and the initial project must be scaffolded — trigger phrases include create; scaffold a new UI bundle app; generate a starter project.

How do I install Experience UI Bundle Project Generate in Claude Code?

Run `npx skills add forcedotcom/sf-skills --skill experience-ui-bundle-project-generate -a claude-code`. Or copy the skill folder (skills/experience-ui-bundle-project-generate in forcedotcom/sf-skills) into .claude/skills/experience-ui-bundle-project-generate in your project. Claude Code loads it when a task matches its description.

How do I install Experience UI Bundle Project Generate in Codex?

Run `npx skills add forcedotcom/sf-skills --skill experience-ui-bundle-project-generate -a codex`. Or copy the skill folder (skills/experience-ui-bundle-project-generate in forcedotcom/sf-skills) into .agents/skills/experience-ui-bundle-project-generate in your project. Codex loads it when a task matches its description.

Can I use Experience UI Bundle Project Generate in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add forcedotcom/sf-skills --skill experience-ui-bundle-project-generate -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/experience-ui-bundle-project-generate, .gemini/skills/experience-ui-bundle-project-generate, .github/skills/experience-ui-bundle-project-generate and .opencode/skills/experience-ui-bundle-project-generate in your project.

What does Experience UI Bundle Project Generate need to run?

Going by SKILL.md and its folder, Experience UI Bundle Project Generate needs JavaScript for the scripts in its folder and the command-line tools its instructions call (sf, node and npm). Our summary lists: Node.js.

Does Experience UI Bundle Project Generate access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Experience UI Bundle Project Generate safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Experience UI Bundle Project Generate use?

Experience UI Bundle Project Generate is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Experience UI Bundle Project Generate use?

About 2k tokens (SKILL.md is roughly 8.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.1k tokens, read only when the agent opens those files.

What are the alternatives to Experience UI Bundle Project Generate?

Skills that share tags, products or a category with Experience UI Bundle Project Generate: Gh Bot Comment (jetstreamapp/jetstream, 125 stars), Sf Debug (Jaganpro/sf-skills, 424 stars), Nextcrm (pdovhomilja/nextcrm-app, 711 stars) and External Consumers (forcedotcom/salesforcedx-vscode, 1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Experience UI Bundle Project Generate?

forcedotcom (a GitHub organization) maintains it in forcedotcom/sf-skills, which has 1,058 GitHub stars. The repository holds 248 skills in this directory. The repository was last updated on October 3, 2026.

Source: forcedotcom/sf-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.