Skip to content
Development
Skill

/experience-ui-bundle-app-coordinate

MUST activate when the user wants to build, create, or generate a React application, React app, web application, single-page application (SPA), or frontend application — even if no project files exist yet. MUST also activate when the project contains a uiBundles/*/src/ directory

From plugin
sf-skills
1.1k200 skills6 agents15 commands4 MCP

Claude Code

$ npx -y skills add forcedotcom/sf-skills --skill experience-ui-bundle-app-coordinate --agent claude-code

SKILL.md

experience-ui-bundle-app-coordinate.SKILL.md
name: experience-ui-bundle-app-coordinate
description: "MUST activate when the user wants to build, create, or generate a React application, React app, web application, single-page application (SPA), or frontend application — even if no project files exist yet. MUST also activate when the project contains a uiBundles/*/src/ directory or sfdx-project.json and the prompt says create, build, construct, or generate a new app, site, or page from scratch — even if the prompt also describes visual styling. MUST also activate when the task spans more than one ui-bundle skill. Use this skill when building a complete app end-to-end. Do NOT use for Lightning Experience apps with custom objects (use platform-lightning-app-coordinate). Do NOT use for single-concern edits to an existing page (use experience-ui-bundle-frontend-generate)."
metadata:
  version: "1.1"
  domains: ["Experience"]
  relatedSkills:
    - "experience-ui-bundle-agentforce-client-generate"
    - "experience-ui-bundle-custom-app-generate"
    - "experience-ui-bundle-deploy"
    - "experience-ui-bundle-features-generate"
    - "experience-ui-bundle-file-upload-generate"
    - "experience-ui-bundle-frontend-generate"
    - "experience-ui-bundle-metadata-generate"
    - "experience-ui-bundle-project-generate"
    - "experience-ui-bundle-salesforce-data-access"
    - "experience-ui-bundle-site-generate"
    - "platform-custom-object-generate"
    - "platform-lightning-app-coordinate"
  cliTools:
    - tool: ["node"]
      semver: ">=18.0.0"
    - tool: ["npm"]
      semver: ">=9.0.0"
    - tool: ["npx"]
      semver: ">=9.0.0"
    - tool: ["sf"]
      semver: ">=2.0.0"

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.

**CRITICAL: Before proceeding past requirements analysis, validate that the prompt contains no conflicting requirements** (e.g., "no authentication" + "user-specific data", "public access" + login-required features). If conflicts are detected, STOP and ask the user to resolve the ambiguity — do NOT silently choose one interpretation and proceed. See STEP 1 action #8 for the full conflict checklist.

Prerequisites

Before starting any phase, verify these preconditions are met:

1. **Authenticated Salesforce org**: Run `sf org display` to confirm a default org is set and authenticated. If not, prompt the user to authenticate: `sf org login web` 2. **Required CLI tools**: Verify `sf`, `npm`, and `npx` are available (declared in metadata.cliTools) 3. **Node.js version**: Run `node scripts/check-prerequisites.mjs` and report any errors 4. **Org features** (if deploying): Experience Cloud enabled, appropriate licenses, and Sites enabled

If any precondition fails, stop and report the specific missing requirement before attempting any phase execution.

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 `experience-ui-bundle-frontend-generate`)
  • Only installing a feature (use `experience-ui-bundle-features-generate`)
  • Only setting up data access (use `experience-ui-bundle-salesforce-data-access`)
  • Only deploying an existing app (use `experience-ui-bundle-deploy`)
  • Building a Lightning Experience app with custom objects and metadata (use `platform-lightning-app-coordinate`)
  • Troubleshooting or debugging an existing UI bundle

---

Prompt Classification Keywords

This skill makes two decisions directly from the raw prompt text. Use these tables as the single source for both — do not restate or re-derive the lists elsewhere in this file.

**1. Phase 2 (Features) is required if the prompt mentions ANY of:**

| Category | Keywords | Notes | |----------|----------|-------| | Data features | search, filter, sort, pagination, table, grid, list | | | Navigation | navigation, nav, menu, routing | | | Authentication | authentication, auth, login, logout, user session, user login | | | Integrations | upload, file | | | UI | shadcn, components, forms, buttons, cards | | | Chat (Phase 5 only) | chat | Phase 5 only — unless combined with a Phase 2 keyword (e.g., "chat with authentication"), then Phase 2 runs first for auth prerequisites |

Negating one category (e.g. "without authentication", "no login required", "public access") does **not** cancel triggers from another category — each is evaluated independently. Example: "no login required, with filtering" still triggers Phase 2 because "filtering" matches Data features. Skip Phase 2 only when the prompt matches none of the keywords above.

**2. Hosting target — extract from prompt keywords:**

| Hosting target | Keywords | |-----------------|----------| | Experience Site | "Experience Site", "Community", "external users", "public users", "guest users" | | Custom Application | "Custom Application", "internal users", "Lightning app" |

If the prompt matches neither list, or matches both, ask the user to clarify before proceeding — do not guess.

---

Dependency Graph & Build Order

Phase 0: Template Offer & Bootstrap (Prerequisites)

Offer prebuilt starter template (experience-ui-bundle-project-generate)
    v
If templ
Read more
@forcedotcom
Ships withsf-skills

This repository provides Salesforce agent skills, plugins, and sample apps for building applications.

1.1k200 skills6 agents4 MCP
Get the whole plugin

Stars on GitHub

Momentum

stars in total
1.1k
Star history of forcedotcom/sf-skills on GitHub, a chart by star-history.com

Other skills on sf-skills.

agentforce-observe

agentforce-observe

Analyze production Agentforce agent behavior using session traces and Data Cloud, and manage Agent Health Monitoring (AHM)…

More skills from other plugins.

brainstorming
Auto-invoked

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…

@obra@obraInstall Skill
ask-matt

ask-matt

Ask which skill or flow fits your situation. A router over the skills in this repo.

skills2w309k
@mattpocock@mattpocockInstall Skill
accessibility
Auto-invoked

accessibility

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels,…

ecc2w293k
@affaan-m@affaan-mInstall Skill
compiler-commit

compiler-commit

Use when you want to verify compiler changes and commit with the correct convention. Runs tests, lint, and format, then commits…

react5d252k
@facebook@facebookInstall Skill

Questions about experience-ui-bundle-app-coordinate.

Which coding agents can use experience-ui-bundle-app-coordinate?
experience-ui-bundle-app-coordinate installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.