Building Ui Bundle App

Name: Building Ui Bundle App
Author: forcedotcom

forcedotcom/sf-skills

2.2k installs
763 repo stars
Updated July 24, 2026
forcedotcom/sf-skills

building-ui-bundle-app orchestrates full Salesforce React UI bundle builds across scaffold, features, data, UI, deploy, and hosting phases.

About

The building-ui-bundle-app skill coordinates a complete Salesforce React UI bundle from natural language through seven dependency-ordered phases. Phase 1 scaffolds with sf template generate ui-bundle, npm install, metadata, and CSP trusted sites. Phase 2 optionally installs pre-built features like auth, shadcn, search, and navigation with conflict resolution. Phase 3 grounds Salesforce entities against the live org before authoring GraphQL via experience-ui-bundle-salesforce-data-access, never guessing field names. Phase 4 builds layout, pages, and components replacing all boilerplate. Phase 5 adds optional Agentforce chat or file upload integrations. Phase 6 follows the canonical seven-step deploy sequence including permissions, schema fetch, and final build. Phase 7 chooses Experience Site for external users or CustomApplication for App Launcher internal hosting. Each phase requires explicitly loading the specialized skill, executing its workflow, running lint and build verification, and checkpointing before proceeding. The build plan mandates org grounding before query authoring to prevent guessed fields.

Seven phases: scaffold, features, data, UI, integrations, deploy, hosting.
Each phase loads a specialized skill before execution and verifies build.
Data phase grounds entities against live org before GraphQL authoring.
Hosting: Experience Site external or CustomApplication App Launcher.
Build plan forbids guessed Salesforce fields before verification.

Building Ui Bundle App by the numbers

2,231 all-time installs (skills.sh)
+7 installs in the week ending Jul 28, 2026 (Skillselion tracking)
Ranked #207 of 2,277 Frontend Development skills by installs in the Skillselion catalog
Security screen: LOW risk (skills.sh audit)
Data as of Jul 28, 2026 (Skillselion catalog sync)

At a glance

building-ui-bundle-app capabilities & compatibility

Capabilities: seven phase dependency graph with per phase skil · build plan with explicit org grounding before qu · feature install conflict resolution and example · canonical deploy sequence with schema fetch and · experience site or customapplication hosting tar
Works with: salesforce
Use cases: frontend · api development · project management

