Rename webapp/webapplication to UI bundle in skills

skills/deploying-webapplication/SKILL.md

@@ -0,0 +1,77 @@
+---
+name: deploying-webapplication
+description: "Deploy a Salesforce web application to an org — the full deployment sequence including org authentication, pre-deploy build, metadata deployment, permission set assignment, data import, GraphQL schema fetch, and codegen. Use whenever the user wants to deploy, push to org, assign permission sets, import data, fetch GraphQL schema, run codegen, or set up an org after development. Triggers on: deploy, push to org, deploy metadata, assign permission set, import data, schema fetch, codegen, org auth, authenticate org, build and deploy, post-deploy, org setup."
+---
+
+# Deploying a Web Application
+
+The order of operations is critical when deploying to a Salesforce org. This sequence reflects the canonical flow.
+
+## Step 1: Org Authentication
+
+Check if the org is connected. If not, authenticate. All subsequent steps require an authenticated org.
+
+## Step 2: Pre-deploy Web Application Build
+
+Install dependencies and build the web application to produce `dist/`. Required before deploying web application entities.
+
+Run when: deploying web applications and `dist/` is missing or source has changed.
+
+## Step 3: Deploy Metadata
+
+Check for a manifest (`manifest/package.xml` or `package.xml`) first. If present, deploy using the manifest. If not, deploy all metadata from the project.
+
+Deploys objects, layouts, permission sets, Apex classes, web applications, and all other metadata. Must complete before schema fetch — the schema reflects org state.
+
+## Step 4: Post-deploy Configuration
+
+Deploying does not mean assigning. After deployment:
+
+- **Permission sets / groups** — assign to users so they have access to custom objects and fields. Required for GraphQL introspection to return the correct schema.
+- **Profiles** — ensure users have the correct profile.
+- **Other config** — named credentials, connected apps, custom settings, flow activation.
+
+Proactive behavior: after a successful deploy, discover permission sets in `force-app/main/default/permissionsets/` and assign each one (or ask the user).
+
+## Step 5: Data Import (optional)
+
+Only if `data/data-plan.json` exists. Delete runs in reverse plan order (children before parents). Import uses Anonymous Apex with duplicate rule save enabled.
+
+Always ask the user before importing or cleaning data.
+
+## Step 6: GraphQL Schema and Codegen
+
+1. Set default org
+2. Fetch schema (GraphQL introspection) — writes `schema.graphql` at project root
+3. Generate types (codegen reads schema locally)
+
+Run when: schema missing, or metadata/permissions changed since last fetch.
+
+## Step 7: Final Web Application Build
+
+Build the web application if not already done in Step 2.
+
+## Summary: Interaction Order
+
+1. Check/authenticate org
+2. Build web application (if deploying web applications)
+3. Deploy metadata
+4. Assign permissions and configure
+5. Import data (if data plan exists, with user confirmation)
+6. Fetch GraphQL schema and run codegen
+7. Build web application (if needed)
+
+## Critical Rules
+
+- Deploy metadata **before** fetching schema — custom objects/fields appear only after deployment
+- Assign permissions **before** schema fetch — the user may lack FLS for custom fields
+- Re-run schema fetch and codegen **after every metadata deployment** that changes objects, fields, or permissions
+- Never skip permission set assignment or data import silently — either run them or ask the user
+
+## Post-deploy Checklist
+
+After every successful metadata deploy:
+
+1. Discover and assign permission sets (or ask the user)
+2. If `data/data-plan.json` exists, ask the user about data import
+3. Re-run schema fetch and codegen from the web application directory

skills/generating-webapp-features/SKILL.md → skills/generating-webapplication-features/SKILL.md

@@ -1,13 +1,13 @@
 ---
-name: generating-webapp-features
+name: generating-webapplication-features
 description: "Search and install pre-built features into Salesforce React web applications — authentication, shadcn, search, navigation, GraphQL, Agentforce AI, and more. Use whenever searching for or installing features. Always check for an existing feature before building from scratch. Triggers on: install feature, add authentication, add shadcn, add feature, search features, list features."
 ---
 
 # Web Application Features
 
 ## Installing Pre-built Features
 
-Always check for an existing feature before building something from scratch. The features CLI installs pre-built, tested packages into Salesforce webapps — from foundational UI libraries (shadcn/ui) to full-stack capabilities (authentication, search, navigation, GraphQL, Agentforce AI).
+Always check for an existing feature before building something from scratch. The features CLI installs pre-built, tested packages into Salesforce web applications — from foundational UI libraries (shadcn/ui) to full-stack capabilities (authentication, search, navigation, GraphQL, Agentforce AI).
 
 ### Workflow
 

skills/generating-webapplication-metadata/SKILL.md

