@salesforce/afv-skills 1.13.0 → 1.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +3 -3
- package/skills/building-ui-bundle-app/SKILL.md +33 -8
- package/skills/generating-custom-application/SKILL.md +1 -1
- package/skills/generating-ui-bundle-custom-app/SKILL.md +93 -0
- package/skills/generating-ui-bundle-custom-app/docs/configure-metadata-custom-application.md +70 -0
- package/skills/generating-ui-bundle-metadata/SKILL.md +39 -1
- package/skills/reviewing-lwc-mobile-offline/SKILL.md +168 -0
- package/skills/reviewing-lwc-mobile-offline/references/grounding.md +7 -0
- package/skills/reviewing-lwc-mobile-offline/references/inline-graphql.md +43 -0
- package/skills/reviewing-lwc-mobile-offline/references/komaci-eslint.md +125 -0
- package/skills/reviewing-lwc-mobile-offline/references/lwc-if.md +78 -0
- package/skills/reviewing-lwc-mobile-offline/scripts/komaci.config.mjs +18 -0
- package/skills/reviewing-lwc-mobile-offline/scripts/package.json +10 -0
- package/skills/reviewing-lwc-mobile-offline/scripts/run-komaci.sh +69 -0
- package/skills/using-mobile-native-capabilities/SKILL.md +182 -0
- package/skills/using-mobile-native-capabilities/references/app-review.md +68 -0
- package/skills/using-mobile-native-capabilities/references/ar-space-capture.md +125 -0
- package/skills/using-mobile-native-capabilities/references/barcode-scanner.md +219 -0
- package/skills/using-mobile-native-capabilities/references/base-capability.md +22 -0
- package/skills/using-mobile-native-capabilities/references/biometrics.md +90 -0
- package/skills/using-mobile-native-capabilities/references/calendar.md +213 -0
- package/skills/using-mobile-native-capabilities/references/contacts.md +232 -0
- package/skills/using-mobile-native-capabilities/references/document-scanner.md +342 -0
- package/skills/using-mobile-native-capabilities/references/geofencing.md +123 -0
- package/skills/using-mobile-native-capabilities/references/location.md +158 -0
- package/skills/using-mobile-native-capabilities/references/mobile-capabilities.md +30 -0
- package/skills/using-mobile-native-capabilities/references/nfc.md +181 -0
- package/skills/using-mobile-native-capabilities/references/payments.md +95 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salesforce/afv-skills",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.14.0",
|
|
4
4
|
"description": "Salesforce skills for Agentforce Vibes",
|
|
5
5
|
"license": "CC-BY-NC-4.0",
|
|
6
6
|
"files": [
|
|
@@ -11,8 +11,8 @@
|
|
|
11
11
|
"registry": "https://registry.npmjs.org"
|
|
12
12
|
},
|
|
13
13
|
"devDependencies": {
|
|
14
|
-
"@salesforce/ui-bundle-template-app-react-sample-b2e": "^
|
|
15
|
-
"@salesforce/ui-bundle-template-app-react-sample-b2x": "^
|
|
14
|
+
"@salesforce/ui-bundle-template-app-react-sample-b2e": "^10.2.2",
|
|
15
|
+
"@salesforce/ui-bundle-template-app-react-sample-b2x": "^10.2.2",
|
|
16
16
|
"@salesforce/webapp-template-app-react-sample-b2e-experimental": "^1.117.1",
|
|
17
17
|
"@salesforce/webapp-template-app-react-sample-b2x-experimental": "^1.117.1",
|
|
18
18
|
"@types/js-yaml": "^4.0.9",
|
|
@@ -3,7 +3,7 @@ name: building-ui-bundle-app
|
|
|
3
3
|
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. This is the orchestrator that coordinates scaffolding, features, data access, frontend UI, integrations, and deployment in the correct dependency order. Without it, phases execute out of order and the app breaks. Do NOT use for Lightning Experience apps with custom objects (use generating-lightning-app). Do NOT use for single-concern edits to an existing page (use building-ui-bundle-frontend)."
|
|
4
4
|
metadata:
|
|
5
5
|
version: "1.0"
|
|
6
|
-
related-skills: generating-ui-bundle-metadata, generating-ui-bundle-features, using-ui-bundle-salesforce-data, building-ui-bundle-frontend, implementing-ui-bundle-agentforce-conversation-client, implementing-ui-bundle-file-upload, deploying-ui-bundle, generating-ui-bundle-site
|
|
6
|
+
related-skills: generating-ui-bundle-metadata, generating-ui-bundle-features, using-ui-bundle-salesforce-data, building-ui-bundle-frontend, implementing-ui-bundle-agentforce-conversation-client, implementing-ui-bundle-file-upload, deploying-ui-bundle, generating-ui-bundle-site, generating-ui-bundle-custom-app
|
|
7
7
|
---
|
|
8
8
|
|
|
9
9
|
# Building a UI Bundle App
|
|
@@ -126,7 +126,11 @@ Final UI bundle build (rebuilds with the deployed schema)
|
|
|
126
126
|
|
|
127
127
|
Follows the canonical 7-step deployment sequence. Must deploy metadata before fetching schema. Must assign permissions before schema fetch.
|
|
128
128
|
|
|
129
|
-
### Phase 7:
|
|
129
|
+
### Phase 7: Hosting Target
|
|
130
|
+
|
|
131
|
+
Choose **one** of the following based on the app's audience:
|
|
132
|
+
|
|
133
|
+
#### Phase 7a: Experience Site (External)
|
|
130
134
|
|
|
131
135
|
```
|
|
132
136
|
Resolve site properties (siteName, appDevName, etc.)
|
|
@@ -136,7 +140,21 @@ Generate site metadata (Network, CustomSite, DigitalExperience)
|
|
|
136
140
|
Deploy site infrastructure
|
|
137
141
|
```
|
|
138
142
|
|
|
139
|
-
Creates the Digital Experience site that hosts the UI bundle.
|
|
143
|
+
Creates the Digital Experience site that hosts the UI bundle. Use when the user wants a public-facing or authenticated site URL for external users.
|
|
144
|
+
|
|
145
|
+
#### Phase 7b: Custom Application (Internal)
|
|
146
|
+
|
|
147
|
+
```
|
|
148
|
+
Resolve app properties (appName, appNamespace, appLabel)
|
|
149
|
+
v
|
|
150
|
+
Generate CustomApplication metadata (applications/*.app-meta.xml)
|
|
151
|
+
v
|
|
152
|
+
Add <target>CustomApplication</target> to .uibundle-meta.xml
|
|
153
|
+
v
|
|
154
|
+
Deploy custom application
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
Creates a Custom Application entry in the Lightning App Launcher. Use when the app is for internal users accessing it within Lightning Experience.
|
|
140
158
|
|
|
141
159
|
---
|
|
142
160
|
|
|
@@ -184,7 +202,7 @@ INTEGRATIONS (if applicable):
|
|
|
184
202
|
|
|
185
203
|
DEPLOYMENT:
|
|
186
204
|
- Target org: [org alias if known]
|
|
187
|
-
- Experience Site
|
|
205
|
+
- Hosting target: [Experience Site / Custom Application / none]
|
|
188
206
|
|
|
189
207
|
SKILL LOAD ORDER:
|
|
190
208
|
1. generating-ui-bundle-metadata
|
|
@@ -194,7 +212,8 @@ SKILL LOAD ORDER:
|
|
|
194
212
|
5a. implementing-ui-bundle-agentforce-conversation-client (if chat requested)
|
|
195
213
|
5b. implementing-ui-bundle-file-upload (if file upload requested)
|
|
196
214
|
6. deploying-ui-bundle
|
|
197
|
-
|
|
215
|
+
7a. generating-ui-bundle-site (if Experience Site requested -- external users)
|
|
216
|
+
7b. generating-ui-bundle-custom-app (if Custom Application requested -- internal users)
|
|
198
217
|
```
|
|
199
218
|
|
|
200
219
|
### STEP 2: Per-Phase Execution
|
|
@@ -248,12 +267,18 @@ Execute each phase sequentially. Complete all steps within a phase before moving
|
|
|
248
267
|
- 3. Verify: Confirm deployment succeeds and app is accessible
|
|
249
268
|
- 4. Checkpoint: App deployed -- proceed to Phase 7 if needed
|
|
250
269
|
|
|
251
|
-
**Phase
|
|
252
|
-
- 1. Load skill: Invoke `generating-
|
|
270
|
+
**Phase 7a -- Experience Site** (skip if not requested or if Custom Application chosen)
|
|
271
|
+
- 1. Load skill: Invoke `generating-ui-bundle-site`
|
|
253
272
|
- 2. Execute: Resolve properties, generate site metadata, deploy
|
|
254
273
|
- 3. Verify: Confirm site URL is accessible
|
|
255
274
|
- 4. Checkpoint: Site live -- build complete
|
|
256
275
|
|
|
276
|
+
**Phase 7b -- Custom Application** (skip if not requested or if Experience Site chosen)
|
|
277
|
+
- 1. Load skill: Invoke `generating-ui-bundle-custom-app`
|
|
278
|
+
- 2. Execute: Resolve app properties, generate CustomApplication metadata, add CustomApplication target to meta XML
|
|
279
|
+
- 3. Verify: Confirm app appears in App Launcher
|
|
280
|
+
- 4. Checkpoint: App registered -- build complete
|
|
281
|
+
|
|
257
282
|
### STEP 3: Final Summary
|
|
258
283
|
|
|
259
284
|
After all phases complete, present a build summary:
|
|
@@ -268,7 +293,7 @@ PHASES COMPLETED:
|
|
|
268
293
|
[x] Phase 4: UI -- [count] pages, [count] components
|
|
269
294
|
[x] Phase 5: Integrations -- [list or "none"]
|
|
270
295
|
[x] Phase 6: Deployment -- deployed to [org]
|
|
271
|
-
[x] Phase 7:
|
|
296
|
+
[x] Phase 7: Hosting Target -- [Experience Site URL / Custom Application name / "skipped"]
|
|
272
297
|
|
|
273
298
|
FILES GENERATED:
|
|
274
299
|
[list key files and their paths]
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: generating-custom-application
|
|
3
|
-
description: "Use this skill when users need to create or configure Salesforce Custom Applications. Trigger when users mention custom apps, application metadata, app navigation, or organizing tabs into applications. Use when users want to create app containers for tabs and pages.
|
|
3
|
+
description: "Use this skill when users need to create or configure tab-based Salesforce Custom Applications with navigation, branding, and action overrides. Trigger when users mention custom apps, application metadata, app navigation, or organizing tabs into applications. Use when users want to create app containers for tabs and pages. Do NOT use when the goal is hosting a React UI bundle in the App Launcher — use generating-ui-bundle-custom-app for that case."
|
|
4
4
|
metadata:
|
|
5
5
|
version: "1.0"
|
|
6
6
|
---
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: generating-ui-bundle-custom-app
|
|
3
|
+
description: "MUST activate when the project contains a uiBundles/*/src/ directory and the task involves creating or configuring a Custom Application for hosting a UI bundle in Lightning Experience. Use this skill when creating a CustomApplication metadata record to surface the UI bundle in the App Launcher. Activate when files matching applications/*.app-meta.xml exist and need modification, or when the user wants to expose their app via the Lightning App Launcher without a Digital Experience Site. Do NOT use generating-custom-application for this — UI bundle apps do not use tabs, action overrides, or flexipages."
|
|
4
|
+
metadata:
|
|
5
|
+
version: "1.0"
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Custom Application for React UI Bundles
|
|
9
|
+
Create and configure a Salesforce Custom Application that hosts a React UI bundle in Lightning Experience. This skill generates the CustomApplication metadata so the app appears in the Lightning App Launcher and can be accessed by internal users.
|
|
10
|
+
|
|
11
|
+
Custom Applications differ from Experience Sites: they don't need Networks, CustomSite, DigitalExperienceConfig, or DigitalExperienceBundle metadata. The Custom Application acts as a thin launcher entry that delegates rendering to the React UI bundle referenced by `uiBundle`.
|
|
12
|
+
|
|
13
|
+
## Required Properties
|
|
14
|
+
Resolve all properties before generating any metadata. Each has a fallback chain — work through each option in order until a value is found.
|
|
15
|
+
|
|
16
|
+
| Property | Format | How to Resolve |
|
|
17
|
+
|----------|--------|----------------|
|
|
18
|
+
| **appName** | `lowercamelcase` (e.g., `myInternalApp`) | The UI bundle name from `uiBundles/<name>/` directory |
|
|
19
|
+
| **appNamespace** | String | `namespace` in `sfdx-project.json` → `sf data query -q "SELECT NamespacePrefix FROM Organization" --target-org ${usernameOrAlias}` → default `c` |
|
|
20
|
+
| **appLabel** | Human-readable string | User-provided, or derive from appName by converting camelCase to Title Case |
|
|
21
|
+
|
|
22
|
+
The `appNamespace` and `appName` connect the Custom Application to the correct React UI bundle. In newer API versions this uses `<uiBundle>{appNamespace}__{appName}</uiBundle>`; in older versions it uses `<webApplication>{appName}</webApplication>`. Getting this wrong means the app launcher entry exists but shows a blank page. Step 2 of the workflow determines which field to use.
|
|
23
|
+
|
|
24
|
+
## Generation Workflow
|
|
25
|
+
### Step 1: Resolve All Required Properties
|
|
26
|
+
Determine values for all properties before constructing anything. Use the resolution strategies in the table above.
|
|
27
|
+
|
|
28
|
+
### Step 2: Query API Context (Version-Aware Field Discovery)
|
|
29
|
+
Call `salesforce-api-context` MCP tools to discover which fields exist for the target org's API version. This ensures the generated metadata is compatible with the user's Salesforce version.
|
|
30
|
+
|
|
31
|
+
**Required calls:**
|
|
32
|
+
1. Call `get_metadata_type_fields` for `CustomApplication` — check whether the `uiBundle` field exists
|
|
33
|
+
2. Call `get_metadata_type_fields` for `UIBundle` — check whether the `target` field exists
|
|
34
|
+
|
|
35
|
+
**Field resolution based on API response:**
|
|
36
|
+
|
|
37
|
+
| Field Check | If present | If absent (older API version) |
|
|
38
|
+
|-------------|-----------|-------------------------------|
|
|
39
|
+
| `CustomApplication.uiBundle` | Use `<uiBundle>{appNamespace}__{appName}</uiBundle>` | Use `<webApplication>{appName}</webApplication>` (no namespace) |
|
|
40
|
+
| `UIBundle.target` | Use `<target>CustomApplication</target>` | Omit the `<target>` element entirely |
|
|
41
|
+
|
|
42
|
+
If `salesforce-api-context` is unavailable after a real attempt, fall back to the newer field names (`uiBundle` + `target`).
|
|
43
|
+
|
|
44
|
+
### Step 3: Create the Project Structure
|
|
45
|
+
Create any files and directories that don't already exist:
|
|
46
|
+
|
|
47
|
+
| Metadata Type | Path |
|
|
48
|
+
|--------------|------|
|
|
49
|
+
| CustomApplication | `<sourceDir>/applications/{appName}.app-meta.xml` |
|
|
50
|
+
|
|
51
|
+
**Note:** `<sourceDir>` is determined from `sfdx-project.json`. Read `packageDirectories[]` and use the entry where `"default": true`; the full source directory is `<path>/main/default`. If no default is set, use the first entry. Commonly `force-app/main/default`, but this path is configurable.
|
|
52
|
+
|
|
53
|
+
### Step 4: Populate All Metadata Fields
|
|
54
|
+
Use the default template in the doc below. Values in `{braces}` are resolved property references — substitute them with the actual values from Step 1. Apply the field resolution from Step 2 to determine which XML elements to use.
|
|
55
|
+
|
|
56
|
+
| Metadata Type | Template Reference |
|
|
57
|
+
|--------------|-------------------|
|
|
58
|
+
| CustomApplication | [configure-metadata-custom-application.md](docs/configure-metadata-custom-application.md) |
|
|
59
|
+
|
|
60
|
+
### Execution Note for Step 4: Load and use the doc
|
|
61
|
+
- Agents MUST read the full contents of the docs/*.md file referenced in Step 4 before attempting to populate metadata fields.
|
|
62
|
+
- Read the file in full, replace placeholders (e.g. `{appName}`) with the resolved values, then use the expanded template to populate the metadata XML content.
|
|
63
|
+
- If Step 2 determined the older field names apply, substitute `<uiBundle>` with `<webApplication>` in the generated output.
|
|
64
|
+
|
|
65
|
+
### Step 5: Update UI Bundle Meta XML
|
|
66
|
+
If Step 2 confirmed the `target` field exists on `UIBundle`, add `<target>CustomApplication</target>` to the `.uibundle-meta.xml` file (skip if the field doesn't exist in the org's API version):
|
|
67
|
+
|
|
68
|
+
```xml
|
|
69
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
70
|
+
<UIBundle xmlns="http://soap.sforce.com/2006/04/metadata">
|
|
71
|
+
<masterLabel>{appName}</masterLabel>
|
|
72
|
+
<description>A Salesforce UI Bundle.</description>
|
|
73
|
+
<isActive>true</isActive>
|
|
74
|
+
<version>1</version>
|
|
75
|
+
<target>CustomApplication</target>
|
|
76
|
+
</UIBundle>
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### Step 6: Do Not Modify Non-Templated Properties
|
|
80
|
+
Do not modify any default property values for `CustomApplication` metadata that are not expressed as variables wrapped in `{braces}`.
|
|
81
|
+
|
|
82
|
+
## Verification Checklist
|
|
83
|
+
Before deploying, confirm:
|
|
84
|
+
|
|
85
|
+
- [ ] All required properties are resolved
|
|
86
|
+
- [ ] API context was queried to determine available fields (Step 2)
|
|
87
|
+
- [ ] `applications/{appName}.app-meta.xml` exists with correct content
|
|
88
|
+
- [ ] The bundle reference field matches the org's API version (`<uiBundle>` or `<webApplication>`)
|
|
89
|
+
- [ ] If `target` field is supported: `.uibundle-meta.xml` has `<target>CustomApplication</target>`
|
|
90
|
+
- [ ] Deployment validates successfully:
|
|
91
|
+
```bash
|
|
92
|
+
sf project deploy validate --metadata CustomApplication UIBundle --target-org ${usernameOrAlias}
|
|
93
|
+
```
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
# Configure Metadata: CustomApplication
|
|
2
|
+
|
|
3
|
+
## Purpose
|
|
4
|
+
This configuration file creates a **net-new, default** CustomApplication metadata record for a Lightning Experience app that hosts a React UI bundle. It is not intended to edit or modify an existing CustomApplication record. Use this template only when provisioning a brand-new Custom Application for a UI bundle.
|
|
5
|
+
|
|
6
|
+
## File Location
|
|
7
|
+
```
|
|
8
|
+
<sourceDir>/applications/{appName}.app-meta.xml
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
**Note:** Determine `<sourceDir>` from `sfdx-project.json` → `packageDirectories[]` → find the entry with `"default": true` → use its `path` value + `/main/default`. Commonly `force-app/main/default`, but this is configurable.
|
|
12
|
+
|
|
13
|
+
## Default Template (newer API versions — `uiBundle` field available)
|
|
14
|
+
```xml
|
|
15
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
16
|
+
<CustomApplication xmlns="http://soap.sforce.com/2006/04/metadata">
|
|
17
|
+
<brand>
|
|
18
|
+
<headerColor>#0070D2</headerColor>
|
|
19
|
+
<shouldOverrideOrgTheme>false</shouldOverrideOrgTheme>
|
|
20
|
+
</brand>
|
|
21
|
+
<formFactors>Small</formFactors>
|
|
22
|
+
<formFactors>Large</formFactors>
|
|
23
|
+
<isNavAutoTempTabsDisabled>false</isNavAutoTempTabsDisabled>
|
|
24
|
+
<isNavPersonalizationDisabled>false</isNavPersonalizationDisabled>
|
|
25
|
+
<isNavTabPersistenceDisabled>false</isNavTabPersistenceDisabled>
|
|
26
|
+
<isOmniPinnedViewEnabled>false</isOmniPinnedViewEnabled>
|
|
27
|
+
<label>{appLabel}</label>
|
|
28
|
+
<navType>Standard</navType>
|
|
29
|
+
<uiBundle>{appNamespace}__{appName}</uiBundle>
|
|
30
|
+
<uiType>Lightning</uiType>
|
|
31
|
+
</CustomApplication>
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## Fallback Template (older API versions — `uiBundle` field NOT available)
|
|
35
|
+
```xml
|
|
36
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
37
|
+
<CustomApplication xmlns="http://soap.sforce.com/2006/04/metadata">
|
|
38
|
+
<brand>
|
|
39
|
+
<headerColor>#0070D2</headerColor>
|
|
40
|
+
<shouldOverrideOrgTheme>false</shouldOverrideOrgTheme>
|
|
41
|
+
</brand>
|
|
42
|
+
<formFactors>Small</formFactors>
|
|
43
|
+
<formFactors>Large</formFactors>
|
|
44
|
+
<isNavAutoTempTabsDisabled>false</isNavAutoTempTabsDisabled>
|
|
45
|
+
<isNavPersonalizationDisabled>false</isNavPersonalizationDisabled>
|
|
46
|
+
<isNavTabPersistenceDisabled>false</isNavTabPersistenceDisabled>
|
|
47
|
+
<isOmniPinnedViewEnabled>false</isOmniPinnedViewEnabled>
|
|
48
|
+
<label>{appLabel}</label>
|
|
49
|
+
<navType>Standard</navType>
|
|
50
|
+
<webApplication>{appName}</webApplication>
|
|
51
|
+
<uiType>Lightning</uiType>
|
|
52
|
+
</CustomApplication>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## Field Reference
|
|
56
|
+
|
|
57
|
+
| Field | Required | Version | Description |
|
|
58
|
+
|-------|----------|---------|-------------|
|
|
59
|
+
| `brand.headerColor` | Yes | All | Hex color for the app header bar in Lightning Experience. Default: `#0070D2` (Salesforce blue). |
|
|
60
|
+
| `brand.shouldOverrideOrgTheme` | Yes | All | Whether this app's branding overrides the org theme. Default: `false`. |
|
|
61
|
+
| `formFactors` | Yes | All | Supported form factors. Include both `Small` (mobile) and `Large` (desktop) for full coverage. |
|
|
62
|
+
| `isNavAutoTempTabsDisabled` | Yes | All | Disable auto-creation of temporary tabs. Default: `false`. |
|
|
63
|
+
| `isNavPersonalizationDisabled` | Yes | All | Disable user personalization of navigation. Default: `false`. |
|
|
64
|
+
| `isNavTabPersistenceDisabled` | Yes | All | Disable persistence of nav tabs across sessions. Default: `false`. |
|
|
65
|
+
| `isOmniPinnedViewEnabled` | Yes | All | Enable Omni-channel pinned view. Default: `false`. |
|
|
66
|
+
| `label` | Yes | All | Human-readable label shown in the App Launcher and app switcher. |
|
|
67
|
+
| `navType` | Yes | All | Navigation type. Use `Standard` for standard Lightning navigation. |
|
|
68
|
+
| `uiBundle` | Conditional | Newer | Namespace-qualified developer name of the UI bundle (`{appNamespace}__{appName}`). Use when `get_metadata_type_fields` confirms this field exists on `CustomApplication`. |
|
|
69
|
+
| `webApplication` | Conditional | Older | Developer name of the UI bundle (`{appName}`, no namespace). Use when `uiBundle` field is not available. |
|
|
70
|
+
| `uiType` | Yes | All | UI framework type. Must be `Lightning` for UI bundle apps. |
|
|
@@ -24,6 +24,7 @@ After generation:
|
|
|
24
24
|
1. Replace all default boilerplate — "React App", "Vite + React", default `<title>`, placeholder text
|
|
25
25
|
2. Populate the home page with real content (landing section, banners, hero, navigation)
|
|
26
26
|
3. Update navigation and placeholders (see the `building-ui-bundle-frontend` skill)
|
|
27
|
+
4. **Configure a hosting target** — a UI bundle without a `<target>` in its meta XML will not be visible in the org. Use `generating-ui-bundle-custom-app` for internal (App Launcher) apps or `generating-ui-bundle-site` for external (Experience Site) apps.
|
|
27
28
|
|
|
28
29
|
Always install dependencies before running any scripts in the UI bundle directory.
|
|
29
30
|
|
|
@@ -39,7 +40,44 @@ A UIBundle bundle lives under `uiBundles/<AppName>/` and must contain:
|
|
|
39
40
|
### Meta XML
|
|
40
41
|
|
|
41
42
|
Required fields: `masterLabel`, `version` (max 20 chars), `isActive` (boolean).
|
|
42
|
-
Optional: `description` (max 255 chars)
|
|
43
|
+
Optional: `description` (max 255 chars), `target`.
|
|
44
|
+
|
|
45
|
+
#### Target Field
|
|
46
|
+
|
|
47
|
+
The `<target>` element specifies where the UI bundle is hosted:
|
|
48
|
+
|
|
49
|
+
| Value | Use Case | Companion Metadata |
|
|
50
|
+
|-------|----------|-------------------|
|
|
51
|
+
| `Experience` | External-facing site via Digital Experience | Network, CustomSite, DigitalExperienceConfig, DigitalExperienceBundle |
|
|
52
|
+
| `CustomApplication` | Internal app via Lightning App Launcher | CustomApplication (`applications/*.app-meta.xml`) |
|
|
53
|
+
|
|
54
|
+
A `<target>` is **required** for the app to be accessible in a Salesforce org. A UI bundle deployed without a target will not appear anywhere — no App Launcher entry, no Experience Site URL. Always pair the bundle with one of:
|
|
55
|
+
- `generating-ui-bundle-site` (for `Experience` target)
|
|
56
|
+
- `generating-ui-bundle-custom-app` (for `CustomApplication` target)
|
|
57
|
+
|
|
58
|
+
**Example with Experience target:**
|
|
59
|
+
```xml
|
|
60
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
61
|
+
<UIBundle xmlns="http://soap.sforce.com/2006/04/metadata">
|
|
62
|
+
<masterLabel>propertyrentalapp</masterLabel>
|
|
63
|
+
<description>A Salesforce UI Bundle.</description>
|
|
64
|
+
<isActive>true</isActive>
|
|
65
|
+
<version>1</version>
|
|
66
|
+
<target>Experience</target>
|
|
67
|
+
</UIBundle>
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
**Example with CustomApplication target:**
|
|
71
|
+
```xml
|
|
72
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
73
|
+
<UIBundle xmlns="http://soap.sforce.com/2006/04/metadata">
|
|
74
|
+
<masterLabel>propertymanagementapp</masterLabel>
|
|
75
|
+
<description>A Salesforce UI Bundle.</description>
|
|
76
|
+
<isActive>true</isActive>
|
|
77
|
+
<version>1</version>
|
|
78
|
+
<target>CustomApplication</target>
|
|
79
|
+
</UIBundle>
|
|
80
|
+
```
|
|
43
81
|
|
|
44
82
|
### ui-bundle.json
|
|
45
83
|
|
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: reviewing-lwc-mobile-offline
|
|
3
|
+
description: "Review a Lightning Web Component for **mobile offline** compatibility — the Komaci offline static analyzer that pre-primes the data graph for Salesforce Mobile App Plus and Field Service Mobile App. Produces a finding list with code-level fixes covering inline GraphQL queries in `@wire` configurations, modern `lwc:if` / `lwc:elseif` / `lwc:else` directives, and Komaci ESLint rule violations (private wire properties, non-local reactive references, getter side-effects). Use when the user asks for a \"mobile offline review\", \"Komaci check\", \"offline priming audit\", \"offline priming failure\", or \"offline data graph error\", or to validate an LWC against the `@salesforce/eslint-plugin-lwc-graph-analyzer` recommended ruleset. Do not use for generic LWC code review (use an appropriate domain review skill) or for building LWCs with native mobile capabilities (use `using-mobile-native-capabilities`)."
|
|
4
|
+
metadata:
|
|
5
|
+
version: "1.0"
|
|
6
|
+
---
|
|
7
|
+
<!-- adk-managed-skill -->
|
|
8
|
+
|
|
9
|
+
# Reviewing LWC Mobile Offline
|
|
10
|
+
|
|
11
|
+
Run a structured offline-priming compliance pass over a Lightning Web
|
|
12
|
+
Component, producing a report of issues found and code-level fixes to bring
|
|
13
|
+
the component into compliance with Komaci's static analysis requirements
|
|
14
|
+
for the Salesforce Mobile App Plus and Field Service Mobile App.
|
|
15
|
+
|
|
16
|
+
## When to Use
|
|
17
|
+
|
|
18
|
+
- The user asks for a "mobile offline review", "Komaci check", or "offline
|
|
19
|
+
priming audit" on a specific LWC.
|
|
20
|
+
- Preparing a component to ship in Salesforce Mobile App Plus or Field
|
|
21
|
+
Service Mobile App offline mode.
|
|
22
|
+
- Investigating priming failures reported by the offline analyzer.
|
|
23
|
+
|
|
24
|
+
Do NOT use this skill for:
|
|
25
|
+
|
|
26
|
+
- Building an LWC that uses native mobile capabilities (barcode scanner,
|
|
27
|
+
biometrics, location, etc.) — use `using-mobile-native-capabilities`.
|
|
28
|
+
- Generic LWC code review — use the appropriate domain skill
|
|
29
|
+
(`reviewing-lws-security`, `reviewing-lwc-rtl`, `accessibility-code-review`).
|
|
30
|
+
|
|
31
|
+
## Prerequisites
|
|
32
|
+
|
|
33
|
+
- Component path (LWC bundle under `modules/…`).
|
|
34
|
+
- Access to the component's JS/TS and HTML templates.
|
|
35
|
+
- Local Node + npm; ability to run `npx eslint` with the
|
|
36
|
+
`@salesforce/eslint-plugin-lwc-graph-analyzer` plugin.
|
|
37
|
+
|
|
38
|
+
## Knowledge Base
|
|
39
|
+
|
|
40
|
+
[Mobile Offline Grounding](references/grounding.md) explains the three
|
|
41
|
+
violation categories and why each blocks offline priming. Read it before
|
|
42
|
+
judging. The per-reviewer references below are the source of truth for the
|
|
43
|
+
rules and remediations:
|
|
44
|
+
|
|
45
|
+
- Inline GraphQL wire configuration: [Inline GraphQL Reviewer](references/inline-graphql.md)
|
|
46
|
+
- `lwc:if` conditional rendering compatibility: [lwc:if Reviewer](references/lwc-if.md)
|
|
47
|
+
- Komaci ESLint static analysis: [Komaci ESLint Reviewer](references/komaci-eslint.md)
|
|
48
|
+
|
|
49
|
+
## Workflow
|
|
50
|
+
|
|
51
|
+
### Step 1 — Scope the review
|
|
52
|
+
|
|
53
|
+
Identify the component bundle: `.html`, `.js`/`.ts`. CSS and meta files are
|
|
54
|
+
not in scope for offline priming. If the bundle has multiple HTML
|
|
55
|
+
templates, all are reviewed.
|
|
56
|
+
|
|
57
|
+
### Step 2 — Read the grounding and per-reviewer references
|
|
58
|
+
|
|
59
|
+
Read [Mobile Offline Grounding](references/grounding.md) and the three
|
|
60
|
+
per-reviewer references end-to-end before judging. Cite the specific
|
|
61
|
+
reviewer when emitting each finding so the report is auditable.
|
|
62
|
+
|
|
63
|
+
### Step 3 — `lwc:if` / `lwc:elseif` / `lwc:else` (HTML)
|
|
64
|
+
|
|
65
|
+
Walk every `.html` file in the bundle and apply the rules in
|
|
66
|
+
[lwc:if Reviewer](references/lwc-if.md). For each occurrence of
|
|
67
|
+
`lwc:if={…}`, `lwc:elseif={…}`, or `lwc:else`, emit a finding with the
|
|
68
|
+
exact `if:true` / `if:false` rewrite — including the nesting required to
|
|
69
|
+
preserve `lwc:elseif` and `lwc:else` semantics.
|
|
70
|
+
|
|
71
|
+
### Step 4 — Inline GraphQL in `@wire` (JS)
|
|
72
|
+
|
|
73
|
+
Walk every `.js`/`.ts` file in the bundle and apply the rules in
|
|
74
|
+
[Inline GraphQL Reviewer](references/inline-graphql.md). For each `@wire`
|
|
75
|
+
that references a `gql` template literal directly (or via a top-level
|
|
76
|
+
constant), emit a finding that names a concrete getter and shows the
|
|
77
|
+
rewritten `@wire` configuration.
|
|
78
|
+
|
|
79
|
+
### Step 5 — Komaci ESLint pass (JS)
|
|
80
|
+
|
|
81
|
+
Run the Komaci ESLint analyzer over the bundle's JS file using the
|
|
82
|
+
bundled script. It applies the
|
|
83
|
+
`@salesforce/eslint-plugin-lwc-graph-analyzer` recommended ruleset with
|
|
84
|
+
the `bundleAnalyzer` processor enabled.
|
|
85
|
+
|
|
86
|
+
```bash
|
|
87
|
+
scripts/run-komaci.sh path/to/component.js
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
The script requires `@salesforce/eslint-plugin-lwc-graph-analyzer` to
|
|
91
|
+
be resolvable from the working directory, and the component's sibling
|
|
92
|
+
HTML templates must live next to the JS file (the plugin's
|
|
93
|
+
`bundleAnalyzer` processor uses them to resolve the offline data
|
|
94
|
+
graph). Output is ESLint `--format json` on stdout.
|
|
95
|
+
|
|
96
|
+
For each `messages[*]` entry in the output, group by `ruleId` and look
|
|
97
|
+
up the per-rule remediation in
|
|
98
|
+
[Komaci ESLint Reviewer](references/komaci-eslint.md). Emit a finding
|
|
99
|
+
per (rule, line) pair with the exact remediation text from the
|
|
100
|
+
reference; do not invent new advice. See the reference for the manual
|
|
101
|
+
`npx eslint ...` invocation if the script is unavailable in the runtime
|
|
102
|
+
environment.
|
|
103
|
+
|
|
104
|
+
### Step 6 — Produce the report
|
|
105
|
+
|
|
106
|
+
Emit a report in this shape:
|
|
107
|
+
|
|
108
|
+
```
|
|
109
|
+
## Mobile Offline (Komaci priming)
|
|
110
|
+
- <reviewer> — <file>:<startLine>:<startColumn>-<endLine>:<endColumn> — <type>
|
|
111
|
+
Description: <verbatim from the reviewer reference>
|
|
112
|
+
Intent analysis: <verbatim from the reviewer reference>
|
|
113
|
+
Suggested action: <verbatim from the reviewer reference>
|
|
114
|
+
Code: |
|
|
115
|
+
<source snippet from startLine through endLine, optional but
|
|
116
|
+
recommended when the violation spans multiple lines>
|
|
117
|
+
Applied: yes/no
|
|
118
|
+
|
|
119
|
+
## Summary
|
|
120
|
+
- <n> issues found; <m> fixed; <k> deferred (with reason)
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
For Komaci ESLint findings, take `startLine`/`startColumn`/`endLine`/
|
|
124
|
+
`endColumn` from the ESLint message's `line`/`column`/`endLine`/`endColumn`.
|
|
125
|
+
For Inline GraphQL and `lwc:if` findings, supply the line/column range you
|
|
126
|
+
observed in the source. If `endLine`/`endColumn` are not available for a
|
|
127
|
+
finding, fall back to `<file>:<startLine>` and omit the trailing range.
|
|
128
|
+
|
|
129
|
+
Cite the reviewer (Inline GraphQL / lwc:if / Komaci ESLint rule id) on every
|
|
130
|
+
finding.
|
|
131
|
+
|
|
132
|
+
### Step 7 — Apply fixes
|
|
133
|
+
|
|
134
|
+
Apply the remediations directly when the user asked for fixes. If a
|
|
135
|
+
remediation conflicts with the component's behavior outside offline (e.g.
|
|
136
|
+
the developer relies on `lwc:elseif` for readability and the user is not
|
|
137
|
+
yet shipping to mobile offline), surface the conflict in the deferred list
|
|
138
|
+
rather than silently rewriting.
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
## Verification Checklist
|
|
142
|
+
|
|
143
|
+
- [ ] Every `lwc:if` / `lwc:elseif` / `lwc:else` flagged or absent.
|
|
144
|
+
- [ ] Every `@wire` referencing `gql` checked; inline queries extracted to
|
|
145
|
+
a getter.
|
|
146
|
+
- [ ] Komaci ESLint analyzer was actually run; findings cite real rule
|
|
147
|
+
ids, not invented ones.
|
|
148
|
+
- [ ] Each finding cites the originating reviewer or rule id.
|
|
149
|
+
- [ ] No remediation outside the three categories above (other concerns
|
|
150
|
+
belong to other skills).
|
|
151
|
+
|
|
152
|
+
|
|
153
|
+
## Troubleshooting
|
|
154
|
+
|
|
155
|
+
- **`npx eslint` cannot find the plugin** — install
|
|
156
|
+
`@salesforce/eslint-plugin-lwc-graph-analyzer` in the workspace, or use a
|
|
157
|
+
pinned local install path. The plugin is the canonical source of Komaci
|
|
158
|
+
rules.
|
|
159
|
+
- **`bundleAnalyzer` related errors** — the recommended config drives the
|
|
160
|
+
bundle processor; do not strip it. The processor expects sibling HTML
|
|
161
|
+
files to be discoverable. If running on a stripped-down JS file, supply
|
|
162
|
+
the matching HTML in the temp directory.
|
|
163
|
+
- **No findings for a component you expect to fail** — confirm the
|
|
164
|
+
recommended ruleset is applied (not just `bundleAnalyzer` with empty
|
|
165
|
+
rules). Some rules require the HTML to be present alongside the JS.
|
|
166
|
+
- **Findings duplicate `lwc:if` from the dedicated reviewer** — the Komaci
|
|
167
|
+
plugin does not check templates; the `lwc:if` check is HTML-only and
|
|
168
|
+
comes from Step 3. Findings from Step 5 are JS-only.
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
You are an expert code reviewer specializing in Lightning Web Components (LWC) that must run in the **Salesforce Mobile App Plus** and **Field Service Mobile App** in offline mode. The Komaci static-analysis engine pre-primes the data graph for offline use; certain LWC patterns prevent priming and must be flagged with actionable remediations.
|
|
2
|
+
|
|
3
|
+
Your reviews focus on three categories:
|
|
4
|
+
|
|
5
|
+
1. **Conditional rendering compatibility** — modern `lwc:if` / `lwc:elseif` / `lwc:else` directives are incompatible with Komaci priming and must be rewritten as legacy `if:true` / `if:false` branches.
|
|
6
|
+
2. **GraphQL wire configuration** — inline GraphQL queries in `@wire` configurations prevent Komaci from understanding the data graph; queries must be extracted to a getter on the component class.
|
|
7
|
+
3. **Komaci ESLint rule violations** — the `@salesforce/eslint-plugin-lwc-graph-analyzer` plugin exposes a recommended rule set that catches additional priming-blockers (private wire properties, non-local reactive references, getter side-effects, etc.).
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
# Inline GraphQL Wire Configuration
|
|
2
|
+
|
|
3
|
+
## Framework for the analysis
|
|
4
|
+
|
|
5
|
+
The Komaci offline static analysis engine requires GraphQL queries to be **extracted from `@wire` adapter configurations into separate getter methods** for proper offline data priming. Inline GraphQL query strings within `@wire` adapter calls prevent the static analysis engine from understanding and optimizing data dependencies for offline scenarios.
|
|
6
|
+
|
|
7
|
+
**FOCUS:** Only report improper usage of GraphQL queries and variables accessed outside of a component getter function. Do not provide feedback on any other adapter use.
|
|
8
|
+
|
|
9
|
+
Key points to consider:
|
|
10
|
+
|
|
11
|
+
- GraphQL queries and variables MUST be accessed from a getter function within the component class.
|
|
12
|
+
- GraphQL queries MUST NOT be inlined in the wire adapter configuration object.
|
|
13
|
+
- GraphQL variables MUST NOT be inlined in the wire adapter configuration object.
|
|
14
|
+
- GraphQL queries MUST NOT be defined as top-level constants.
|
|
15
|
+
- GraphQL variables MUST NOT be defined as top-level constants.
|
|
16
|
+
- If the query is already in a getter function, do not provide feedback.
|
|
17
|
+
- If the component does not use GraphQL, does not import GraphQL, does not use `@wire`, or does not contain a query in a `gql` template literal, do not provide feedback or analyze further.
|
|
18
|
+
|
|
19
|
+
## Request
|
|
20
|
+
|
|
21
|
+
Review the JavaScript files for `@wire` decorators with inline GraphQL queries:
|
|
22
|
+
|
|
23
|
+
1. Identify `@wire` decorators that use GraphQL wire adapters.
|
|
24
|
+
2. Look for literal GraphQL query strings within the wire configuration objects.
|
|
25
|
+
3. Check for template literals or string literals containing GraphQL syntax.
|
|
26
|
+
4. Analyze the complexity and reusability of the inline queries.
|
|
27
|
+
5. Determine appropriate getter method names for extracted queries.
|
|
28
|
+
6. Validate that extraction will not break existing functionality.
|
|
29
|
+
7. Report each violation with specific refactoring guidance.
|
|
30
|
+
|
|
31
|
+
For each violation, provide a strong suggested action that names a concrete getter — e.g. _"The query MUST be extracted into a getter function called `fooQuery` and accessed by the config `@wire(graphql, { query: '$fooQuery' })`."_
|
|
32
|
+
|
|
33
|
+
Rules to follow:
|
|
34
|
+
|
|
35
|
+
- If no action is required, return an empty list. Do not return null or any other value — return an empty array.
|
|
36
|
+
- Keep issues concise; avoid duplicated issues or unnecessary analysis for things that are not real violations.
|
|
37
|
+
- Stick to the instructions for the specific reviewer in scope. Issues outside that scope will be analyzed by other reviewers.
|
|
38
|
+
- For each violation, provide:
|
|
39
|
+
- The exact violation type as defined by the reviewer in scope.
|
|
40
|
+
- A description of why it is a problem in the context of mobile offline priming.
|
|
41
|
+
- An intent analysis explaining what the developer likely intended.
|
|
42
|
+
- A suggested action with concrete code-level remediation.
|
|
43
|
+
- Do not make assumptions about other components that may be referenced.
|