@salesforce/webapp-template-feature-react-file-upload-experimental 1.105.0 → 1.106.0

package/README.md

@@ -311,7 +311,7 @@ onProgress: (progress) => {
 
 The sample includes a **skill** to show how a feature can bundle an on-demand workflow.
 
-Copy the `skills/file-upload/` folder into `.cline/skills/` (Cline) or `.cursor/skills/` (Cursor) to try it, or use it as a template for your own skills.
+Copy the `skills/implementing-file-upload/` folder into `.cline/skills/` (Cline) or `.cursor/skills/` (Cursor) to try it, or use it as a template for your own skills.
 
 ## Dependencies
 

package/dist/.a4drules/skills/{feature-react-chart-analytics-charts → building-analytics-charts}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: feature-react-chart-analytics-charts
+name: building-analytics-charts
 description: Add or change charts from raw data. Use when the user asks for a chart, graph, or analytics visualization from JSON/data.
 ---
 

package/dist/.a4drules/skills/{webapp-react-data-visualization → building-data-visualization}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: webapp-react-data-visualization
+name: building-data-visualization
 description: Adds data visualization components (charts, stat cards, KPI metrics) to React pages using Recharts. Use when the user asks to add a chart, graph, donut chart, pie chart, bar chart, stat card, KPI metric, dashboard visualization, or analytics component to the web application.
 ---
 
@@ -46,8 +46,8 @@ Recharts is built on D3 and provides declarative React components. No additional
 
 Read the corresponding guide:
 
-- **Bar chart** — use the **`analytics-charts`** skill in `feature-react-chart` (AnalyticsChart component for categorical data).
-- **Line / area chart** — use the **`analytics-charts`** skill in `feature-react-chart` (AnalyticsChart component for time-series data).
+- **Bar chart** — use the **`building-analytics-charts`** skill in `feature-react-chart` (AnalyticsChart component for categorical data).
+- **Line / area chart** — use the **`building-analytics-charts`** skill in `feature-react-chart` (AnalyticsChart component for time-series data).
 - **Donut / pie chart** — read `implementation/donut-chart.md`
 - **Stat card with trend** — read `implementation/stat-card.md`
 - **Dashboard layout** — read `implementation/dashboard-layout.md`

package/dist/.a4drules/skills/{webapp-react-data-visualization → building-data-visualization}/implementation/donut-chart.md

@@ -156,7 +156,7 @@ Keep chart colors consistent with the app's design system. Define them as consta
 
 ## Other chart types
 
-For **bar charts** and **line charts**, use the `AnalyticsChart` component from `feature-react-chart` instead of raw Recharts. See the **`analytics-charts`** skill for usage.
+For **bar charts** and **line charts**, use the `AnalyticsChart` component from `feature-react-chart` instead of raw Recharts. See the **`building-analytics-charts`** skill for usage.
 
 ---
 

package/dist/.a4drules/skills/{webapp-react-interactive-map → building-interactive-map}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: webapp-react-interactive-map
+name: building-interactive-map
 description: Adds interactive Leaflet maps with geocoded markers to React pages. Use when the user asks to add a map, show locations on a map, display property pins, add a map view, or integrate mapping into the web application.
 ---
 

package/dist/.a4drules/skills/{webapp-react → building-react-components}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: webapp-react
+name: building-react-components
 description: Use when editing any React code in the web application — creating or modifying components, pages, layout, headers, footers, or any TSX/JSX files. Follow this skill for add component, add page, header/footer, and general React UI implementation patterns (shadcn UI and Tailwind CSS).
 ---
 

package/dist/.a4drules/skills/{webapp-react-weather-widget → building-weather-widget}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: webapp-react-weather-widget
+name: building-weather-widget
 description: Adds a weather widget to React pages using the free Open-Meteo API. Use when the user asks to add weather, show a forecast, display current conditions, add a weather card, or integrate weather data into the web application.
 ---
 
@@ -34,7 +34,7 @@ The widget needs a latitude/longitude. Identify where this comes from:
 
 - **Fixed default** — hardcoded city (e.g. San Francisco: `37.7749, -122.4194`)
 - **User's location** — browser Geolocation API
-- **Address-based** — geocode an address to lat/lng (see the `webapp-react-interactive-map` skill for geocoding)
+- **Address-based** — geocode an address to lat/lng (see the `building-interactive-map` skill for geocoding)
 - **Prop-driven** — parent component passes lat/lng
 
 ---

package/dist/.a4drules/skills/{webapp-csp-trusted-sites → configuring-csp-trusted-sites}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: webapp-csp-trusted-sites
+name: configuring-csp-trusted-sites
 description: Creates Salesforce CSP Trusted Site metadata when adding external domains. Use when the user adds an external API, CDN, image host, font provider, map tile server, or any third-party URL that the web application needs to load resources from — or when a browser console shows a CSP violation error.
 ---
 

package/dist/.a4drules/skills/{webapp-ui-ux → designing-webapp-ui-ux}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: webapp-ui-ux
+name: designing-webapp-ui-ux
 description: Use when editing any UI code in the web application — styling, layout, design, appearance, Tailwind, shadcn, colors, typography, icons, or visual/UX changes. Comprehensive design guide and searchable database for React + Tailwind + shadcn/ui (styles, color palettes, font pairings, UX guidelines, chart types).
 ---
 
@@ -35,7 +35,7 @@ Extract key information from user request:
 **Always start with `--design-system`** to get comprehensive recommendations with reasoning:
 
 ```bash
-node skills/ui-ux/scripts/search.js "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
+node skills/designing-webapp-ui-ux/scripts/search.js "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
 ```
 
 This command:
@@ -46,7 +46,7 @@ This command:
 
 **Example:**
 ```bash
-node skills/ui-ux/scripts/search.js "beauty spa wellness service" --design-system -p "Serenity Spa"
+node skills/designing-webapp-ui-ux/scripts/search.js "beauty spa wellness service" --design-system -p "Serenity Spa"
 ```
 
 ### Step 2b: Persist Design System (Master + Overrides Pattern)
@@ -54,7 +54,7 @@ node skills/ui-ux/scripts/search.js "beauty spa wellness service" --design-syste
 To save the design system for hierarchical retrieval across sessions, add `--persist`:
 
 ```bash
-node skills/ui-ux/scripts/search.js "<query>" --design-system --persist -p "Project Name"
+node skills/designing-webapp-ui-ux/scripts/search.js "<query>" --design-system --persist -p "Project Name"
 ```
 
 This creates:
@@ -63,7 +63,7 @@ This creates:
 
 **With page-specific override:**
 ```bash
-node skills/ui-ux/scripts/search.js "<query>" --design-system --persist -p "Project Name" --page "dashboard"
+node skills/designing-webapp-ui-ux/scripts/search.js "<query>" --design-system --persist -p "Project Name" --page "dashboard"
 ```
 
 This also creates:
@@ -79,7 +79,7 @@ This also creates:
 After getting the design system, use domain searches to get additional details:
 
 ```bash
-node skills/ui-ux/scripts/search.js "<keyword>" --domain <domain> [-n <max_results>]
+node skills/designing-webapp-ui-ux/scripts/search.js "<keyword>" --domain <domain> [-n <max_results>]
 ```
 
 **When to use detailed searches:**
@@ -97,7 +97,7 @@ node skills/ui-ux/scripts/search.js "<keyword>" --domain <domain> [-n <max_resul
 Get implementation-specific best practices for React, Tailwind, or shadcn/ui:
 
 ```bash
-node skills/ui-ux/scripts/search.js "<keyword>" --stack shadcn
+node skills/designing-webapp-ui-ux/scripts/search.js "<keyword>" --stack shadcn
 ```
 
 Available stacks: `html-tailwind`, `react`, `shadcn`
@@ -143,7 +143,7 @@ Available stacks: `html-tailwind`, `react`, `shadcn`
 ### Step 2: Generate Design System (REQUIRED)
 
 ```bash
-node skills/ui-ux/scripts/search.js "beauty spa wellness service elegant" --design-system -p "Serenity Spa"
+node skills/designing-webapp-ui-ux/scripts/search.js "beauty spa wellness service elegant" --design-system -p "Serenity Spa"
 ```
 
 **Output:** Complete design system with pattern, style, colors, typography, effects, and anti-patterns.
@@ -152,17 +152,17 @@ node skills/ui-ux/scripts/search.js "beauty spa wellness service elegant" --desi
 
 ```bash
 # Get UX guidelines for animation and accessibility
-node skills/ui-ux/scripts/search.js "animation accessibility" --domain ux
+node skills/designing-webapp-ui-ux/scripts/search.js "animation accessibility" --domain ux
 
 # Get alternative typography options if needed
-node skills/ui-ux/scripts/search.js "elegant luxury serif" --domain typography
+node skills/designing-webapp-ui-ux/scripts/search.js "elegant luxury serif" --domain typography
 ```
 
 ### Step 4: Stack Guidelines
 
 ```bash
-node skills/ui-ux/scripts/search.js "layout responsive form" --stack html-tailwind
-node skills/ui-ux/scripts/search.js "form dialog" --stack shadcn
+node skills/designing-webapp-ui-ux/scripts/search.js "layout responsive form" --stack html-tailwind
+node skills/designing-webapp-ui-ux/scripts/search.js "form dialog" --stack shadcn
 ```
 
 **Then:** Synthesize design system + detailed searches and implement the design.
@@ -175,10 +175,10 @@ The `--design-system` flag supports two output formats:
 
 ```bash
 # ASCII box (default) - best for terminal display
-node skills/ui-ux/scripts/search.js "fintech crypto" --design-system
+node skills/designing-webapp-ui-ux/scripts/search.js "fintech crypto" --design-system
 
 # Markdown - best for documentation
-node skills/ui-ux/scripts/search.js "fintech crypto" --design-system -f markdown
+node skills/designing-webapp-ui-ux/scripts/search.js "fintech crypto" --design-system -f markdown
 ```
 
 ---

package/dist/.a4drules/skills/{feature-micro-frontend-micro-frontend → generating-micro-frontend-lwc}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: feature-micro-frontend-micro-frontend
+name: generating-micro-frontend-lwc
 description: Generate a Micro Frontend LWC component for a Web Application.
 license: Proprietary. LICENSE.txt has complete terms
 metadata:

package/{skills/file-upload → dist/.a4drules/skills/implementing-file-upload}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: feature-react-file-upload
+name: implementing-file-upload
 description: Add file upload functionality to React webapps with progress tracking and Salesforce ContentVersion integration. Use when the user wants to upload files, attach documents, handle file input, create file dropzones, track upload progress, or link files to Salesforce records. This feature provides programmatic APIs ONLY — no components or hooks are exported. Build your own custom UI using the upload() API. ALWAYS use this feature instead of building file upload from scratch with FormData or XHR.
 ---
 

package/dist/.a4drules/skills/{webapp-features → installing-webapp-features}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: webapp-features
+name: installing-webapp-features
 description: Search, describe, and install pre-built UI features (authentication, shadcn components, navigation, charts, search, GraphQL, Agentforce AI) into Salesforce webapps. Use this when the user wants to add functionality to a webapp, or when determining what salesforce-provided features are available — whether prompted by the user or on your own initiative. Always check for an existing feature before building from scratch.
 ---
 

package/dist/.a4drules/skills/{feature-react-agentforce-conversation-client-embedded-agent → integrating-agentforce-conversation-client}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: feature-react-agentforce-conversation-client-embedded-agent
+name: integrating-agentforce-conversation-client
 description: Embed an Agentforce conversation client (chat UI) into a React web application using the AgentforceConversationClient component. Use when the user wants to add or integrate a chat widget, chatbot, conversation client, agent chat, or conversational interface in a React app, or when they mention Agentforce chat, Agentforce widget, employee agent, travel agent, HR agent, or embedding a Salesforce agent. ALWAYS use this skill instead of building a chat UI from scratch. NEVER generate custom chat components, use third-party chat libraries, or implement chat with WebSockets or REST APIs. Do NOT use for Lightning Web Components (LWC), non-React frameworks.
 ---
 

package/dist/.a4drules/skills/{webapp-unsplash-images → integrating-unsplash-images}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: webapp-unsplash-images
+name: integrating-unsplash-images
 description: Adds high-quality Unsplash images to React pages. Use when the user asks to add a hero image, background image, placeholder image, stock photo, decorative image, or any Unsplash-sourced imagery to the web application.
 ---
 

package/dist/.a4drules/skills/salesforce-data-access/SKILL.md

@@ -0,0 +1,165 @@
+---
+name: salesforce-data-access
+description: Salesforce data access patterns. Use when adding or modifying any code that fetches data from Salesforce (records, Chatter, Connect API, etc.).
+paths:
+  - "**/*.ts"
+  - "**/*.tsx"
+  - "**/*.graphql"
+---
+
+# Salesforce Data Access
+
+Guidance for accessing Salesforce data from web apps. **All Salesforce data fetches MUST use the Data SDK** (`@salesforce/sdk-data`). The SDK provides authentication, CSRF handling, and correct base URL resolution — direct `fetch` or `axios` calls bypass these and are not allowed.
+
+## Mandatory: Use the Data SDK
+
+> **Every Salesforce data fetch must go through the Data SDK.** Obtain it via `createDataSDK()`, then use `sdk.graphql?.()` or `sdk.fetch?.()`. Never call `fetch()` or `axios` directly for Salesforce endpoints.
+
+## Optional Chaining and Graceful Handling
+
+**Always use optional chaining** when calling `sdk.graphql` or `sdk.fetch` — these methods may be undefined in some surfaces (e.g., Salesforce ACC, MCP Apps). Handle the case where they are not available gracefully:
+
+```typescript
+const sdk = await createDataSDK();
+
+// ✅ Use optional chaining
+const response = await sdk.graphql?.(query);
+
+// ✅ Check before using fetch
+if (!sdk.fetch) {
+  throw new Error("Data SDK fetch is not available in this context");
+}
+const res = await sdk.fetch(url);
+```
+
+For GraphQL, if `sdk.graphql` is undefined, the call returns `undefined` — handle that in your logic (e.g., throw a clear error or return a fallback). For `sdk.fetch`, check availability before calling when the operation is required.
+
+## Preference: GraphQL First
+
+**GraphQL is the preferred method** for querying and mutating Salesforce records. Use it when:
+
+- Querying records (Account, Contact, Opportunity, custom objects)
+- Creating, updating, or deleting records (when GraphQL supports the operation)
+- Fetching related data, filters, sorting, pagination
+
+**Use `sdk.fetch` only when GraphQL is not sufficient.** For REST API usage, invoke the `salesforce-rest-api-fetch` skill, which documents:
+
+- Chatter API (e.g., `/services/data/v65.0/chatter/users/me`)
+- Connect REST API (e.g., `/services/data/v65.0/connect/file/upload/config`)
+- Apex REST (e.g., `/services/apexrest/auth/login`)
+- UI API REST (e.g., `/services/data/v65.0/ui-api/records/{recordId}`)
+- Einstein LLM Gateway
+
+---
+
+## Getting the SDK
+
+```typescript
+import { createDataSDK } from "@salesforce/sdk-data";
+
+const sdk = await createDataSDK();
+```
+
+---
+
+## Example 1: GraphQL (Preferred)
+
+For record queries and mutations, use GraphQL via the Data SDK. Invoke the `salesforce-graphql` skill for the full workflow (schema exploration, query authoring, codegen, lint validate).
+
+```typescript
+import { createDataSDK, gql } from "@salesforce/sdk-data";
+import type { GetAccountsQuery } from "../graphql-operations-types";
+
+const GET_ACCOUNTS = gql`
+  query GetAccounts {
+    uiapi {
+      query {
+        Account(first: 10) {
+          edges {
+            node {
+              Id
+              Name { value }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+export async function getAccounts() {
+  const sdk = await createDataSDK();
+  const response = await sdk.graphql?.<GetAccountsQuery>(GET_ACCOUNTS);
+
+  if (response?.errors?.length) {
+    throw new Error(response.errors.map((e) => e.message).join("; "));
+  }
+
+  return response?.data?.uiapi?.query?.Account?.edges?.map((e) => e?.node) ?? [];
+}
+```
+
+---
+
+## Example 2: Fetch (When GraphQL Is Not Sufficient)
+
+For REST endpoints that have no GraphQL equivalent, use `sdk.fetch`. **Invoke the `salesforce-rest-api-fetch` skill** for full documentation of Chatter, Connect REST, Apex REST, UI API REST, and Einstein LLM endpoints.
+
+```typescript
+import { createDataSDK } from "@salesforce/sdk-data";
+
+declare const __SF_API_VERSION__: string;
+const API_VERSION = typeof __SF_API_VERSION__ !== "undefined" ? __SF_API_VERSION__ : "65.0";
+
+export async function getCurrentUser() {
+  const sdk = await createDataSDK();
+  const response = await sdk.fetch?.(`/services/data/v${API_VERSION}/chatter/users/me`);
+
+  if (!response?.ok) throw new Error(`HTTP ${response?.status}`);
+  const data = await response.json();
+  return { id: data.id, name: data.name };
+}
+```
+
+---
+
+## Anti-Patterns (Forbidden)
+
+### Direct fetch to Salesforce
+
+```typescript
+// ❌ FORBIDDEN — bypasses Data SDK auth and CSRF
+const res = await fetch("/services/data/v65.0/chatter/users/me");
+```
+
+### Direct axios to Salesforce
+
+```typescript
+// ❌ FORBIDDEN — bypasses Data SDK
+const res = await axios.get("/services/data/v65.0/chatter/users/me");
+```
+
+### Correct approach
+
+```typescript
+// ✅ CORRECT — use Data SDK
+const sdk = await createDataSDK();
+const res = await sdk.fetch?.("/services/data/v65.0/chatter/users/me");
+```
+
+---
+
+## Decision Flow
+
+1. **Need to query or mutate Salesforce records?** → Use GraphQL via the Data SDK. Invoke the `salesforce-graphql` skill.
+2. **Need Chatter, Connect REST, Apex REST, UI API REST, or Einstein LLM?** → Use `sdk.fetch`. Invoke the `salesforce-rest-api-fetch` skill.
+3. **Never** use `fetch`, `axios`, or similar directly for Salesforce API calls.
+
+---
+
+## Reference
+
+- GraphQL workflow: invoke the `salesforce-graphql` skill (`.a4drules/skills/salesforce-graphql/`)
+- REST API via fetch: invoke the `salesforce-rest-api-fetch` skill (`.a4drules/skills/salesforce-rest-api-fetch/`)
+- Data SDK package: `@salesforce/sdk-data` (`createDataSDK`, `gql`, `NodeOfConnection`)
+- `createRecord` for UI API record creation: `@salesforce/webapp-experimental/api` (uses Data SDK internally)