@@ -0,0 +1,106 @@
+---
+name: generating-webapplication-metadata
+description: "Scaffold new Salesforce web applications and configure their metadata — sf webapp generate, WebApplication bundles (meta XML, webapplication.json with routing/headers/outputDir), and CSP Trusted Sites for external domains. Use whenever creating a new web application, setting up web application metadata structure, configuring routing or headers, setting outputDir, adding external domains that need CSP registration, or editing bundle configuration. Triggers on: create web application, create webapp, new app, sf webapp generate, metadata, webapplication.json, CSP, trusted site, bundle configuration, meta XML, routing config, external domain, headers config, outputDir."
+---
+
+# Web Application Metadata
+
+## Scaffolding a New Web Application
+
+Use `sf webapp generate` to create new apps — not create-react-app, Vite, or other generic scaffolds.
+
+**Web application name (`-n`):** Alphanumerical only — no spaces, hyphens, underscores, or special characters. Example: `CoffeeBoutique` (not `Coffee Boutique`).
+
+After generation:
+1. Replace all default boilerplate — "React App", "Vite + React", default `<title>`, placeholder text
+2. Populate the home page with real content (landing section, banners, hero, navigation)
+3. Update navigation and placeholders (see the `generating-webapplication-ui` skill)
+
+Always install dependencies before running any scripts in the web application directory.
+
+---
+
+## WebApplication Bundle
+
+A WebApplication bundle lives under `webapplications/<AppName>/` and must contain:
+
+- `<AppName>.webapplication-meta.xml` — filename must exactly match the folder name
+- A build output directory (default: `dist/`) with at least one file
+
+### Meta XML
+
+Required fields: `masterLabel`, `version` (max 20 chars), `isActive` (boolean).
+Optional: `description` (max 255 chars).
+
+### webapplication.json
+
+Optional file. Allowed top-level keys: `outputDir`, `routing`, `headers`.
+
+**Constraints:**
+- Valid UTF-8 JSON, max 100 KB
+- Root must be a non-empty object (never `{}`, arrays, or primitives)
+
+**Path safety** (applies to `outputDir` and `routing.fallback`): Reject backslashes, leading `/` or `\`, `..` segments, null/control characters, globs (`*`, `?`, `**`), and `%`. All resolved paths must stay within the bundle.
+
+#### outputDir
+Non-empty string referencing a subdirectory (not `.` or `./`). Directory must exist and contain at least one file.
+
+#### routing
+If present, must be a non-empty object. Allowed keys: `rewrites`, `redirects`, `fallback`, `trailingSlash`, `fileBasedRouting`.
+
+- **trailingSlash**: `"always"`, `"never"`, or `"auto"`
+- **fileBasedRouting**: boolean
+- **fallback**: non-empty string satisfying path safety; target file must exist
+- **rewrites**: non-empty array of `{ route?, rewrite }` objects — e.g., `{ "route": "/app/:path*", "rewrite": "/index.html" }`
+- **redirects**: non-empty array of `{ route?, redirect, statusCode? }` objects — statusCode must be 301, 302, 307, or 308
+
+#### headers
+Non-empty array of `{ source, headers: [{ key, value }] }` objects.
+
+**Example:**
+```json
+{
+  "routing": {
+    "rewrites": [{ "route": "/app/:path*", "rewrite": "/index.html" }],
+    "trailingSlash": "never"
+  },
+  "headers": [
+    {
+      "source": "/assets/**",
+      "headers": [{ "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }]
+    }
+  ]
+}
+```
+
+**Never suggest:** `{}` as root, empty `"routing": {}`, empty arrays, `[{}]`, `"outputDir": "."`, `"outputDir": "./"`.
+
+---
+
+## CSP Trusted Sites
+
+Salesforce enforces Content Security Policy headers. Any external domain not registered as a CSP Trusted Site will be blocked (images won't load, API calls fail, fonts missing).
+
+### When to Create
+
+Whenever the app references a new external domain: CDN images, external fonts, third-party APIs, map tiles, iframes, external stylesheets.
+
+### Steps
+
+1. **Identify external domains** — extract the origin (scheme + host) from each external URL in the code
+2. **Check existing registrations** — look in `force-app/main/default/cspTrustedSites/`
+3. **Map resource type to CSP directive:**
+
+| Resource Type | Directive Field |
+|--------------|----------------|
+| Images | `isApplicableToImgSrc` |
+| API calls (fetch, XHR) | `isApplicableToConnectSrc` |
+| Fonts | `isApplicableToFontSrc` |
+| Stylesheets | `isApplicableToStyleSrc` |
+| Video / audio | `isApplicableToMediaSrc` |
+| Iframes | `isApplicableToFrameSrc` |
+
+Always also set `isApplicableToConnectSrc` to `true` for preflight/redirect handling.
+
+4. **Create the metadata file** — follow `implementation/csp-metadata-format.md` for the `.cspTrustedSite-meta.xml` format. Place in `force-app/main/default/cspTrustedSites/`.
+