Building Ui Bundle App

Name: Building Ui Bundle App
Author: forcedotcom

forcedotcom/afv-library

1.5k installs
763 repo stars
Updated July 24, 2026
forcedotcom/afv-library

This is a copy of building-ui-bundle-app by forcedotcom - installs and ranking accrue to the original listing.

building-ui-bundle-app is an orchestrator skill that creates a complete, deployable Salesforce React UI bundle application from a natural language description for developers starting or extending SFDX uiBundles projects.

About

building-ui-bundle-app is the top-level orchestrator skill from forcedotcom/afv-library for Salesforce React UI bundle applications. It must activate when a user wants to build, create, or generate a React app, SPA, or frontend—even with no existing files—or when the project contains uiBundles/*/src/ or sfdx-project.json and the prompt asks to construct a new app, site, or page from scratch. The skill coordinates scaffolding, features, data access, and sibling ui-bundle skills when a task spans more than one capability. Developers reach for building-ui-bundle-app for end-to-end UI bundle delivery from a natural language description rather than invoking individual feature skills piecemeal. Output is a deployable React UI bundle wired to Salesforce.

Orchestrates the full end-to-end UI bundle creation process in correct dependency order
Coordinates scaffolding, features, data access, frontend UI, integrations, and deployment
Activates for new React/SPA/frontend apps even when no project files exist yet
Triggers on uiBundles/*/src/ directory or sfdx-project.json when building from scratch
Prevents out-of-order execution that breaks the final application

Building Ui Bundle App by the numbers

1,495 all-time installs (skills.sh)
+1 installs in the week ending Jul 28, 2026 (Skillselion tracking)
Security screen: LOW risk (skills.sh audit)
Data as of Jul 28, 2026 (Skillselion catalog sync)

npx skills add https://github.com/forcedotcom/afv-library --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/afv-library/building-ui-bundle-app.svg)](https://skillselion.com/skills/forcedotcom/afv-library/building-ui-bundle-app)

Installs	1.5k
repo stars	★ 763
Security audit	2 / 3 scanners passed
Last updated	July 24, 2026
Repository	forcedotcom/afv-library ↗

How do you build a Salesforce UI bundle React app?

Orchestrate the creation of a complete, deployable Salesforce React UI bundle application from a natural language description.

Who is it for?

Salesforce developers creating a new UI bundle SPA from scratch or when a prompt spans multiple ui-bundle skills in one SFDX project.

Skip if: Developers adding only authentication or search to an existing bundle—use generating-ui-bundle-features instead.

When should I use this skill?

A user wants to build or generate a React/SPA frontend in a uiBundles or sfdx-project.json Salesforce project from scratch.

What you get

A deployable React UI bundle with scaffolding, features, and Salesforce data integration under uiBundles/*/src/.

deployable UI bundle React app
project scaffolding under uiBundles

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

How it compares

Use as the end-to-end entry point for new UI bundle apps; use focused skills for single-feature additions to existing bundles.

FAQ

When must building-ui-bundle-app activate?

building-ui-bundle-app activates when a user asks to build or generate a React app or SPA, when uiBundles/*/src/ exists, or when sfdx-project.json is present and the task creates a new site or page—even if styling is also described.

How does building-ui-bundle-app relate to other ui-bundle skills?

building-ui-bundle-app is the orchestrator that coordinates scaffolding, features, and data access skills. Invoke it for end-to-end app creation; use focused skills like generating-ui-bundle-features for single additions.

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 Developmentagentsautomation

About

Building Ui Bundle App by the numbers

Add your badge

How do you build a Salesforce UI bundle React app?

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

How it compares

FAQ

When must building-ui-bundle-app activate?

How does building-ui-bundle-app relate to other ui-bundle skills?

Is Building Ui Bundle App safe to install?

This week in AI coding