@salesforce/webapp-template-feature-react-agentforce-conversation-client-experimental 1.75.1 → 1.76.0

package/dist/.a4drules/skills/webapp-add-react-component/SKILL.md

@@ -0,0 +1,78 @@
+---
+name: webapp-add-react-component
+description: Creates React components, pages, headers, and footers using shadcn UI and Tailwind CSS. Use when the user asks to create a component, add a widget, build a UI element, add a page, create a new page, add a section (e.g. "add a contacts page"), add a header, add a footer, add a navigation bar, or add anything to the web application.
+---
+
+# Add React Component
+
+## Step 1 — Identify the type of component
+
+Determine which of these three categories the request falls into, then follow the corresponding section below:
+
+- **Page** — user wants a new routed page (e.g. "add a contacts page", "create a dashboard page", "add a settings section")
+- **Header / Footer** — user wants a site-wide header, footer, nav bar, or page footer that appears on every page
+- **Component** — everything else: a widget, card, table, form, dialog, or other UI element placed within an existing page
+
+If it is not immediately clear from the user's message, ask:
+
+> "Are you looking to add a new page, a site-wide header or footer, or a component within an existing page?"
+
+Then follow the matching section.
+
+---
+
+## Clarifying Questions
+
+Ask **one question at a time** and wait for the response before asking the next. Stop when you have enough to build accurately — do not guess or assume.
+
+### For a Page
+
+1. **What is the name and purpose of the page?** (e.g., Contacts, Dashboard, Settings)
+2. **What URL path should it use?** (e.g., `/contacts`, `/dashboard`) — or derive from the page name?
+3. **Should the page appear in the navigation menu?**
+4. **Who can access it?** Public, authenticated users only (`PrivateRoute`), or unauthenticated only (e.g., login — `AuthenticationRoute`)?
+5. **What content or sections should the page include?** (list, form, table, detail view, etc.)
+6. **Does it need to fetch any data?** If so, from where?
+
+### For a Header / Footer
+
+1. **Header, footer, or both?**
+2. **What should the header contain?** (logo/app name, nav links, user avatar, CTA button, etc.)
+3. **What should the footer contain?** (copyright text, links, social icons, etc.)
+4. **Should the header be sticky (fixed to top while scrolling)?**
+5. **Is there a logo or brand name to display?** (or placeholder?)
+6. **Any specific color scheme or style direction?** (dark background, branded primary color, minimal, etc.)
+7. **Should navigation links appear in the header?** If so, which pages?
+
+### For a Component
+
+1. **What should the component do?** (display data, accept input, trigger an action, etc.)
+2. **What page or location should it appear on?**
+3. **Is this shared/reusable across pages, or specific to one feature?** (determines file location)
+4. **What data or props does it need?** (static content, props, fetched data)
+5. **Does it need internal state?** (loading, toggle, form state, etc.)
+6. **Are there any specific shadcn components to use?** (Card, Table, Dialog, Form, etc.)
+7. **Should it appear in a specific layout position?** (full-width, sidebar, inline, etc.)
+
+---
+
+## Implementation
+
+Once you have identified the type and gathered answers to the clarifying questions, read and follow the corresponding implementation guide:
+
+- **Page** — read `implementation/page.md` and follow the instructions there.
+- **Header / Footer** — read `implementation/header-footer.md` and follow the instructions there.
+- **Component** — read `implementation/component.md` and follow the instructions there.
+
+---
+
+## Verification
+
+Before completing, run from the web app directory `force-app/main/default/webapplications/<appName>/` (use the actual app folder name):
+
+```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.

package/dist/.a4drules/skills/webapp-add-react-component/implementation/component.md

@@ -0,0 +1,78 @@
+# Implementation — Component
+
+### Rules
+
+1. **Always use shadcn components** from `@/components/ui` — never build raw HTML equivalents for buttons, inputs, cards, alerts, tabs, tables, or labels.
+2. **All styling via Tailwind** — utility classes only. No inline `style={{}}`, CSS Modules, or other styling systems.
+3. **Use design tokens** — prefer `bg-background`, `text-foreground`, `text-muted-foreground`, `border`, `bg-primary`, `text-destructive`, `rounded-lg` over hardcoded colors.
+4. **Use `cn()`** from `@/lib/utils` for conditional or composable class names.
+5. **TypeScript** — functional components with typed props interface; always accept `className?: string`.
+
+### File Location — Component
+
+| Component type                                 | Location                                 | Export                                   |
+| ---------------------------------------------- | ---------------------------------------- | ---------------------------------------- |
+| Shared UI primitive (reusable across features) | `src/components/ui/` — add to `index.ts` | Named export                             |
+| Feature-specific (e.g., dashboard widget)      | `src/components/<feature>/`              | Named export, import directly where used |
+| Page-level layout element                      | `src/components/layout/`                 | Named export                             |
+
+### Component Structure
+
+```tsx
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui";
+import { cn } from "@/lib/utils";
+
+interface MyComponentProps {
+  title: string;
+  value: string;
+  className?: string;
+}
+
+export function MyComponent({ title, value, className }: MyComponentProps) {
+  return (
+    <Card className={cn("border", className)}>
+      <CardHeader>
+        <CardTitle className="text-sm font-medium">{title}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p className="text-2xl font-semibold text-foreground">{value}</p>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+### State and Hooks
+
+- **Local state only:** keep `useState`, `useReducer`, `useRef` inside the component.
+- **Shared or complex state:** extract to a custom hook in `src/hooks/` (prefix with `use`, e.g. `useFormData`). Do this when more than one component needs the state, or when multiple hooks are composed together.
+
+### Adding the Component to a Page
+
+```tsx
+// In the target page file, e.g. src/pages/HomePage.tsx
+import { MyComponent } from "@/components/<feature>/MyComponent";
+
+export default function HomePage() {
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <MyComponent title="Status" value="Active" />
+    </div>
+  );
+}
+```
+
+### Useful Patterns — Component
+
+- **Programmatic navigation:** use `useNavigate` from `react-router`; call `navigate(path)` — consistent with GlobalSearchInput, SearchResultCard, MaintenanceTable, and other components in the web application.
+- **Page container:** `max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12`
+- **Icons:** `lucide-react`; add `aria-hidden="true"` on decorative icons
+- **Focus styles:** use `focus-visible:` variants
+- **Multiple visual variants:** use CVA (`cva`) and `VariantProps`
+- **shadcn import barrel:** `import { Button, Card, Input } from "@/components/ui"`
+
+### Confirm — Component
+
+- Imports use path aliases (`@/`, not deep relative paths)
+- No raw `<button>`, `<input>`, or styled `<div>` where shadcn equivalents exist
+- No inline `style={{}}` — Tailwind only

package/dist/.a4drules/skills/webapp-add-react-component/implementation/header-footer.md

@@ -0,0 +1,124 @@
+# Implementation — Header / Footer
+
+### Rules
+
+1. **Edit `appLayout.tsx` only** — header and footer are layout-level concerns. Never add them to individual page files.
+2. **Never modify `routes.tsx` or `app.tsx`** — the router setup must remain intact.
+3. **Create component files in `src/components/layout/`** — the designated location for layout-level components.
+4. **Use the full-height flex column pattern** — wrap layout in `min-h-screen flex flex-col` so footer stays at bottom.
+5. **Use shadcn and Tailwind** — compose from `@/components/ui`; style with Tailwind utility classes and design tokens.
+6. **Use path aliases** — import with `@/components/layout/...` and `@/components/ui`; no deep relative paths.
+7. **Preserve existing content** — if `appLayout.tsx` already has a `<NavigationMenu />` or other shell elements, keep them in place.
+
+### Step 1 — Create the header component (if requested)
+
+Create `src/components/layout/AppHeader.tsx`:
+
+```tsx
+import { cn } from "@/lib/utils";
+
+interface AppHeaderProps {
+  className?: string;
+}
+
+export function AppHeader({ className }: AppHeaderProps) {
+  return (
+    <header
+      className={cn(
+        "w-full border-b bg-background px-4 sm:px-6 lg:px-8 py-4",
+        className,
+      )}
+    >
+      <div className="max-w-7xl mx-auto flex items-center justify-between">
+        <span className="text-lg font-semibold text-foreground">My App</span>
+      </div>
+    </header>
+  );
+}
+```
+
+### Step 2 — Create the footer component (if requested)
+
+Create `src/components/layout/AppFooter.tsx`:
+
+```tsx
+import { cn } from "@/lib/utils";
+
+interface AppFooterProps {
+  className?: string;
+}
+
+export function AppFooter({ className }: AppFooterProps) {
+  return (
+    <footer
+      className={cn(
+        "w-full border-t bg-background px-4 sm:px-6 lg:px-8 py-4",
+        className,
+      )}
+    >
+      <div className="max-w-7xl mx-auto text-center text-sm text-muted-foreground">
+        &copy; {new Date().getFullYear()} My App. All rights reserved.
+      </div>
+    </footer>
+  );
+}
+```
+
+### Step 3 — Edit `appLayout.tsx`
+
+Open `src/appLayout.tsx` — this is the **only file to modify** for layout-level additions. Wrap existing content in a flex column and add header above and footer below `<Outlet />`:
+
+```tsx
+import { Outlet } from "react-router";
+import { AppHeader } from "@/components/layout/AppHeader";
+import { AppFooter } from "@/components/layout/AppFooter";
+// Keep all existing imports unchanged
+
+export default function AppLayout() {
+  return (
+    <div className="min-h-screen flex flex-col bg-background">
+      <AppHeader />
+      {/* Keep any existing NavigationMenu or other shell elements here */}
+      <main className="flex-1">
+        <Outlet />
+      </main>
+      <AppFooter />
+    </div>
+  );
+}
+```
+
+### File Locations — Header / Footer
+
+| Component    | File                                  | Export                         |
+| ------------ | ------------------------------------- | ------------------------------ |
+| Header       | `src/components/layout/AppHeader.tsx` | Named export                   |
+| Footer       | `src/components/layout/AppFooter.tsx` | Named export                   |
+| Layout shell | `src/appLayout.tsx`                   | Default export (edit in place) |
+
+### Why `appLayout.tsx` — Not Pages or Routes
+
+`AppLayout` is the single shell rendered at the root route. Every page is a child rendered via `<Outlet />`. Placing the header and footer here ensures they appear on every page without touching individual pages or the route registry.
+
+```
+AppLayout (appLayout.tsx)
+├── AppHeader          ← renders on every page
+├── NavigationMenu     ← keep if already present
+├── <Outlet />         ← active page renders here
+└── AppFooter          ← renders on every page
+```
+
+### Useful Patterns — Header / Footer
+
+- **Sticky header:** add `sticky top-0 z-50` to the `<header>` element
+- **Separator:** use `<Separator />` from `@/components/ui` instead of `border-b`/`border-t` if a visible divider is preferred
+- **Nav links in header:** use `<Button variant="ghost" asChild>` wrapping a React Router `<Link>`
+- **Icons:** `lucide-react`; add `aria-hidden="true"` on decorative icons
+- **Design tokens:** `bg-background`, `text-foreground`, `text-muted-foreground`, `border`, `bg-primary`
+
+### Confirm — Header / Footer
+
+- Header and footer appear on every page (navigate to at least two routes)
+- Imports use path aliases (`@/components/layout/...`)
+- No inline `style={{}}` — Tailwind only
+- `src/routes.tsx` and `src/app.tsx` are unchanged

package/dist/.a4drules/skills/webapp-add-react-component/implementation/page.md

@@ -0,0 +1,92 @@
+# Implementation — Page
+
+### Rules
+
+1. **`routes.tsx` is the only route registry** — never add routes in `app.tsx` or inside page files.
+2. **All pages are children of the AppLayout route** — do not create top-level routes that bypass the layout shell.
+3. **Default export per page** — each page file has exactly one default-export component.
+4. **Path aliases in all imports** — use `@/pages/...`, `@/components/...`; no deep relative paths.
+5. **No inline styles** — Tailwind utility classes and design tokens only.
+6. **Catch-all last** — `path: '*'` (NotFound) must always remain the last child in the layout route.
+7. **Never modify `appLayout.tsx`** when adding a page — layout changes are a separate concern.
+
+### Step 1 — Create the page file
+
+Create `src/pages/MyPage.tsx` with a **default export** and the standard page container:
+
+```tsx
+export default function MyPage() {
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <h1 className="text-3xl font-bold text-foreground">My Page</h1>
+      <p className="mt-4 text-muted-foreground">Page content goes here.</p>
+    </div>
+  );
+}
+```
+
+Use shadcn components from `@/components/ui` for UI elements. All styling via Tailwind — no inline `style={{}}`.
+
+### Step 2 — Register the route in `routes.tsx`
+
+Open `src/routes.tsx`. Import the page and add it inside the layout route's `children` array:
+
+```tsx
+import MyPage from "@/pages/MyPage";
+
+// Inside the layout route's children array (before the catch-all):
+{
+  path: "my-page",
+  element: <MyPage />,
+  handle: { showInNavigation: true, label: "My Page" },
+},
+```
+
+- `path` is a **relative segment** (e.g., `"contacts"`), not an absolute path.
+- Include `handle: { showInNavigation: true, label: "Label" }` only if the page should appear in the navigation menu.
+- The catch-all `path: '*'` must stay **last**.
+
+### Step 3 — Apply an auth guard (if needed)
+
+| Access type                        | Guard                   | Behavior                                |
+| ---------------------------------- | ----------------------- | --------------------------------------- |
+| Public                             | None                    | Direct child of layout                  |
+| Authenticated only                 | `<PrivateRoute>`        | Redirects to login if not authenticated |
+| Unauthenticated only (e.g., login) | `<AuthenticationRoute>` | Redirects away if already authenticated |
+
+Example — private page:
+
+```tsx
+import { PrivateRoute } from "@/components/auth/private-route";
+
+{
+  path: "settings",
+  element: <PrivateRoute><SettingsPage /></PrivateRoute>,
+  handle: { showInNavigation: true, label: "Settings" },
+},
+```
+
+Use `ROUTES.*` constants from `@/utils/authenticationConfig` for auth-related paths — do not hardcode `/login`, `/profile`, etc.
+
+### File Conventions — Page
+
+| Concern           | Location                                               |
+| ----------------- | ------------------------------------------------------ |
+| Page component    | `src/pages/<PageName>.tsx` (default export)            |
+| Route definition  | `src/routes.tsx` only                                  |
+| Layout shell      | `src/appLayout.tsx` — do not modify for page additions |
+| Auth config paths | `ROUTES.*` from `@/utils/authenticationConfig`         |
+
+### State and Data
+
+- **Local state:** `useState`, `useReducer`, `useRef` inside the page component
+- **Shared or complex state:** extract to `src/hooks/` with a `use` prefix (e.g., `useContacts`)
+- **Data fetching:** prefer GraphQL (`executeGraphQL`) or REST utilities in `src/api/`; place shared data logic in `src/hooks/`
+- **Auth context:** `useAuth()` from `@/context/AuthContext` when current user is needed — only valid under `AuthProvider`
+
+### Confirm — Page
+
+- The page renders inside the app shell (header/nav visible)
+- If `showInNavigation: true`, the link appears in the navigation menu
+- No TypeScript errors; no broken imports; no missing exports
+- Imports use path aliases (`@/`, not deep relative paths)

package/dist/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.76.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.75.1...v1.76.0) (2026-03-06)
+
+
+### Features
+
+* (template) add skills for base-app ([#208](https://github.com/salesforce-experience-platform-emu/webapps/issues/208)) ([dd5f7c5](https://github.com/salesforce-experience-platform-emu/webapps/commit/dd5f7c59b0d711cade589620c434836f016c5417))
+
+
+
+
+
 ## [1.75.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.75.0...v1.75.1) (2026-03-05)
 
 **Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental

package/dist/force-app/main/default/webapplications/feature-react-agentforce-conversation-client/package.json

@@ -15,9 +15,9 @@
     "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
-    "@salesforce/agentforce-conversation-client": "^1.75.1",
-    "@salesforce/sdk-data": "^1.75.1",
-    "@salesforce/webapp-experimental": "^1.75.1",
+    "@salesforce/agentforce-conversation-client": "^1.76.0",
+    "@salesforce/sdk-data": "^1.76.0",
+    "@salesforce/webapp-experimental": "^1.76.0",
     "@tailwindcss/vite": "^4.1.17",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -39,7 +39,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.75.1",
+    "@salesforce/vite-plugin-webapp-experimental": "^1.76.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-  "version": "1.75.1",
+  "version": "1.76.0",
   "description": "Base SFDX project template",
   "private": true,
   "files": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-feature-react-agentforce-conversation-client-experimental",
-  "version": "1.75.1",
+  "version": "1.76.0",
   "description": "Embedded Agentforce conversation client feature for web applications",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",
@@ -27,7 +27,7 @@
     "clean": "rm -rf dist"
   },
   "dependencies": {
-    "@salesforce/agentforce-conversation-client": "^1.75.1"
+    "@salesforce/agentforce-conversation-client": "^1.76.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.7",