npx skills add https://github.com/forcedotcom/sf-skills --skill building-ui-bundle-app

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/forcedotcom/sf-skills/building-ui-bundle-app.svg)](https://skillselion.com/skills/forcedotcom/sf-skills/building-ui-bundle-app)

Installs	2.2k
repo stars	★ 763
Security audit	2 / 3 scanners passed
Last updated	July 24, 2026
Repository	forcedotcom/sf-skills ↗

How do I build a complete Salesforce React UI bundle app end-to-end with correct phase order?

Orchestrate end-to-end Salesforce React UI bundle apps from scaffolding through features, data, UI, deploy, and hosting.

Who is it for?

New Salesforce React apps needing coordinated scaffolding, data wiring, UI, and deployment.

Skip if: Skip for single-page edits, deploy-only tasks, or Lightning Experience custom object apps.

When should I use this skill?

User asks to build, create, or generate a React UI bundle or full-stack Salesforce web app.

What you get

A deployed UI bundle with scaffold, features, grounded data layer, UI, and Experience or CustomApplication hosting.

Deployable React UI bundle app
scaffolded uiBundles src tree

Files

SKILL.mdMarkdownGitHub ↗

data360-query: Data Cloud Retrieve Phase

Use this skill when the user needs query, search, and metadata introspection for Data Cloud: sync SQL, paginated SQL, async query workflows, table describe, vector search, hybrid search, or search index operations.

When This Skill Owns the Task

Use data360-query when the work involves:

sf data360 query *
sf data360 search-index *
sf data360 metadata *
sf data360 profile * or sf data360 insight * inspection
understanding Data Cloud SQL results or query shape

Delegate elsewhere when the user is:

writing standard CRM SOQL only → platform-soql-query
designing segment or calculated insight assets → data360-segment
analyzing STDM/session tracing/parquet telemetry → agentforce-observe

---

Required Context to Gather First

Ask for or infer:

target org alias
whether the user needs quick count, medium result set, large export, schema inspection, or semantic search
table/index name if known
whether the task is read-only SQL or search-index lifecycle management

---

Core Operating Rules

Treat Data Cloud SQL as its own query language, not SOQL.
Run the shared readiness classifier before relying on query/search surfaces: node ../data360-orchestrate/scripts/diagnose-org.mjs -o <org> --phase retrieve --json.
Use describe before guessing columns.
Prefer sqlv2 or async query flows for larger result sets.
Use vector search or hybrid search only when the search index lifecycle is healthy.
Keep STDM/parquet/session-tracing workflows out of this skill family.

---

Recommended Workflow

1. Classify readiness for retrieve work

node ../data360-orchestrate/scripts/diagnose-org.mjs -o <org> --phase retrieve --json
# optional query-plane probe, only with a real table name
node ../data360-orchestrate/scripts/diagnose-org.mjs -o <org> --phase retrieve --describe-table MyDMO__dlm --json

2. Choose the smallest correct query shape

sf data360 query sql -o <org> --sql 'SELECT COUNT(*) FROM "ssot__Individual__dlm"' 2>/dev/null
sf data360 query sqlv2 -o <org> --sql 'SELECT * FROM "ssot__Individual__dlm"' 2>/dev/null
sf data360 query async-create -o <org> --sql 'SELECT * FROM "ssot__Individual__dlm"' 2>/dev/null

3. Use describe before guessing fields

sf data360 query describe -o <org> --table ssot__Individual__dlm 2>/dev/null

4. Use vector or hybrid search only when an index exists

sf data360 search-index list -o <org> 2>/dev/null
sf data360 query vector -o <org> --index Knowledge_Index --query "reset password" --limit 5 2>/dev/null
sf data360 query hybrid -o <org> --index Knowledge_Index --query "reset password" --limit 5 2>/dev/null
sf data360 query hybrid -o <org> --index Insurance_Index --query "weather damage coverage" --prefilter "Type_of_Insurance__c='Home'" --limit 10 2>/dev/null

5. Reuse curated search-index examples when creating indexes

Use the phase-owned examples instead of inventing JSON from scratch:

examples/search-indexes/vector-knowledge.json
examples/search-indexes/hybrid-structured.json

---

High-Signal Gotchas

Data Cloud SQL is not SOQL.
Table names should be double-quoted in SQL.
sqlv2 is better than ad hoc OFFSET paging for medium result sets.
async query is preferable for large results.
search-index operations and vector/hybrid queries depend on the index lifecycle being healthy.
Hybrid search can use --prefilter, but only on fields configured as prefilter-capable when the search index was created.
HNSW index parameters are typically read-only on create; leave userValues: [] unless the platform explicitly documents otherwise.
query describe is not a universal tenant probe; only run it with a known DMO or DLO table after broader readiness has been confirmed.

---

Output Format

Retrieve task: <sql / sqlv2 / async / describe / vector / search-index>
Target org: <alias>
Target object: <table or index>
Commands: <key commands run>
Verification: <query rows / schema / status>
Next step: <segment / harmonize / follow-up>

---

References

README.md
examples/search-indexes/vector-knowledge.json
examples/search-indexes/hybrid-structured.json
../data360-orchestrate/assets/definitions/search-index.template.json
../data360-orchestrate/references/plugin-setup.md
../data360-orchestrate/references/feature-readiness.md

{
  "label": "<INDEX_NAME>",
  "developerName": "<INDEX_NAME>",
  "description": "Hybrid search index on a structured Data Cloud DMO",
  "sourceDmoDeveloperName": "<SOURCE_DMO>__dlm",
  "chunkDmoName": "<INDEX_NAME> chunk",
  "chunkDmoDeveloperName": "<INDEX_NAME>_chunk",
  "vectorDmoName": "<INDEX_NAME> index",
  "vectorDmoDeveloperName": "<INDEX_NAME>_index",
  "searchType": "HYBRID",
  "vectorEmbedding": {
    "vectorEmbeddingRelatedFields": []
  },
  "rankingConfigurations": [],
  "chunkingConfiguration": {
    "fieldLevelConfigurations": [
      {
        "sourceDmoDeveloperName": "<SOURCE_DMO>__dlm",
        "sourceDmoFieldDeveloperName": "<TEXT_FIELD>__c",
        "config": {
          "id": "passage_extraction",
          "userValues": [
            { "id": "max_tokens", "value": "512" },
            { "id": "strip_html", "value": "true" }
          ]
        }
      }
    ]
  },
  "vectorEmbeddingConfiguration": {
    "embeddingModel": {
      "id": "e5_large_v2",
      "userValues": [
        { "id": "dimension", "value": "1024" },
        { "id": "max_token_limit", "value": "512" }
      ]
    },
    "index": {
      "id": "HNSW",
      "userValues": []
    },
    "similarityMetric": "COSINE"
  }
}

{
  "label": "My_kav",
  "developerName": "My_kav",
  "sourceDmoDeveloperName": "ssot__KnowledgeArticleVersion__dlm",
  "chunkDmoName": "My_kav chunk",
  "chunkDmoDeveloperName": "My_kav_chunk",
  "vectorDmoName": "My_kav index",
  "vectorDmoDeveloperName": "My_kav_index",
  "searchType": "VECTOR",
  "vectorEmbedding": {
    "vectorEmbeddingRelatedFields": []
  },
  "chunkingConfiguration": {
    "fieldLevelConfigurations": [
      {
        "sourceDmoDeveloperName": "ssot__KnowledgeArticleVersion__dlm",
        "sourceDmoFieldDeveloperName": "ssot__Name__c",
        "config": {
          "id": "passage_extraction",
          "userValues": [
            { "id": "strip_html", "value": "true" },
            { "id": "max_tokens", "value": "512" }
          ]
        }
      }
    ]
  },
  "vectorEmbeddingConfiguration": {
    "embeddingModel": {
      "id": "e5_large_v2",
      "userValues": [
        { "id": "dimension", "value": "1024" },
        { "id": "max_token_limit", "value": "512" }
      ]
    },
    "index": {
      "id": "HNSW",
      "userValues": []
    },
    "similarityMetric": "COSINE"
  },
  "rankingConfigurations": []
}

data360-query

Query and search workflows for Salesforce Data Cloud.

Use this skill for

quick SQL counts
paginated SQL (sqlv2)
async query lifecycles
table describe
vector search
hybrid search with optional prefilter
search index inspection and lifecycle work

Example requests

"Run a Data Cloud SQL query against unified profiles"
"Describe this Data Cloud table before I write SQL"
"Help me troubleshoot vector search in Data Cloud"
"Run a hybrid search with a prefilter in Data Cloud"
"Create and inspect a search index"

Common commands

sf data360 query sql -o myorg --sql 'SELECT COUNT(*) FROM "ssot__Individual__dlm"' 2>/dev/null
sf data360 query describe -o myorg --table ssot__Individual__dlm 2>/dev/null
sf data360 search-index list -o myorg 2>/dev/null
sf data360 query vector -o myorg --index Knowledge_Index --query "reset password" --limit 5 2>/dev/null
sf data360 query hybrid -o myorg --index Knowledge_Index --query "reset password" --limit 5 2>/dev/null

Example payloads

examples/search-indexes/vector-knowledge.json
examples/search-indexes/hybrid-structured.json

References

SKILL.md
../data360-orchestrate/assets/definitions/search-index.template.json
CREDITS.md

Related skills

Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.576k29.4k

Vercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.261k29.4k

ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.249k120k

Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72

Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita201k66.9k

Vercel React Native SkillsEnsure AI agents generate and refactor React Native code that follows performance best practices without common rendering and list pitfalls.173k29.4k

Forks & variants (1)

Building Ui Bundle App has 1 known copy in the catalog totaling 1.5k installs. They canonicalize to this original listing.

forcedotcom - 1.5k installs

How it compares

Pick building-ui-bundle-app over individual ui-bundle skills when the goal is a full deployable Salesforce React SPA rather than a single feature or data-access patch.

FAQ

Can UI be built before features install?

No. Phase order is strict: scaffold, features, data access, then UI before deploy.

When is org grounding required?

Before any GraphQL query authoring in Phase 3; never guess object or field names.

How do I choose hosting in Phase 7?

Experience Site for external URLs; CustomApplication with meta XML target for internal App Launcher.

Is Building Ui Bundle App safe to install?

skills.sh reports 2 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.

Frontend Developmentfrontendintegrations

About

Building Ui Bundle App by the numbers

building-ui-bundle-app capabilities & compatibility

Add your badge

How do I build a complete Salesforce React UI bundle app end-to-end with correct phase order?

Who is it for?

When should I use this skill?

What you get

Files

data360-query: Data Cloud Retrieve Phase

When This Skill Owns the Task

Required Context to Gather First

Core Operating Rules

Recommended Workflow

1. Classify readiness for retrieve work

2. Choose the smallest correct query shape

3. Use describe before guessing fields

4. Use vector or hybrid search only when an index exists

5. Reuse curated search-index examples when creating indexes

High-Signal Gotchas

Output Format

References

Credits & Acknowledgments

data360-query

Use this skill for

Example requests

Common commands

Example payloads

References

Related skills

Forks & variants (1)

How it compares

FAQ

Can UI be built before features install?

When is org grounding required?

How do I choose hosting in Phase 7?

Is Building Ui Bundle App safe to install?

This week in AI coding