@salesforce/webapp-template-feature-react-file-upload-experimental 1.109.0 → 1.109.1

package/dist/.a4drules/skills/accessing-data/SKILL.md

@@ -149,6 +149,19 @@ const res = await sdk.fetch?.("/services/data/v65.0/chatter/users/me");
 
 ---
 
+## Clarifying Vague Data Requests
+
+When a user asks about data and the request is vague, **clarify before implementing**. Ask which of the following they want:
+
+- **Application code** — Add or modify code in a specific web app so the app performs the data interaction at runtime (e.g., GraphQL query in the React app)
+- **Local SF CLI** — Run Salesforce CLI commands locally (e.g., `sf data query`, `sf data import tree`) to interact with the org from the terminal
+- **Local example data** — Update or add local fixture/example data files (e.g., JSON in `data/`) for development or testing
+- **Other** — Data export, report generation, setup script, etc.
+
+Do not assume. A request like "fetch accounts" could mean: (1) add a GraphQL query to the app, (2) run `sf data query` in the terminal, or (3) update sample data files. Confirm the intent before proceeding.
+
+---
+
 ## Decision Flow
 
 1. **Need to query or mutate Salesforce records?** → Use GraphQL via the Data SDK. Invoke the `using-graphql` skill.

package/dist/.a4drules/skills/building-data-visualization/SKILL.md

@@ -46,8 +46,8 @@ Recharts is built on D3 and provides declarative React components. No additional
 
 Read the corresponding guide:
 
