@salesforce/webapp-template-app-react-sample-b2e-experimental 1.61.3 → 1.62.0

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

@@ -0,0 +1,136 @@
+---
+description: Code quality and build validation standards
+paths:
+  - "force-app/main/default/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)
+```
+
+## Requirements
+
+**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
+
+## Key Commands
+
+```bash
+npm run dev    # Start development server (vite)
+npm run lint   # Run ESLint
+npm run build  # TypeScript + Vite build; check deployment readiness
+```
+
+## Error Priority
+
+**Fix Immediately:**
+- TypeScript compilation errors
+- Import/export errors
+- Syntax errors
+
+**Fix When Convenient:**
+- ESLint warnings
+- Unused variables
+
+## Import Order (MANDATORY)
+
+```typescript
+// 1. React ecosystem
+import { useState, useEffect } from 'react';
+
+// 2. External libraries (alphabetical)
+import clsx from 'clsx';
+
+// 3. UI components (alphabetical)
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+
+// 4. Internal utilities (alphabetical)
+import { useAuth } from '../hooks/useAuth';
+import { formatDate } from '../utils/dateUtils';
+
+// 5. Relative imports
+import { ComponentA } from './ComponentA';
+
+// 6. Type imports (separate, at end)
+import type { User, ApiResponse } from '../types';
+```
+
+## Naming Conventions
+
+```typescript
+// PascalCase: Components, classes
+const UserProfile = () => {};
+
+// camelCase: Variables, functions, properties
+const userName = 'john';
+const fetchUserData = async () => {};
+
+// SCREAMING_SNAKE_CASE: Constants
+const API_BASE_URL = 'https://api.example.com';
+
+// kebab-case: Files
+// user-profile.tsx, api-client.ts
+```
+
+## React Component Structure
+
+```typescript
+interface ComponentProps {
+  // Props interface first
+}
+
+const Component: React.FC<ComponentProps> = ({ prop1, prop2 }) => {
+  // 1. Hooks
+  // 2. Computed values
+  // 3. Event handlers
+  // 4. JSX return
+
+  return <div />;
+};
+
+export default Component;
+```
+
+## Anti-Patterns (FORBIDDEN)
+
+```typescript
+// NEVER disable ESLint without justification
+// eslint-disable-next-line
+
+// NEVER mutate state directly
+state.items.push(newItem); // Wrong
+setItems(prev => [...prev, newItem]); // Correct
+
+// NEVER use magic numbers/strings
+setTimeout(() => {}, 5000); // Wrong
+const DEBOUNCE_DELAY = 5000; // Correct
+```
+
+## Troubleshooting
+
+**Import Errors:**
+```bash
+npm install  # Check missing dependencies
+# Verify: file exists, case sensitivity, export/import match
+```
+
+**Build Failures:**
+1. Run `npm run lint` to identify issues
+2. Fix TypeScript/ESLint errors
+3. Retry `npm run build`

package/dist/.a4drules/{images.md → webapp-images.md}

@@ -1,8 +1,10 @@
-# Rule: Images
+---
+description: Image handling rules - Unsplash default, CSP compliance, accessibility
+paths:
+  - "force-app/main/default/webapplications/**/*"
+---
 
-**Description:** Image rules for React web apps (SFDX): default to Unsplash, CSP compliance, and accessibility. Ensures Unsplash is used as the default image source unless the developer provides their own.
-
-**Applies to:** `force-app/main/default/webapplications/*/**/*.{js,jsx,ts,tsx,css,html}`
+# Images
 
 **Guidelines:**
 - Default to Unsplash when the user does not specify an image source; it is pre-configured in CSP and works in Salesforce without extra setup.

package/dist/.a4drules/webapp-no-node-e.md

@@ -1,6 +1,7 @@
 ---
-description: A4D rule — no node -e; use replace_in_file / write_to_file only
-alwaysApply: true
+description: No node -e - use replace_in_file or write_to_file only
+paths:
+  - "force-app/main/default/webapplications/**/*"
 ---
 
 # A4D Enforcement: No node -e

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

@@ -0,0 +1,149 @@
+---
+description: React-specific patterns and Salesforce data access for SFDX web apps
+paths:
+  - "force-app/main/default/webapplications/**/*"
+---
+
+# React Web App (SFDX)
+
+React-specific guidelines for data access, component library, and Salesforce integration.
+
+For layout, navigation, and generation rules, see **webapp.md**.
+
+## Project Structure
+
+- Web app root: `force-app/main/default/webapplications/<appName>/`
+- Entry: `src/app.tsx`
+- Layout shell: `src/appLayout.tsx`
+- Dev server: `npm run dev`
+- Build: `npm run build`
+
+## Component Library (MANDATORY)
+
+Use **shadcn/ui** for UI components:
+
+```typescript
+import { Button } from '@/components/ui/button';
+import { Card, CardHeader, CardContent } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+```
+
+## Styling
+
+- Use **Tailwind CSS** utility classes
+- Follow consistent spacing, color, and typography conventions
+
+## Module & Platform Restrictions
+
+React apps must NOT import Salesforce platform modules:
+
+- ❌ `@salesforce/*` (except `@salesforce/sdk-data`)
+- ❌ `lightning/*`
+- ❌ `@wire` (LWC-only)
+
+Use standard web APIs and npm packages only.
+
+## Data Access (CRITICAL)
+
+### Use DataSDK for All Salesforce API Calls
+
+```typescript
+import { getDataSDK } from '@salesforce/sdk-data';
+
+const sdk = await getDataSDK();
+// Use sdk.graphql?.() or sdk.fetch!() for API calls
+```
+
+Do NOT use `axios` or raw `fetch` for Salesforce APIs. The SDK handles authentication and CSRF.
+
+### Data Access Priority
+
+1. **GraphQL** (preferred) — queries & mutations via `sdk.graphql?.()`
+2. **UI API** — via `sdk.fetch!()` for `/services/data/v62.0/ui-api/*`
+
+### Apex REST is NOT Available
+
+Apex REST cannot be called from React applications. If Apex seems required:
+1. Evaluate if GraphQL can accomplish the task
+2. If not, inform the user the feature is not supported in React
+
+### MCP Tool Integration
+
+Before implementing data access:
+1. Check if `orchestrate_lds_data_requirements` tool is available
+2. Use it to get guidance on the appropriate pattern (GraphQL or UI API)
+3. If it recommends Apex REST, ignore and use GraphQL instead
+
+## Einstein LLM Gateway (AI Features)
+
+```typescript
+import { getDataSDK } from '@salesforce/sdk-data';
+
+async function callEinsteinGenerations(prompt: string): Promise<string> {
+  const sdk = await getDataSDK();
+  const resp = await sdk.fetch!('/services/data/v62.0/einstein/llm/prompt/generations', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      additionalConfig: { applicationName: 'PromptTemplateGenerationsInvocable' },
+      promptTextorId: prompt,
+    }),
+  });
+
+  if (!resp.ok) throw new Error(`Einstein LLM failed (${resp.status})`);
+  const data = await resp.json();
+  return data?.generations?.[0]?.text || '';
+}
+```
+
+## Error Handling
+
+```typescript
+async function safeFetch<T>(fn: () => Promise<T>): Promise<T> {
+  try {
+    return await fn();
+  } catch (err) {
+    console.error('API Error:', err);
+    throw err;
+  }
+}
+```
+
+### Authentication Errors
+
+On 401/403 response, trigger page refresh to redirect to login:
+```typescript
+window.location.reload();
+```
+
+## Security Standards
+
+- Validate user permissions before data operations
+- Respect record sharing rules and field-level security
+- Never hardcode credentials or secrets
+- Sanitize all user inputs
+- Use HTTPS for all API calls
+
+## Performance
+
+- Use React Query or RTK Query for caching API data
+- Use `React.memo`, `useMemo`, `useCallback` where appropriate
+- Implement loading and error states
+
+## Anti-Patterns (FORBIDDEN)
+
+- ❌ Calling Apex REST from React
+- ❌ Using `axios` or raw `fetch` for Salesforce APIs
+- ❌ Direct DOM manipulation in React
+- ❌ Using LWC patterns (`@wire`, LDS) in React
+- ❌ Hardcoded Salesforce IDs or URLs
+- ❌ Missing error handling for async operations
+
+## Quality Checklist
+
+- [ ] Entry point maintained (`app.tsx`)
+- [ ] Uses shadcn/ui and Tailwind
+- [ ] DataSDK used for all Salesforce API calls
+- [ ] Proper error handling with try/catch
+- [ ] Loading and error states implemented
+- [ ] No hardcoded credentials or IDs

package/dist/.a4drules/{typescript.md → webapp-typescript.md}

@@ -1,10 +1,10 @@
-# AI Rule: TypeScript Standards
+---
+description: Strict TypeScript standards for type-safe React applications
+paths:
+  - "force-app/main/default/webapplications/**/*"
+---
 
