building-ui-bundle-app

Orchestrates phased construction of complete Salesforce React UI bundle applications from natural language descriptions.

1|Updated May 7, 2026
One-click install
npx skills add https://github.com/amanpraaj/sf-skill-hub --skill building-ui-bundle-app-amanpraaj
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-ui-bundle-app
Source: https://github.com/amanpraaj/sf-skill-hub/tree/main/skills/salesforce/building-ui-bundle-app
Command: npx skills add https://github.com/amanpraaj/sf-skill-hub --skill building-ui-bundle-app-amanpraaj

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building a full Salesforce React UI bundle app requires coordinating scaffolding, feature installation, data access, frontend UI, integrations, and deployment in a strict dependency order; doing phases out of sequence breaks the app, and this Skill orchestrates that entire workflow end-to-end. ## Core Features & Use Cases - Phased Build Orchestration: Coordinates seven phases (scaffolding, features, data access, UI, integrations, deployment, Experience Site) by loading the correct specialized skill before each phase. - Requirements-to-Plan Conversion: Parses a natural language app description into a structured build plan covering pages, Salesforce objects, GraphQL queries, features, and deployment targets. - Validation Gates: Enforces lint and build checks between phases, requiring zero errors and full boilerplate replacement before completion. - Use Case: A user asks to "build a coffee shop ordering app on Salesforce" and receives a complete deployed React UI bundle with navigation, GraphQL data access to Salesforce objects, and an optional Experience Site. ## Quick Start Ask the agent to build a React app on Salesforce describing your pages, data objects, and any features like authentication or file upload, and it will scaffold, wire data, build the UI, and deploy the complete UI bundle.

Frequently Asked Questions about building-ui-bundle-app

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a React app on Salesforce from scratch?▼

Describe the app's purpose, pages, and Salesforce data objects in natural language. The workflow scaffolds a UI bundle, installs features, wires GraphQL data access via @salesforce/sdk-data, builds the React UI, and deploys to your org in a fixed phase order.

What is a Salesforce UI bundle and when should I use one?▼

A UI bundle is a React single-page application deployed as Salesforce metadata, suited for custom web apps, SPAs, and Experience Sites. Use it for non-LWC frontends; for Lightning Experience apps with custom objects, use a Lightning app generation approach instead.

How does the UI bundle connect to Salesforce data?▼

Data access uses @salesforce/sdk-data with GraphQL as the preferred approach for record operations. The schema is fetched from the org, entities are looked up, and queries and mutations are generated with verified field names before being wired into components.

Can I add Agentforce chat or file upload to my React UI bundle?▼

Yes, both are optional integration phases executed after the UI is built. The Agentforce conversation client and file upload API integrations are independent and can run in parallel when both are requested.

When should I not use the UI bundle app orchestrator?▼

Skip it for single-page or single-component edits to an existing bundle, standalone feature installs, data-only setup, or deployment-only tasks. It is also not for Lightning Experience apps with custom objects, which use a different generation skill.

Why must UI bundle build phases run in a specific order?▼

Each phase depends on the previous one's output: features need the scaffold, the UI needs the data layer, and deployment requires a passing build. Running phases out of order produces broken integrations and failed builds.