-- **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).
+- **Bar chart** — read `implementation/bar-line-chart.md` (categorical data)
+- **Line / area chart** — read `implementation/bar-line-chart.md` (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/building-data-visualization/implementation/bar-line-chart.md

@@ -0,0 +1,316 @@
+# Bar & Line / Area Chart — Implementation Guide
+
+Requires **recharts** (install from the web app directory; see SKILL.md Step 2).
+
+---
+
+## Data shapes
+
+### Time-series (line / area chart)
+
+Use when data represents a trend over time or ordered sequence.
+
+```ts
+interface TimeSeriesDataPoint {
+  x: string;   // date or label on the x-axis
+  y: number;   // numeric value
+}
+```
+
+Map raw fields to this shape: e.g. `date` → `x`, `revenue` → `y`.
+
+### Categorical (bar chart)
+
+Use when data compares discrete categories.
+
+```ts
+interface CategoricalDataPoint {
+  name: string;   // category label
+  value: number;  // numeric value
+}
+```
+
+Map raw fields to this shape: e.g. `product` → `name`, `sales` → `value`.
+
+### How to decide
+
+| Signal | Type |
+|--------|------|
+| "over time", "trend", date-like keys | Time-series → line chart |
+| "by category", "by X", label-like keys | Categorical → bar chart |
+
+---
+
+## Theme colors
+
+Pick a theme based on the data's sentiment:
+
+| Theme | Stroke / Fill | When to use |
+|-------|---------------|-------------|
+| `green` | `#22c55e` | Growth, gain, positive trend |
+| `red` | `#ef4444` | Decline, loss, negative trend |
+| `neutral` | `#6366f1` | Default or mixed data |
+
+Define colors as constants — do not use inline hex values.
+
+```ts
+const THEME_COLORS = {
+  red: "#ef4444",
+  green: "#22c55e",
+  neutral: "#6366f1",
+} as const;
+
+type ChartTheme = keyof typeof THEME_COLORS;
+```
+
+---
+
+## Line chart component
+
+Create at `components/LineChart.tsx` (or colocate with the page):
+
+```tsx
+import React from "react";
+import {
+  LineChart as RechartsLineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from "recharts";
+
+const THEME_COLORS = {
+  red: "#ef4444",
+  green: "#22c55e",
+  neutral: "#6366f1",
+} as const;
+
+type ChartTheme = keyof typeof THEME_COLORS;
+
+interface TimeSeriesDataPoint {
+  x: string;
+  y: number;
+}
+
+interface TimeSeriesChartProps {
+  data: TimeSeriesDataPoint[];
+  theme?: ChartTheme;
+  title?: string;
+  className?: string;
+}
+
+export function TimeSeriesChart({
+  data,
+  theme = "neutral",
+  title,
+  className = "",
+}: TimeSeriesChartProps) {
+  if (data.length === 0) {
+    return <p className="text-muted-foreground text-center py-8">No data to display</p>;
+  }
+
+  const color = THEME_COLORS[theme];
+
+  return (
+    <div className={className}>
+      {title && (
+        <h3 className="text-sm font-medium text-primary mb-2 uppercase tracking-wide">
+          {title}
+        </h3>
+      )}
+      <ResponsiveContainer width="100%" height={300}>
+        <RechartsLineChart data={data}>
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis dataKey="x" />
+          <YAxis />
+          <Tooltip />
+          <Legend />
+          <Line type="monotone" dataKey="y" stroke={color} strokeWidth={2} dot={false} />
+        </RechartsLineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+```
+
+---
+
+## Bar chart component
+
+Create at `components/BarChart.tsx` (or colocate with the page):
+
+```tsx
+import React from "react";
+import {
+  BarChart as RechartsBarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from "recharts";
+
+const THEME_COLORS = {
+  red: "#ef4444",
+  green: "#22c55e",
+  neutral: "#6366f1",
+} as const;
+
+type ChartTheme = keyof typeof THEME_COLORS;
+
+interface CategoricalDataPoint {
+  name: string;
+  value: number;
+}
+
+interface CategoricalChartProps {
+  data: CategoricalDataPoint[];
+  theme?: ChartTheme;
+  title?: string;
+  className?: string;
+}
+
+export function CategoricalChart({
+  data,
+  theme = "neutral",
+  title,
+  className = "",
+}: CategoricalChartProps) {
+  if (data.length === 0) {
+    return <p className="text-muted-foreground text-center py-8">No data to display</p>;
+  }
+
+  const color = THEME_COLORS[theme];
+
+  return (
+    <div className={className}>
+      {title && (
+        <h3 className="text-sm font-medium text-primary mb-2 uppercase tracking-wide">
+          {title}
+        </h3>
+      )}
+      <ResponsiveContainer width="100%" height={300}>
+        <RechartsBarChart data={data}>
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis dataKey="name" />
+          <YAxis />
+          <Tooltip />
+          <Legend />
+          <Bar dataKey="value" fill={color} radius={[4, 4, 0, 0]} />
+        </RechartsBarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+```
+
+---
+
+## Area chart variant
+
+For a filled area chart (useful for volume-over-time), swap `Line` for `Area`:
+
+```tsx
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
+
+<ResponsiveContainer width="100%" height={300}>
+  <AreaChart data={data}>
+    <CartesianGrid strokeDasharray="3 3" />
+    <XAxis dataKey="x" />
+    <YAxis />
+    <Tooltip />
+    <Area type="monotone" dataKey="y" stroke={color} fill={color} fillOpacity={0.2} />
+  </AreaChart>
+</ResponsiveContainer>
+```
+
+---
+
+## Chart container wrapper
+
+Wrap any chart in a styled card for consistent spacing:
+
+```tsx
+import { Card } from "@/components/ui/card";
+
+interface ChartContainerProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function ChartContainer({ children, className = "" }: ChartContainerProps) {
+  return (
+    <Card className={`p-4 border-gray-200 shadow-sm ${className}`}>
+      {children}
+    </Card>
+  );
+}
+```
+
+Usage:
+
+```tsx
+<ChartContainer>
+  <TimeSeriesChart data={monthlyData} theme="green" title="Monthly Revenue" />
+</ChartContainer>
+```
+
+---
+
+## Preparing raw data
+
+Map API responses to the expected shape before passing to the chart:
+
+```tsx
+const timeSeriesData = useMemo(
+  () => apiRecords.map((r) => ({ x: r.date, y: r.revenue })),
+  [apiRecords],
+);
+
+const categoricalData = useMemo(
+  () => apiRecords.map((r) => ({ name: r.product, value: r.sales })),
+  [apiRecords],
+);
+```
+
+---
+
+## Key Recharts concepts
+
+| Component | Purpose |
+|-----------|---------|
+| `ResponsiveContainer` | Wraps chart to fill parent width |
+| `CartesianGrid` | Background grid lines |
+| `XAxis` / `YAxis` | Axis labels; `dataKey` maps to the data field |
+| `Tooltip` | Hover info |
+| `Legend` | Series labels |
+| `Line` | Line series; `type="monotone"` for smooth curves |
+| `Bar` | Bar series; `radius` rounds top corners |
+| `Area` | Filled area; `fillOpacity` controls transparency |
+
+---
+
+## Accessibility
+
+- Always include a text legend (not just colors).
+- Chart should be wrapped in a section with a visible heading.
+- For critical data, provide a text summary or table alternative.
+- Use sufficient color contrast between the chart stroke/fill and background.
+- Consider `prefers-reduced-motion` for chart animations.
+
+---
+
+## Common mistakes
+
+| Mistake | Fix |
+|---------|-----|
+| Missing `ResponsiveContainer` | Chart won't resize; always wrap |
+| Fixed width/height on chart | Let `ResponsiveContainer` control sizing |
+| No empty-data handling | Show "No data" message when `data.length === 0` |
+| Inline colors | Extract to `THEME_COLORS` constant |
+| Using raw Recharts for every chart type | Use `DonutChart` (see `donut-chart.md`) for pie/donut |

package/dist/.a4drules/skills/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 **`building-analytics-charts`** skill for usage.
+For **bar charts** and **line / area charts**, see `bar-line-chart.md` in this directory.
 
 ---
 

package/dist/.a4drules/skills/building-react-components/SKILL.md

@@ -68,13 +68,29 @@ Once you have identified the type and gathered answers to the clarifying questio
 
 ---
 
-## Verification
+## TypeScript Standards
+
+- **Never use `any`** — use proper types, generics, or `unknown` with type guards.
+- **Event handlers:** `(event: React.FormEvent<HTMLFormElement>): void`
+- **State:** `useState<User | null>(null)` — always provide the type parameter.
+- **No unsafe assertions** (`obj as User`). Use type guards:
+  ```typescript
+  function isUser(obj: unknown): obj is User {
+    return typeof obj === 'object' && obj !== null && typeof (obj as User).id === 'string';
+  }
+  ```
 
-Before completing, run from the web app directory `force-app/main/default/webapplications/<appName>/` (use the actual app folder name):
+---
+
+## Verification (MANDATORY)
+
+Before completing, run from the web app directory `force-app/main/default/webapplications/<appName>/`:
 
 ```bash
 cd force-app/main/default/webapplications/<appName> && npm run lint && npm run build
 ```
 
-- **Lint:** MUST result in 0 errors. Fix any ESLint or TypeScript issues.
-- **Build:** MUST succeed. Resolve any compilation or Vite build failures before finishing.
+- **Lint:** MUST result in 0 errors.
+- **Build:** MUST succeed (includes TypeScript check).
+
+If either fails, fix the errors and re-run. Do not leave the session with failing quality gates.

package/dist/.a4drules/skills/creating-webapp/SKILL.md

@@ -11,7 +11,10 @@ paths:
 
 # Skills-First (MUST FOLLOW)
 
-**Before writing any code or running any command**, search for relevant skills (`SKILL.md` files) that cover your task. Read the full skill and follow its instructions. Skills live in `.a4drules/skills/` and `feature/*/skills/`. See **webapp-skills-first.md** for the full protocol and a task-to-skill lookup table.
+**Before writing any code or running any command**, search for relevant skills (`SKILL.md` files) that cover your task. Read the full skill and follow its instructions. Skills live in `.a4drules/skills/` and `feature/*/skills/`.
+
+- Do not write custom scripts or complex bash commands for a workflow already covered by a loaded skill.
+- Only proceed with manual execution after confirming no relevant skill exists.
 
 # Deployment Order (MUST FOLLOW)
 
@@ -91,6 +94,25 @@ Agents consistently miss these. **You must not leave them default.**
 | Root page content   | Component at root route (often `Home` in `routes.tsx`)               |
 
 
+# React & TypeScript Constraints
+
+## Routing (React Router)
+
+Use a **single** router package. When using `createBrowserRouter` / `RouterProvider`, all imports MUST come from **`react-router`** — not `react-router-dom`.
+
+## Component Library + Styling
+
+- **shadcn/ui** for components: `import { Button } from '@/components/ui/button';`
+- **Tailwind CSS** utility classes
+
+## URL & Path Handling
+
+Apps run behind dynamic base paths. Router navigation (`<Link to>`, `navigate()`) prefer absolute paths (`/x`). Non-router attributes (`<img src>`) use dot-relative (`./x`) to resolve against `<base>`. Prefer Vite `import` for static assets.
+
+## Module Restrictions
+
+React apps must NOT import Salesforce platform modules like `lightning/*` or `@wire` (LWC-only). For data access, invoke the **accessing-data** skill.
+
 # Frontend Aesthetics
 
 **Avoid AI slop.** Make creative, distinctive frontends:

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

@@ -1,11 +1,11 @@
 ---
 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.
+description: Search, describe, and install pre-built UI features (authentication, shadcn components, navigation, 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.
 ---
 
 # webapps-features-experimental CLI — Agent Reference
 
-**Always check for an existing feature before building something yourself.** This CLI installs pre-built, tested feature packages into Salesforce webapps. Features range from foundational UI component libraries (shadcn/ui with Button, Card, Input, Table, etc.) to full-stack application capabilities like authentication (login, registration, password flows, session management, and Apex backend classes), global search, navigation menus, data visualization charts, GraphQL integrations, and Agentforce AI conversation UIs. Each feature ships as a complete implementation — including React components, context providers, route guards, and any required Salesforce server-side code — that already handles platform-specific concerns like Salesforce API integration, session management, and SFDX metadata structure. Building these from scratch is error-prone and unnecessary when a feature exists. **If no existing feature is found, ask the user before proceeding with a custom implementation — a relevant feature may exist under a different name or keyword.**
+**Always check for an existing feature before building something yourself.** This CLI installs pre-built, tested feature packages into Salesforce webapps. Features range from foundational UI component libraries (shadcn/ui with Button, Card, Input, Table, etc.) to full-stack application capabilities like authentication (login, registration, password flows, session management, and Apex backend classes), global search, navigation menus, GraphQL integrations, and Agentforce AI conversation UIs. Each feature ships as a complete implementation — including React components, context providers, route guards, and any required Salesforce server-side code — that already handles platform-specific concerns like Salesforce API integration, session management, and SFDX metadata structure. Building these from scratch is error-prone and unnecessary when a feature exists. **If no existing feature is found, ask the user before proceeding with a custom implementation — a relevant feature may exist under a different name or keyword.**
 
 ```
 npx @salesforce/webapps-features-experimental <command> [options]

package/dist/AGENT.md

@@ -54,10 +54,12 @@ cd <sfdx-source>/webapplications/<appName>
 
 **Before finishing changes:** run `npm run build` and `npm run lint` from the web app directory; both must succeed.
 
-## Agent rules (.a4drules)
+## Agent skills (.a4drules/skills/)
 
-This project includes **.a4drules/** at the project root. Follow them when generating or editing code.
+This project includes **.a4drules/skills/** at the project root. Follow them when generating or editing code.
 
+- **Creating Webapp** (`.a4drules/skills/creating-webapp/`): First steps, skills-first protocol, React/TypeScript constraints, deployment order, navigation, aesthetics, and code quality.
+- **Building React Components** (`.a4drules/skills/building-react-components/`): Component/page/header-footer workflow, TypeScript standards, and mandatory lint+build verification.
 - **Accessing Data** (`.a4drules/skills/accessing-data/`): Use for all Salesforce data fetches. Enforces Data SDK usage (`createDataSDK()` + `sdk.graphql` or `sdk.fetch`); GraphQL preferred, fetch when GraphQL is not sufficient.
 - **Fetching REST API** (`.a4drules/skills/fetching-rest-api/`): Use when implementing Chatter, Connect REST, Apex REST, UI API REST, or Einstein LLM calls via `sdk.fetch`.
 - **Using GraphQL** (`.a4drules/skills/using-graphql/`): Use when implementing Salesforce GraphQL queries or mutations. Sub-skills: `exploring-graphql-schema`, `generating-graphql-read-query`, `generating-graphql-mutation-query`.

package/dist/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.109.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.109.0...v1.109.1) (2026-03-18)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
 # [1.109.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.108.1...v1.109.0) (2026-03-18)
 
 **Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental

package/dist/force-app/main/default/webapplications/feature-react-file-upload/package.json

@@ -15,8 +15,8 @@
     "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
-    "@salesforce/sdk-data": "^1.109.0",
-    "@salesforce/webapp-experimental": "^1.109.0",
+    "@salesforce/sdk-data": "^1.109.1",
+    "@salesforce/webapp-experimental": "^1.109.1",
     "@tailwindcss/vite": "^4.1.17",
     "@tanstack/react-form": "^1.28.5",
     "class-variance-authority": "^0.7.1",
@@ -42,7 +42,7 @@
     "@graphql-eslint/eslint-plugin": "^4.1.0",
     "@graphql-tools/utils": "^11.0.0",
     "@playwright/test": "^1.49.0",
-    "@salesforce/vite-plugin-webapp-experimental": "^1.109.0",
+    "@salesforce/vite-plugin-webapp-experimental": "^1.109.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",

package/dist/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-  "version": "1.109.0",
+  "version": "1.109.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-      "version": "1.109.0",
+      "version": "1.109.1",
       "license": "SEE LICENSE IN LICENSE.txt",
       "devDependencies": {
         "@lwc/eslint-plugin-lwc": "^3.3.0",

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-  "version": "1.109.0",
+  "version": "1.109.1",
   "description": "Base SFDX project template",
   "license": "SEE LICENSE IN LICENSE.txt",
   "publishConfig": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-feature-react-file-upload-experimental",
-  "version": "1.109.0",
+  "version": "1.109.1",
   "description": "File upload feature with a component to upload files to core",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",
@@ -41,7 +41,7 @@
     }
   },
   "devDependencies": {
-    "@salesforce/webapp-experimental": "^1.109.0",
+    "@salesforce/webapp-experimental": "^1.109.1",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "nodemon": "^3.1.0",

package/dist/.a4drules/features/feature-react-agentforce-conversation-client-embedded-agent-rule.md

@@ -1,42 +0,0 @@
----
-paths:
-  - "**/*.tsx"
-  - "**/components/**/*.ts"
----
-
-# Agentforce Conversation Client (standards)
-
-## DO NOT build a chat UI from scratch
-
-When the user asks for a chat UI, chat widget, chatbot, agent, or conversational interface — **always use the existing `AgentforceConversationClient` component**. Never generate custom chat implementations, third-party chat libraries, WebSocket/REST chat, or direct calls to `embedAgentforceClient`.
-
-## NEVER edit implementation files
-
-**CRITICAL: Only edit files where AgentforceConversationClient is USED, never the component implementation itself.**
-
-❌ **DO NOT edit**: `AgentforceConversationClient.tsx`, `index.tsx`, or any files in:
-
-- `node_modules/@salesforce/webapp-template-feature-react-agentforce-conversation-client-experimental/`
-- `packages/template/feature/feature-react-agentforce-conversation-client/src/`
-- `src/components/AgentforceConversationClient.tsx` (patched templates)
-
-If you're reading a file named `AgentforceConversationClient.tsx`, stop and search for the USAGE instead.
-
-## Invalid Props
-
-AgentforceConversationClient does NOT accept:
-
-- ❌ `containerStyle` - Use `width`/`height` props directly instead
-- ❌ `style` - Use `styleTokens` prop for theming
-- ❌ `className` - Not supported
-
-## Styling
-
-**For ANY styling, theming, branding, or color changes - ONLY use `styleTokens` prop.**
-
-NEVER use: CSS files, `<style>` tags, `className`, inline styles, CSS modules, or CSS-in-JS libraries.
-
-## Hard Constraints
-
-- **`agentId` is required** - Always ask the user for their agent ID before proceeding
-- **Use the React wrapper only** - Never call `embedAgentforceClient` directly

package/dist/.a4drules/features/feature-react-chart-analytics-charts-rule.md

@@ -1,27 +0,0 @@
----
-paths:
-  - "**/*.tsx"
-  - "**/components/**/*.ts"
----
-
-# Analytics charts (standards)
-
-When adding or editing chart UI in this project, follow these conventions.
-
-## Components and library
-
-- Use the shared **AnalyticsChart** component (and **ChartContainer** when a framed block is needed). Do not use raw Recharts components for standard line or bar charts.
-- The project must have **recharts** installed (`npm install recharts`).
-
-## Data shape
-
-- **Time-series** (line): data must be an array of `{ x: string, y: number }`. Map raw fields (e.g. `date`, `value`) to these keys before passing to the chart.
-- **Categorical** (bar): data must be an array of `{ name: string, value: number }`. Map raw fields (e.g. `category`, `total`) accordingly.
-
-## Theming
-
-- Use only the **theme** prop on AnalyticsChart: `red` (decline/loss), `green` (growth/gain), `neutral` (default or mixed). Do not introduce ad-hoc color schemes for these semantics.
-
-## Placement
-
-- Render charts inside the existing application frame (e.g. main content or a route). Do not replace the full app shell with a single chart.

package/dist/.a4drules/skills/building-analytics-charts/SKILL.md

@@ -1,41 +0,0 @@
----
-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.
----
-
-# Analytics charts (workflow)
-
-When the user wants a chart or visualization from data, follow this workflow. Charts use **Recharts** via the **AnalyticsChart** component.
-
-## Dependencies
-
-Ensure the following package is installed in the project:
-
-```bash
-npm install recharts
-```
-
-## 1. Interpret data type
-
-- **Time-series**: data over time or ordered (dates, timestamps). Use a line chart. Raw shape often has date-like keys and a numeric value.
-- **Categorical**: data by category (labels, segments). Use a bar chart. Raw shape often has a category name and a numeric value.
-
-If the user says "over time", "trend", or uses date-like keys → time-series. If they say "by category", "by X", or use label-like keys → categorical.
-
-## 2. Map data to chart shape
-
-- **Time-series**: produce `[{ x: string, y: number }, ...]` (e.g. map `date`→`x`, `value`→`y`).
-- **Categorical**: produce `[{ name: string, value: number }, ...]` (e.g. map `category`→`name`, `total`→`value`).
-
-See [schema-mapping.md](docs/schema-mapping.md) for examples.
-
-## 3. Choose theme
-
-- **red**: declining, loss, negative trend.
-- **green**: growth, gain, positive trend.
-- **neutral**: default or mixed.
-
-## 4. Generate and place the chart
-
-- Use **AnalyticsChart** with `chartType` (`"time-series"` or `"categorical"`), `data` (mapped array), `theme`, and optional `title`. Wrap in **ChartContainer** if the app uses it for chart blocks.
-- Insert the chart inside the existing app (e.g. main content or a route), not as the entire page.

package/dist/.a4drules/skills/building-analytics-charts/docs/schema-mapping.md

@@ -1,4 +0,0 @@
-# Schema mapping (Recharts)
-
-- **Time-series**: `{ x: string, y: number }` — e.g. map `date`→`x`, `value`→`y`.
-- **Categorical**: `{ name: string, value: number }` — e.g. map `category`→`name`, `total`→`value`.

package/dist/.a4drules/webapp-code-quality.md

@@ -1,31 +0,0 @@
----
-description: Code quality and build validation standards
-paths:
-  - "**/webapplications/**/*"
----
-
-# Code Quality & Build Validation
-
-Enforces ESLint, TypeScript, and build validation for consistent, maintainable code.
-
-## MANDATORY Quality Gates
-
-**Before completing any coding session** (from the web app directory `force-app/main/default/webapplications/<appName>/`):
-
-```bash
-npm run lint   # MUST result in 0 errors
-npm run build  # MUST succeed (includes TypeScript check)
-```
-
-**Must Pass:**
-- `npm run build` completes successfully
-- No TypeScript compilation errors
-- No critical ESLint errors (0 errors)
-
-**Can Be Warnings:**
-- ESLint warnings (fix when convenient)
-- Minor TypeScript warnings
-
-## When Failures Occur
-
-If `npm run lint` or `npm run build` fails, the agent **must** attempt to resolve the issues and retry. Do not leave the session with failing quality gates. Fix the reported errors (TypeScript, ESLint), then re-run the failing command. Repeat until all steps pass.

package/dist/.a4drules/webapp-data-access.md

@@ -1,25 +0,0 @@
----
-description: Salesforce data access for web apps — when and how to use the accessing-data skill
-paths:
-  - "**/*"
----
-
-# Web App Data Access
-
-For all Salesforce data access from web apps (GraphQL, REST, Chatter, Connect, Apex REST, UI API, Einstein LLM), invoke the **`accessing-data`** skill (`.a4drules/skills/accessing-data/`). It enforces Data SDK usage (`createDataSDK()` + `sdk.graphql` or `sdk.fetch`), GraphQL-first preference, optional chaining, and documents when to use `sdk.fetch` via the `fetching-rest-api` skill.
-
-## Sub-skills
-
-- **GraphQL** — For queries and mutations, invoke the **`using-graphql`** skill (`.a4drules/skills/using-graphql/`). Covers schema exploration, query patterns, codegen, and type generation.
-- **REST / UI API** — When GraphQL cannot cover the use case, use `sdk.fetch?.()`. See the **`fetching-rest-api`** skill (`.a4drules/skills/fetching-rest-api/`) for Chatter, Connect REST, Apex REST, UI API REST, and Einstein LLM.
-
-## Clarifying Vague Data Requests
-
-When a user asks about data and the request is vague, **clarify before implementing**. Ask which of the following they want:
-
-- **Application code** — Add or modify code in a specific web app so the app performs the data interaction at runtime (e.g., GraphQL query in the React app)
-- **Local SF CLI** — Run Salesforce CLI commands locally (e.g., `sf data query`, `sf data import tree`) to interact with the org from the terminal
-- **Local example data** — Update or add local fixture/example data files (e.g., JSON in `data/`) for development or testing
-- **Other** — Data export, report generation, setup script, etc.
-
-Do not assume. A request like "fetch accounts" could mean: (1) add a GraphQL query to the app, (2) run `sf data query` in the terminal, or (3) update sample data files. Confirm the intent before proceeding.

package/dist/.a4drules/webapp-deployment.md

@@ -1,32 +0,0 @@
----
-description: Always invoke the deploying-to-salesforce skill for deployment, schema fetch, or org sync
-paths:
-  - "**/*"
----
-
-# Web App Deployment
-
-**This rule always applies.** Before running any deployment, schema fetch, codegen, or org sync command, you MUST invoke the **deploying-to-salesforce** skill (`.a4drules/skills/deploying-to-salesforce/SKILL.md`).
-
-## When to Invoke
-
-Invoke the skill whenever the task involves:
-
-- Deploying metadata (`sf project deploy start`)
-- Assigning permission sets, permission set groups, or profiles
-- Fetching GraphQL schema (`npm run graphql:schema`)
-- Running GraphQL codegen (`npm run graphql:codegen`)
-- Data import or cleaning existing records
-- Any command that touches the Salesforce org
-
-## Required Behavior
-
-1. **Read the skill first** — Open and read the full deploying-to-salesforce skill before executing deployment-related steps.
-2. **Follow the canonical sequence** — Execute steps in the exact order defined in the skill.
-3. **Evaluate before each step** — Use the skill's "Run when" / "Omit when" criteria; do not run steps blindly.
-4. **Proactive post-deploy actions** — After a successful deploy, the agent MUST either run or explicitly offer:
-   - **Permission set assignment:** Discover permsets in `force-app/main/default/permissionsets/` and assign each to the org (or ask: "Do you want me to assign the permission sets?")
-   - **Data import:** If `data/data-plan.json` exists, ask: "Do you want me to import the sample data now?" — never import without explicit user confirmation.
-5. **Ask before data operations** — Never import data or clean existing records without explicit user confirmation.
-
-Do not bypass this skill. It enforces the correct deployment order and prevents schema/codegen failures.

package/dist/.a4drules/webapp-react-typescript.md

@@ -1,43 +0,0 @@
----
-description: Strict TypeScript standards for type-safe React applications
-paths:
-  - "**/webapplications/**/*"
----
-
-## Type Safety Rules
-
-### Never Use `any`
-```typescript
-// FORBIDDEN
-const result: any = getSomething();
-```
-
-## React TypeScript Patterns
-
-### Event Handlers
-```typescript
-const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
-  event.preventDefault();
-};
-```
-
-### State and Hooks
-```typescript
-// Type useState properly
-const [user, setUser] = useState<User | null>(null);
-```
-
-### Type Assertions
-```typescript
-// FORBIDDEN: Unsafe assertions
-const user = obj as User;
-
-// REQUIRED: Type guards
-function isUser(obj: unknown): obj is User {
-  return typeof obj === 'object' && obj !== null && typeof (obj as User).id === 'string';
-}
-
-if (isUser(obj)) {
-  console.log(obj.name); // Now safely typed
-}
-```

package/dist/.a4drules/webapp-react.md

@@ -1,28 +0,0 @@
----
-description: React-specific patterns for SFDX web apps
-paths:
-  - "**/webapplications/**/*"
----
-
-# React Web App (SFDX)
-
-For layout, navigation, and generation rules, see **creating-webapp** (`.a4drules/skills/creating-webapp/SKILL.md`).
-
-## Deployment
-
-For deployment, schema fetch, codegen, or org sync, invoke the **`deploying-to-salesforce`** skill (`.a4drules/skills/deploying-to-salesforce/`).
-
-## Routing (React Router)
-
-Use a **single** router package for the app. When using `createBrowserRouter` and `RouterProvider` from `react-router`, all routing imports MUST come from **`react-router`** — not from `react-router-dom`.
-
-## Component Library + Styling (MANDATORY)
-
-- Use **shadcn/ui** for UI components: `import { Button } from '@/components/ui/button';`
-- Use **Tailwind CSS** utility classes
-
-## Module & Platform Restrictions
-
-React apps must NOT import Salesforce platform modules like `lightning/*` or `@wire` (LWC-only)
-
-For Salesforce data access, see **webapp-data-access** (`.a4drules/webapp-data-access.md`).

package/dist/.a4drules/webapp-skills-first.md

@@ -1,23 +0,0 @@
----
-description: Always search for and read relevant skills before starting any task
-paths:
-  - "**/webapplications/**/*"
----
-
-# Skills-First Protocol (MUST FOLLOW)
-
-**Before planning, executing any task, generating code, or running terminal commands**, you MUST explicitly check if an existing Skill is available to handle the request. Do not default to manual implementation if a specialized domain Skill exists.
-
-## Pre-Task Sequence
-1. **Skill Discovery:** Review the names and descriptions of all available/loaded Skills in your current context.
-2. **Match Analysis:** Evaluate if the user's current task aligns with any Skill's described use case (e.g., code reviews, PR generation, database migrations, specific framework debugging).
-3. **Explicit Declaration:** If a matching Skill is found, your first output MUST be:
-   > "Skill identified: [Skill Name]. Executing via Skill instructions..."
-   You must then strictly adhere to the instructions defined in that specific Skill.
-
-## Prohibited Actions
-* Do not write custom utility scripts or complex bash commands for a workflow that is already covered by a loaded Skill.
-* Do not bypass or ignore the loaded `SKILL.md` instructions if a relevant Skill is triggered.
-
-## Manual Fallback
-Only proceed with standard/manual execution if you have actively evaluated your available Skills and confirmed that no relevant Skill exists for the current prompt.