-Enforces strict TypeScript standards for type-safe React applications.
-
-## Targets
-- `**/*.ts`
-- `**/*.tsx`
+# TypeScript Standards
 
 ## MANDATORY Configuration
 - `strict: true` - Enable all strict type checking
@@ -136,19 +136,11 @@ interface Account extends SalesforceRecord {
 ```
 
 ### GraphQL via DataSDK
-Use `getDataSDK()` from `@salesforce/sdk-data` for all GraphQL operations. The SDK handles authentication and CSRF token management:
-
-```typescript
-import { getDataSDK } from '@salesforce/sdk-data';
 
-const data = await getDataSDK();
-const response = await data.graphql?.<GetAccountsQuery>(QUERY, variables);
+See **webapp-react.md** for DataSDK usage patterns. Type your GraphQL responses:
 
-if (response?.errors?.length) {
-  throw new Error(response.errors.map(e => e.message).join('; '));
-}
-
-const accounts = response?.data;
+```typescript
+const response = await sdk.graphql?.<GetAccountsQuery>(QUERY, variables);
 ```
 
 ## Error Handling Types

package/dist/.a4drules/webapp.md

@@ -1,75 +1,92 @@
-# MUST FOLLOW
+---
+description: Core web application rules for SFDX React apps
+paths:
+  - "force-app/main/default/webapplications/**/*"
+---
 
-0. **Always invoke the `local-expert` MCP** when dealing with web applications: call **`get_expert_knowledge`** with topic **`webapplications-design-system`** (for UI/design), and with **`webapplications`** when generating or structuring the app. Do not skip the design-system expert for any web app UI work.
-1. **No `node -e`.** This project forbids `node -e` for any operation (file edits, config, shell automation). Use `replace_in_file` or `write_to_file` only. See **webapp-no-node-e.md**.
+# Web App Generation
 
-# React Development & Stability Rules
+## Before `sf webapp generate`
 
-## Terminal & Execution Strategy
-- **NEVER use `node -e`** for file manipulation, string replacement, or reading files. Forbidden. Use `replace_in_file` or `write_to_file` only. 
-- ALWAYS use `replace_in_file` or `write_to_file` for code changes.
-- IF you must parse JSON (like package.json), use `jq` if available. Otherwise, read the file and process it internally.
-- ALWAYS use `npm` or `yarn` commands directly rather than writing custom Node scripts to trigger them.
+**Webapp name (`-n`):** Must be **alphanumerical only**—no spaces, hyphens, underscores, or special characters. Use only letters (A–Z, a–z) and digits (0–9). Example: `CoffeeBoutique` not `Coffee Boutique`.
 
-## React & TypeScript Standards
-- Component Architecture: Prefer functional components with hooks.
-- File Naming: Use PascalCase for components (e.g., `Button.tsx`) and camelCase for hooks (e.g., `useAuth.ts`).
-- Imports: Use absolute paths (e.g., `@/components/...`) if the `tsconfig.json` or `vite.config.ts` supports it.
-- State: Default to `useState` for local state; avoid adding global state libraries unless requested.
+```bash
+sf webapp generate -n MyWebApp -t reactbasic
+```
 
-## Reliability Protocol
-- Before running any build or test command, check for the existence of `node_modules`. If missing, prompt to run `npm install`.
-- When searching for code, use `search_files` with regex rather than trying to `grep` or `awk` through the terminal.
-- If a command fails twice, STOP and report the exact error to the user rather than attempting a third "creative" bash one-liner.
+Do not use `create-react-app`, Vite, or other generic scaffolds; use `sf webapp generate` so the app is SFDX-aware.
 
-# General app generation guidance
+## After Generation (MANDATORY)
 
-Your goal is to create a functioning app on Salesforce platform. Do not mock UIs, but use tools at your disposal, such as custom objects, graphql API, Apex controllers in order to achieve your goal.
+After generating or when touching an existing app:
 
-**Home page must be populated:** The home page (root route) must never be left as the default template. Always populate it with real content—e.g. landing content, banners, tiles, hero, navigation to main features—tailored to the app or use case. Make it visually pleasing and purposeful. Do not leave placeholder or "Welcome to..." default content.
+1. **Replace all default boilerplate** — "React App", "Vite + React", default `<title>`, placeholder text in shell. Use the actual app name.
+2. **Populate the home page** — Never leave it as default template. Add real content: landing section, banners, hero, navigation to features.
+3. **Update navigation and placeholders** — See [Navigation & Layout section](#navigation--layout-mandatory) below.
 
-**Replace default boilerplate:** Always replace default scaffold content (e.g. "React App", "Vite + React", default page titles, placeholder headings in index.html or App.tsx) with **project- or app-specific** names and copy. Do not leave generic "React App" or template placeholders in the UI or document title.
+# Navigation & Layout (MANDATORY)
 
-**Navigation menu and placeholder name/design (critical — often missed):** **Build the navigation into the app layout** (`appLayout.tsx`) so every page shares the same nav. Always edit the **navigation menu** in that layout file: replace default nav items and labels with app-specific links and names; do not leave template "Home"/"About" or placeholder links. Always replace the **placeholder app name** in header, nav brand, footer, and `<title>` with the actual app name, and update **placeholder design** (header/footer/shell) so it's not the template default. See **webapp-nav-and-placeholders.md**.
+Agents consistently miss these. **You must not leave them default.**
 
-**Frontend aesthetics (avoid AI slop):** Make creative, distinctive frontends that surprise and delight. Use distinctive typography (avoid Inter, Roboto, Arial, Space Grotesk as defaults), cohesive color with sharp accents (use CSS variables; avoid purple-on-white clichés), high-impact motion (e.g. staggered reveals), and atmosphere/depth in backgrounds. Do not converge on generic, cookie-cutter layouts. Follow **webapplications-design-system** expert knowledge for full guidance.
+## appLayout.tsx is the Source of Truth
 
-# SFDX React Web Application Creation
+- **Build navigation into the app layout** (`appLayout.tsx`). The layout must include nav (header, sidebar, or both) so every page shares the same shell.
+- Path: `force-app/main/default/webapplications/<appName>/src/appLayout.tsx`
 
-When the user asks to **create a React app** (or a web app, webpplication, etc) in this SFDX project:
+## When Making UI Changes
 
-1. **Generate the app** using the Salesforce CLI:
-   \`\`\`bash
-   sf webapp generate -n MyWebApp -t reactbasic
-   \`\`\`
-   Use the app name the user requested instead of \`MyWebApp\` if they specify one.
+**When making any change** that affects navigation, header, footer, sidebar, theme, or overall layout:
 
-Do not use \`create-react-app\`, Vite, or other generic React scaffolds for this scenario; use \`sf webapp generate\` so the app is SFDX-aware.
+1. **You MUST edit `src/appLayout.tsx`** (the layout used by `routes.tsx`).
+2. Do not only edit pages/components and leave `appLayout.tsx` unchanged.
+3. Before finishing: confirm you opened and modified `appLayout.tsx`. If you did not, the task is incomplete.
 
-2. **For B2B/B2C or authenticated/guest apps:** Also create site container metadata and create and configure Digital Experience Sites to host the React web application.
+## Navigation Menu (Critical)
 
-When modifying webapp in an SFDX project, use the experts MCP to obtain the latest guidance and design before starting implementation. Never assume or create tools that are not explicitly available
+- **Always edit the navigation menu** in `appLayout.tsx`. Replace default nav items and labels with **app-specific** links and names.
+- Do **not** leave template items (e.g. "Home", "About", generic placeholder links).
+- Use real routes and labels matching the app (e.g. "Dashboard", "Products", "Orders").
 
-3. Repeat iterations until the there are no pending actions left.
+**Check before finishing:** Did I change the nav items and labels to match this app?
 
+## Placeholder Name & Design (Critical)
 
-# Software development cycle (modified for continuous execution)
+- **Replace the placeholder app name** everywhere: header, nav brand/logo, footer, `<title>` in `index.html`, any "Welcome to…" text.
+- **Replace placeholder design** in the shell: default header/footer styling, generic branding.
 
-- Execute tasks continuously until all planned items are complete in the current iteration, without pausing after intermediate checkpoints.
-- Maintain a running checklist and proceed through it sequentially.
-- Quality gates (lint/build) remain required, but failures should be remediated inline and the workflow should continue through all feature tasks in this iteration unless the user directs otherwise.
+**Check before finishing:** Is the app name and shell design still the template default? If yes, update it.
 
-## Attempt Completion Enforcement (Local Project Rule)
+## Where to Edit
 
-- Do NOT invoke attempt_completion until ALL checklist items for the current iteration are complete and quality gates pass.
-- Intermediate status updates must use task_progress on tool calls (never attempt_completion) until completion criteria are met.
-- The only exceptions that allow early attempt_completion are:
-  - A blocking error that cannot be resolved after reasonable remediation and requires user input
-  - The user explicitly instructs to pause or complete early
+
+| What                | Where                                                                |
+| ------------------- | -------------------------------------------------------------------- |
+| Layout/nav/branding | `force-app/main/default/webapplications/<appName>/src/appLayout.tsx` |
+| Document title      | `force-app/main/default/webapplications/<appName>/index.html`        |
+| Root page content   | Component at root route (often `Home` in `routes.tsx`)               |
+
+
+# Frontend Aesthetics
+
+**Avoid AI slop.** Make creative, distinctive frontends:
+
+- **Typography:** Avoid Inter, Roboto, Arial, Space Grotesk as defaults. Choose distinctive fonts.
+- **Color:** Use cohesive color with sharp accents via CSS variables. Avoid purple-on-white clichés.
+- **Motion:** Use high-impact motion (e.g. staggered reveals).
+- **Depth:** Add atmosphere/depth in backgrounds.
+
+Follow **webapplications-design-system** expert knowledge for full guidance.
+
+# Development Cycle
+
+- Execute tasks continuously until all planned items complete in the current iteration.
+- Maintain a running checklist and proceed sequentially.
 
 ## Stop Conditions
 
 Only stop when:
+
 - All checklist items are completed and quality gates pass, or
 - A blocking error cannot be resolved after reasonable remediation, or
 - The user explicitly asks to pause.
+

package/dist/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.62.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.61.4...v1.62.0) (2026-03-02)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
+## [1.61.4](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.61.3...v1.61.4) (2026-03-02)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
 ## [1.61.3](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.61.2...v1.61.3) (2026-03-02)
 
 **Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental

package/dist/force-app/main/default/webapplications/appreactsampleb2e/vite.config.ts

@@ -1,4 +1,3 @@
-import type { PluginOption } from 'vite';
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
@@ -11,6 +10,7 @@ export default defineConfig(({ mode }) => {
   return {
     // Ensure root base for e2e/static serve; plugin may override when deployed under a path
     base: '/',
+    // Type assertion avoids Plugin type mismatch when dist has its own node_modules (vite/rollup)
     plugins: [
       tailwindcss(),
       react(),
@@ -27,7 +27,7 @@ export default defineConfig(({ mode }) => {
         // Fail build if codegen errors
         throwOnBuild: true,
       }),
-    ] as PluginOption[],
+    ] as import('vite').PluginOption[],
 
     // Build configuration for MPA
     build: {

package/dist/package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-app-react-sample-b2e-experimental",
-  "version": "1.61.3",
+  "version": "1.62.0",
   "description": "B2E starter app template",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",
@@ -43,5 +43,5 @@
       }
     }
   },
-  "gitHead": "856cef369bb529c23171b64cec3feff2b328ff76"
+  "gitHead": "1a13800558455d1b4d9d5bce9946276ac2ca54a5"
 }

package/dist/.a4drules/README.md

@@ -1,35 +0,0 @@
-# A4D Rules Index
-
-Rules in this folder guide the agent for this SFDX project. **Knowledge** (expert content) lives in the **local-expert MCP** repo (e.g. `local-expert-mcp`); rules here reference when to call which expert.
-
-## Always-apply rules (MUST follow)
-
-| File | Purpose |
-|------|--------|
-| **webapp.md** | Main web app rules: invoke local-expert MCP (`webapplications-design-system` + `webapplications`), no `node -e`, React/SFDX workflow; **replace default boilerplate**; **populate home page**; **frontend aesthetics**—avoid AI slop, follow design-system expert. |
-| **webapp-no-node-e.md** | No `node -e` for any file/config/shell work; use `replace_in_file` or `write_to_file` only. |
-| **a4d-webapp-generate.md** | Before `sf webapp generate`: call `get_expert_knowledge` with `webapplications-design-system` and `webapplications`; then run CLI. |
-| **webapp-ui-first.md** | Build UI (layout, components, styling) first; then implement business logic (APIs, state, handlers). |
-| **webapp-nav-and-placeholders.md** | **Build navigation into the app layout** (`appLayout.tsx`). Always update nav menu (app-specific items/labels) and placeholder name/design (header/nav/footer/title). Often missed—mandatory. |
-
-## Context-specific rules (by file pattern or topic)
-
-| File | Purpose |
-|------|--------|
-| **react.md** | React web app structure, shadcn/Tailwind, data access, security; edit `appLayout.tsx` when changing layout. |
-| **ui-layout.md** | When changing UI/nav/header/footer/sidebar/theme, always update `appLayout.tsx`. |
-| **code-quality.md** | ESLint, Prettier, import order, naming, lint/build before completion; no `node -e`. |
-| **build-validation.md** | `npm run build` must succeed from web app dir before completing. |
-| **typescript.md** | TypeScript strictness, return types, interfaces. |
-| **images.md** | Images: Unsplash default, CSP, alt text, error handling. |
-| **react_image_processing.md** | Image handling (Unsplash, CSP, accessibility) for React components. |
-| **graphql/** | GraphQL tools and knowledge (schemas, LDS guides). |
-
-## Knowledge repository (experts)
-
-Expert knowledge is served by the **local-expert MCP** (e.g. at `local-expert-mcp`). The agent must call **`get_expert_knowledge`** with the appropriate topic:
-
-- **webapplications-design-system** — Always use for web app UI/design work (design system, typography, color, motion).
-- **webapplications** — Use for app generation and structure; then call sub-topics as needed (e.g. `webapplications-best-practice`, `webapplications-feature-*`).
-
-See the MCP repo's **rule-expert-mcp.md** for full topic list and when to call which expert.

package/dist/.a4drules/a4d-webapp-generate.md

@@ -1,27 +0,0 @@
----
-description: A4D rule — call expert MCP (webapplications + webapplications-design-system) before sf webapp generate
-alwaysApply: true
----
-
-# A4D Rule: Before `sf webapp generate`
-
-Before running **`sf webapp generate`**, you **must**:
-
-1. **Call the expert MCP** (`get_expert_knowledge`) with topic **`webapplications-design-system`** — always invoke this expert for UI/design direction.
-2. **Call the expert MCP** with topic **`webapplications`** to get generation and structure guidance.
-3. Follow the instructions from the MCP responses.
-4. Only after that, run `sf webapp generate` (e.g. `sf webapp generate -n <AppName> -t <template>`).
-
-**Webapp name (`-n` / `<AppName>`):** Must be **alphanumerical only**—no spaces, hyphens, underscores, or other special characters. Use only letters (A–Z, a–z) and digits (0–9). If the desired name has spaces or special characters, use a single alphanumeric word (e.g. `CoffeeBoutique` instead of `Coffee Boutique` or `coffee-boutique`).
-
-Do not run `sf webapp generate` without having invoked the expert MCP with **`webapplications-design-system`** and **`webapplications`** first.
-
-When modifying an existing web app (UI, layout, or new features), **always** call `get_expert_knowledge` with topic **`webapplications-design-system`** before making UI or design changes.
-
-**After generating (or when touching a new app):** Replace all default boilerplate content (e.g. "React App", "Vite + React", default document title in `index.html`, placeholder text in the shell) with the actual app name or user-facing copy. Do not leave generic template text in the UI or `<title>`.
-
-**Home page content:** Populate the home page (root route) with real, app-specific content (e.g. landing section, banners, tiles, hero, links to features). Never leave the home page as the default template or placeholder.
-
-**Navigation menu and placeholder name/design:** After generating or when delivering a web app, **you must** (1) **Edit the navigation menu** in `appLayout.tsx`: replace every default nav item and label with app-specific routes and names; do not leave template "Home"/"About" or placeholder links. (2) **Replace the placeholder app name** in the header, nav brand, footer, and `index.html` `<title>` with the actual app name. (3) **Update placeholder design** in the shell (header/footer/branding) so it is not the template default. See **webapp-nav-and-placeholders.md**. Agents often skip this—do not.
-
-Prioritize webapplications generation first, and then generate the metadata.