Building Ui Bundle App
Orchestrate a full Salesforce React UI bundle app from a prompt when no single sub-skill covers scaffolding, features, data, UI, integrations, and deploy.
Overview
building-ui-bundle-app is an agent skill most often used in Build (also Ship) that orchestrates Salesforce React UI bundle work across metadata, features, data, frontend, integrations, and deploy so phases run in the rig
Install
npx skills add https://github.com/forcedotcom/afv-library --skill building-ui-bundle-appWhat is this skill?
- Orchestrates generating-ui-bundle-metadata, features, Salesforce data, frontend, Agentforce client, file upload, site, a
- Activates for greenfield React/SPA requests and when uiBundles/*/src or sfdx-project.json indicates a UI bundle workspac
- Prevents out-of-order phases that break apps when multiple ui-bundle skills would otherwise run ad hoc
- Explicitly not for Lightning Experience apps with custom objects or single-concern edits to an existing page
- Coordinates eight related ui-bundle skills named in skill metadata (version 1.0)
- Skill metadata version 1.0
- Coordinates eight named related ui-bundle skills in dependency order
- Explicit orchestrator: without it, phases may execute out of order and break the app
Adoption & trust: 1.3k installs on skills.sh; 513 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You want a new Salesforce-hosted React app but multiple ui-bundle skills each solve one slice, and running them out of order leaves a broken or undeployable bundle.
Who is it for?
Greenfield React or SPA requests on Salesforce UI bundles, multi-skill ui-bundle projects, and prompts that mix visual design with full app construction from sfdx-project.json or uiBundles/*/src layouts.
Skip if: Lightning Experience applications built around custom objects (use generating-lightning-app), or single-focus edits to an existing page (use building-ui-bundle-frontend only).
When should I use this skill?
MUST activate when the user wants to build, create, or generate a React application, SPA, or frontend app—even with no project files yet—or when uiBundles/*/src or sfdx-project.json exists and the task is a new app, site
What do I get? / Deliverables
You get a coordinated build pipeline through scaffolding, features, Salesforce data, frontend, optional Agentforce and upload flows, site packaging, and deployment via deploying-ui-bundle instead of ad-hoc partial runs.
- End-to-end UI bundle application source coordinated across metadata, features, data, and frontend
- Integration hooks for Agentforce conversation client and file upload when required
- Handoff-ready state for deploying-ui-bundle
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
End-to-end app construction is the core Build-phase job; this skill is the canonical entry when the deliverable is a new SPA rather than a one-off page tweak. The output is a React single-page or multi-route frontend packaged as a Salesforce UI bundle, so frontend is the primary shelf even though it also touches data and deploy.
Where it fits
Turn a natural-language product brief into scaffolded React routes and components inside a UI bundle before any page-specific styling pass.
Wire Salesforce data access and optional Agentforce conversation client only after metadata and feature scaffolding are in place.
Finish the orchestration by invoking deployment so the bundle is push-ready instead of stopping at local src only.
Stand up a deployable UI bundle prototype to validate UX on real Salesforce auth and data before committing to a larger feature set.
How it compares
Use this workflow orchestrator instead of invoking individual ui-bundle skills piecemeal when the task is a full app, not a one-page patch.
Common Questions / FAQ
Who is building-ui-bundle-app for?
Solo and indie builders shipping Salesforce React UI bundles with Claude Code, Cursor, Codex, or similar agents who need one orchestrated path from description to deployable app.
When should I use building-ui-bundle-app?
Use it when you are creating a React app or SPA from scratch, when uiBundles source or sfdx-project.json is present and you need a new site or app end-to-end, when the prompt spans more than one ui-bundle concern, or when you are ready to chain build work into deployment—not for
Is building-ui-bundle-app safe to install?
Treat it like any third-party agent skill: review the Security Audits panel on this Prism page and your org’s deployment policies before granting shell, network, and Salesforce CLI access in production.
Workflow Chain
Then invoke: deploying ui bundle
SKILL.md
READMESKILL.md - Building Ui Bundle App
# Building a UI Bundle App ## Overview Build a complete, deployable Salesforce React UI bundle application from a natural language description by orchestrating specialized UI bundle skills in correct dependency order. Each skill **MUST** be explicitly loaded before executing its phase. ## When to Use This Skill **Use when:** - User requests a "React app", "UI bundle", "web app", or "full-stack app" on Salesforce - User says "build an app", "create an application" and the context implies a non-LWC based frontend (e.g. React) - The work produces a complete UI bundle with scaffolding, features, data access, and UI -- not a single component in isolation **Examples that should trigger this skill:** - "Build a React app for managing customer cases with Salesforce data" - "Create a UI bundle for an employee directory with search and navigation" - "I need a full-stack React app with authentication, data tables, and file uploads" - "Build a coffee shop ordering app on Salesforce" **Do NOT use when:** - Creating a single page or component (use `building-ui-bundle-frontend`) - Only installing a feature (use `generating-ui-bundle-features`) - Only setting up data access (use `using-ui-bundle-salesforce-data`) - Only deploying an existing app (use `deploying-ui-bundle`) - Building a Lightning Experience app with custom objects and metadata (use `generating-lightning-app`) - Troubleshooting or debugging an existing UI bundle --- ## Dependency Graph & Build Order ### Phase 1: Scaffolding (Foundation) ``` UI Bundle scaffold (sf template generate ui-bundle) v Install dependencies (npm install) v Bundle metadata (uibundle-meta.xml, ui-bundle.json) v CSP Trusted Sites (if external domains needed) ``` Creates the UI bundle directory structure, meta XML, and optional routing/headers config. All subsequent phases require the scaffold to exist. ### Phase 2: Features (Optional) ``` Search project code (src/) for existing implementations v Install dependencies (npm install) v Search, describe, and install features (auth, shadcn, search, navigation, GraphQL) v Resolve conflicts (two-pass: --on-conflict error, then --conflict-resolution) v Integrate __example__ files into target files, then delete them ``` Installs pre-built, tested feature packages. Skip if the app requires no pre-built features. Always check for an existing feature before building from scratch. Features provide the foundation that UI components build on top of. ### Phase 3: Data Access (Backend Wiring) ``` Acquire schema (npm run graphql:schema) v Look up entity schema (graphql-search.sh, max 2 runs) v Generate queries/mutat