@salesforce/webapp-template-feature-react-file-upload-experimental 1.106.1 → 1.107.0

package/dist/.a4drules/skills/{salesforce-data-access → accessing-data}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: salesforce-data-access
+name: accessing-data
 description: Salesforce data access patterns. Use when adding or modifying any code that fetches data from Salesforce (records, Chatter, Connect API, etc.).
 paths:
   - "**/*.ts"
@@ -42,7 +42,7 @@ For GraphQL, if `sdk.graphql` is undefined, the call returns `undefined` — han
 - 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:
+**Use `sdk.fetch` only when GraphQL is not sufficient.** For REST API usage, invoke the `fetching-rest-api` 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`)
@@ -64,7 +64,7 @@ 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).
+For record queries and mutations, use GraphQL via the Data SDK. Invoke the `using-graphql` skill for the full workflow (schema exploration, query authoring, codegen, lint validate).
 
 ```typescript
 import { createDataSDK, gql } from "@salesforce/sdk-data";
@@ -103,7 +103,7 @@ export async function getAccounts() {
 
 ## 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.
+For REST endpoints that have no GraphQL equivalent, use `sdk.fetch`. **Invoke the `fetching-rest-api` skill** for full documentation of Chatter, Connect REST, Apex REST, UI API REST, and Einstein LLM endpoints.
 
 ```typescript
 import { createDataSDK } from "@salesforce/sdk-data";
@@ -151,15 +151,15 @@ 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.
+1. **Need to query or mutate Salesforce records?** → Use GraphQL via the Data SDK. Invoke the `using-graphql` skill.
+2. **Need Chatter, Connect REST, Apex REST, UI API REST, or Einstein LLM?** → Use `sdk.fetch`. Invoke the `fetching-rest-api` 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/`)
+- GraphQL workflow: invoke the `using-graphql` skill (`.a4drules/skills/using-graphql/`)
+- REST API via fetch: invoke the `fetching-rest-api` skill (`.a4drules/skills/fetching-rest-api/`)
 - Data SDK package: `@salesforce/sdk-data` (`createDataSDK`, `gql`, `NodeOfConnection`)
 - `createRecord` for UI API record creation: `@salesforce/webapp-experimental/api` (uses Data SDK internally)

package/dist/.a4drules/{webapp-webapplication.md → skills/configuring-webapp-metadata/SKILL.md}

@@ -1,7 +1,6 @@
-
 ---
-paths:
-  - "**/webapplications/**/*"
+name: configuring-webapp-metadata
+description: Rules for web application metadata structure, webapplication.json configuration, and bundle organization
 ---
 
 # WebApplication Requirements

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

@@ -1,4 +1,5 @@
 ---
+name: creating-webapp
 description: Core web application rules for SFDX React apps
 paths:
   - "**/webapplications/**/*"
@@ -81,7 +82,7 @@ Agents consistently miss these. **You must not leave them default.**
 
 # Shell Command Safety (MUST FOLLOW)
 
-**Never use complex `node -e` one-liners** for file edits or multi-line transforms. They break in Zsh due to `!` history expansion and backtick interpolation. Use a temporary `.js` file, `sed`/`awk`, `jq`, or IDE file-editing tools instead. See **webapp-cli-commands.md** for full details and approved alternatives.
+**Never use complex `node -e` one-liners** for file edits or multi-line transforms. They break in Zsh due to `!` history expansion and backtick interpolation. Use a temporary `.js` file, `sed`/`awk`, `jq`, or IDE file-editing tools instead.
 
 # Development Cycle
 

package/dist/.a4drules/skills/{salesforce-graphql-explore-schema → exploring-graphql-schema}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: salesforce-graphql-explore-schema
+name: exploring-graphql-schema
 description: Explore the Salesforce GraphQL schema via grep-only lookups. Use before generating any GraphQL query — schema exploration must complete first.
 paths:
   - "**/*.ts"
@@ -125,7 +125,7 @@ Salesforce GraphQL returns field values wrapped in typed objects:
 2. **Run the "Find Available Fields" grep command** for your object (copy only the field names visible in the grep output; do not open the file)
 3. **Run the "Find Filter Options" grep command** (`<Object>_Filter`) to understand filtering options
 4. **Run the "Find OrderBy Options" grep command** (`<Object>_OrderBy`) for sorting capabilities
-5. **Build the query** following the patterns in the `salesforce-graphql-read-query` or `salesforce-graphql-mutation-query` skill using only values returned by grep
+5. **Build the query** following the patterns in the `generating-graphql-read-query` or `generating-graphql-mutation-query` skill using only values returned by grep
 6. **Validate field names** using grep matches (case-sensitive). Do not open or parse the file beyond grep.
 
 ## Tips for Agents
@@ -156,5 +156,5 @@ If any of the above occurs, stop and replace the action with one of the Allowed
 
 ## Related Skills
 
-- For generating read queries, invoke the `salesforce-graphql-read-query` skill
-- For generating mutation queries, invoke the `salesforce-graphql-mutation-query` skill
+- For generating read queries, invoke the `generating-graphql-read-query` skill
+- For generating mutation queries, invoke the `generating-graphql-mutation-query` skill

package/dist/.a4drules/skills/{salesforce-rest-api-fetch → fetching-rest-api}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: salesforce-rest-api-fetch
+name: fetching-rest-api
 description: REST API usage via the Data SDK fetch method. Use when implementing Chatter, Connect REST, Apex REST, UI API REST, or Einstein LLM calls — only when GraphQL is not sufficient.
 paths:
   - "**/*.ts"
@@ -162,6 +162,6 @@ const data = await response.json();
 
 ## Reference
 
-- Parent: `salesforce-data-access` — enforces Data SDK usage for all Salesforce data fetches
-- GraphQL: `salesforce-graphql` — use for record queries and mutations when possible
+- Parent: `accessing-data` — enforces Data SDK usage for all Salesforce data fetches
+- GraphQL: `using-graphql` — use for record queries and mutations when possible
 - `createRecord` from `@salesforce/webapp-experimental/api` for UI API record creation (uses SDK internally)

package/dist/.a4drules/skills/{salesforce-graphql-mutation-query → generating-graphql-mutation-query}/SKILL.md

@@ -1,6 +1,6 @@
 ---
-name: salesforce-graphql-mutation-query
-description: Generate Salesforce GraphQL mutation queries. Use when the query to generate is a mutation query. Schema exploration must complete first — invoke salesforce-graphql-explore-schema first.
+name: generating-graphql-mutation-query
+description: Generate Salesforce GraphQL mutation queries. Use when the query to generate is a mutation query. Schema exploration must complete first — invoke exploring-graphql-schema first.
 paths:
   - "**/*.ts"
   - "**/*.tsx"
@@ -11,16 +11,16 @@ paths:
 
 **Triggering conditions**
 
-1. Only if the schema exploration phase completed successfully (invoke `salesforce-graphql-explore-schema` first)
+1. Only if the schema exploration phase completed successfully (invoke `exploring-graphql-schema` first)
 2. Only if the query to generate is a mutation query
 
 ## Schema Access Policy
 
-> ⚠️ **GREP ONLY** — During mutation generation you may need to verify field names, input types, or representations. All schema lookups **MUST** use the grep-only commands defined in the `salesforce-graphql-explore-schema` skill. Do NOT open, read, stream, or parse `./schema.graphql` with any tool other than grep.
+> ⚠️ **GREP ONLY** — During mutation generation you may need to verify field names, input types, or representations. All schema lookups **MUST** use the grep-only commands defined in the `exploring-graphql-schema` skill. Do NOT open, read, stream, or parse `./schema.graphql` with any tool other than grep.
 
 ## Your Role
 
-You are a GraphQL expert. Generate Salesforce-compatible mutation queries. Schema exploration must complete first. If the schema exploration has not been executed yet, you **MUST** run the full exploration workflow from the `salesforce-graphql-explore-schema` skill first, then return here for mutation query generation.
+You are a GraphQL expert. Generate Salesforce-compatible mutation queries. Schema exploration must complete first. If the schema exploration has not been executed yet, you **MUST** run the full exploration workflow from the `exploring-graphql-schema` skill first, then return here for mutation query generation.
 
 ## Mutation Queries General Information
 
@@ -186,7 +186,7 @@ npx eslint <path-to-file-containing-mutation>
 
 **On failure:** Fix the reported issues, re-run `npx eslint <file>` until clean, then proceed to testing.
 
-> ⚠️ **Prerequisites**: The `schema.graphql` file must exist (invoke `salesforce-graphql-explore-schema` first) and project dependencies must be installed (`npm install`).
+> ⚠️ **Prerequisites**: The `schema.graphql` file must exist (invoke `exploring-graphql-schema` first) and project dependencies must be installed (`npm install`).
 
 ## Generated Mutation Query Testing
 
@@ -234,12 +234,12 @@ The query is invalid:
 3. **Targeted Resolution** - Depending on the root cause categorization
    - **Execution** - You're trying to update or delete an unknown/no longer available entity: either create an entity first, if you have generated the related query, or ask for a valid entity id to use. **STOP and WAIT** for the user to provide a valid Id
    - **Syntax** - Update the query using the error message information to fix the syntax errors
-   - **Validation** - The field name is most probably invalid. Re-run the relevant grep command from the `salesforce-graphql-explore-schema` skill to verify the correct field name. If still unclear, ask the user for clarification and **STOP and WAIT** for their answer
+   - **Validation** - The field name is most probably invalid. Re-run the relevant grep command from the `exploring-graphql-schema` skill to verify the correct field name. If still unclear, ask the user for clarification and **STOP and WAIT** for their answer
    - **Type** - Use the error details and re-verify the type via grep lookup in the schema. Correct the argument type and adjust variables accordingly
    - **Navigation** - Use the [`PARTIAL` status handling workflow](#partial-status-handling-workflow) below
    - **API Version** - `Record` selection is only available with API version 64 and higher, **report** the issue, and try again with API version 64
 4. **Test Again** - Resume the [query testing workflow](#generated-mutation-query-testing) with the updated query (increment and track attempt counter)
-5. **Escalation Path** - If targeted resolution fails after 2 attempts, ask for additional details and restart the entire GraphQL workflow from the `salesforce-graphql-explore-schema` skill
+5. **Escalation Path** - If targeted resolution fails after 2 attempts, ask for additional details and restart the entire GraphQL workflow from the `exploring-graphql-schema` skill
 
 ### `PARTIAL` Status Handling Workflow
 
@@ -254,5 +254,5 @@ The query can be improved:
 
 ## Related Skills
 
-- Schema exploration: `salesforce-graphql-explore-schema` (must complete first)
-- Read query generation: `salesforce-graphql-read-query`
+- Schema exploration: `exploring-graphql-schema` (must complete first)
+- Read query generation: `generating-graphql-read-query`

package/dist/.a4drules/skills/{salesforce-graphql-read-query → generating-graphql-read-query}/SKILL.md

@@ -1,6 +1,6 @@
 ---
-name: salesforce-graphql-read-query
-description: Generate Salesforce GraphQL read queries. Use when the query to generate is a read query. Schema exploration must complete first — invoke salesforce-graphql-explore-schema first.
+name: generating-graphql-read-query
+description: Generate Salesforce GraphQL read queries. Use when the query to generate is a read query. Schema exploration must complete first — invoke exploring-graphql-schema first.
 paths:
   - "**/*.ts"
   - "**/*.tsx"
@@ -11,12 +11,12 @@ paths:
 
 **Triggering conditions**
 
-1. Only if the schema exploration phase completed successfully (invoke `salesforce-graphql-explore-schema` first)
+1. Only if the schema exploration phase completed successfully (invoke `exploring-graphql-schema` first)
 2. Only if the query to generate is a read query
 
 ## Schema Access Policy
 
-> ⚠️ **GREP ONLY** — During query generation you may need to verify field names, types, or relationships. All schema lookups **MUST** use the grep-only commands defined in the `salesforce-graphql-explore-schema` skill. Do NOT open, read, stream, or parse `./schema.graphql` with any tool other than grep.
+> ⚠️ **GREP ONLY** — During query generation you may need to verify field names, types, or relationships. All schema lookups **MUST** use the grep-only commands defined in the `exploring-graphql-schema` skill. Do NOT open, read, stream, or parse `./schema.graphql` with any tool other than grep.
 
 ## Field-Level Security and @optional
 
@@ -35,7 +35,7 @@ const name = node.Name.value;
 
 ## Your Role
 
-You are a GraphQL expert. Generate Salesforce-compatible read queries. Schema exploration must complete first. If the schema exploration has not been executed yet, you **MUST** run the full exploration workflow from the `salesforce-graphql-explore-schema` skill first, then return here for read query generation.
+You are a GraphQL expert. Generate Salesforce-compatible read queries. Schema exploration must complete first. If the schema exploration has not been executed yet, you **MUST** run the full exploration workflow from the `exploring-graphql-schema` skill first, then return here for read query generation.
 
 ## Read Query Generation Workflow
 
@@ -202,7 +202,7 @@ npx eslint <path-to-file-containing-query>
 
 **On failure:** Fix the reported issues, re-run `npx eslint <file>` until clean, then proceed to testing.
 
-> ⚠️ **Prerequisites**: The `schema.graphql` file must exist (invoke `salesforce-graphql-explore-schema` first) and project dependencies must be installed (`npm install`).
+> ⚠️ **Prerequisites**: The `schema.graphql` file must exist (invoke `exploring-graphql-schema` first) and project dependencies must be installed (`npm install`).
 
 ## Generated Read Query Testing
 
@@ -242,12 +242,12 @@ The query is invalid:
    - **Type** - Error contains `VariableTypeMismatch` or `UnknownType`
 3. **Targeted Resolution** - Depending on the root cause categorization
    - **Syntax** - Update the query using the error message information to fix the syntax errors
-   - **Validation** - The field name is most probably invalid. Re-run the relevant grep command from the `salesforce-graphql-explore-schema` skill to verify the correct field name. If still unclear, ask the user for clarification and **STOP and WAIT** for their answer
+   - **Validation** - The field name is most probably invalid. Re-run the relevant grep command from the `exploring-graphql-schema` skill to verify the correct field name. If still unclear, ask the user for clarification and **STOP and WAIT** for their answer
    - **Type** - Use the error details and re-verify the type via grep lookup in the schema. Correct the argument type and adjust variables accordingly
 4. **Test Again** - Resume the [query testing workflow](#generated-read-query-testing) with the updated query (increment and track attempt counter)
-5. **Escalation Path** - If targeted resolution fails after 2 attempts, ask for additional details and restart the entire GraphQL workflow from the `salesforce-graphql-explore-schema` skill
+5. **Escalation Path** - If targeted resolution fails after 2 attempts, ask for additional details and restart the entire GraphQL workflow from the `exploring-graphql-schema` skill
 
 ## Related Skills
 
-- Schema exploration: `salesforce-graphql-explore-schema` (must complete first)
-- Mutation generation: `salesforce-graphql-mutation-query`
+- Schema exploration: `exploring-graphql-schema` (must complete first)
+- Mutation generation: `generating-graphql-mutation-query`

package/dist/.a4drules/skills/{salesforce-graphql → using-graphql}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: salesforce-graphql
+name: using-graphql
 description: Salesforce GraphQL data access. Use when the user asks to fetch, query, or mutate Salesforce data, or add a GraphQL operation for an object like Account, Contact, or Opportunity.
 paths:
   - "**/*.ts"
@@ -20,7 +20,7 @@ Guidance for querying and mutating Salesforce data via the Salesforce GraphQL AP
 
 ## Schema Access Policy (GREP ONLY)
 
-> **GREP ONLY** — The `schema.graphql` file is very large (~265,000+ lines). All schema lookups **MUST** use the grep-only commands defined in the `salesforce-graphql-explore-schema` skill. Do NOT open, read, stream, or parse `./schema.graphql` with any tool other than grep.
+> **GREP ONLY** — The `schema.graphql` file is very large (~265,000+ lines). All schema lookups **MUST** use the grep-only commands defined in the `exploring-graphql-schema` skill. Do NOT open, read, stream, or parse `./schema.graphql` with any tool other than grep.
 
 ## Directory Context
 
@@ -80,9 +80,9 @@ Ensure `schema.graphql` exists at the project root. If missing, run `npm run gra
 
 Before writing any query, verify the target object and its fields exist in the schema.
 
-**Invoke the `salesforce-graphql-explore-schema` skill** for the full exploration workflow and **mandatory grep-only access policy**.
+**Invoke the `exploring-graphql-schema` skill** for the full exploration workflow and **mandatory grep-only access policy**.
 
-> **GREP ONLY** — All schema lookups MUST use the grep commands defined in the `salesforce-graphql-explore-schema` skill. Do NOT open, read, stream, or parse `./schema.graphql` with any tool other than grep.
+> **GREP ONLY** — All schema lookups MUST use the grep commands defined in the `exploring-graphql-schema` skill. Do NOT open, read, stream, or parse `./schema.graphql` with any tool other than grep.
 
 Key actions (all via grep):
 
@@ -113,8 +113,8 @@ For **Pattern 1**:
 
 1. Create a `.graphql` file under `src/api/utils/query/`
 2. Follow UIAPI structure: `query { uiapi { query { ObjectName(...) { edges { node { ... } } } } } }`
-3. For mutations, invoke the `salesforce-graphql-mutation-query` skill
-4. For read queries, invoke the `salesforce-graphql-read-query` skill
+3. For mutations, invoke the `generating-graphql-mutation-query` skill
+4. For read queries, invoke the `generating-graphql-read-query` skill
 
 For **Pattern 2**:
 
@@ -123,7 +123,7 @@ For **Pattern 2**:
 
 ### Step 5: Test Queries Against Live Org
 
-Use the testing workflows in the `salesforce-graphql-read-query` and `salesforce-graphql-mutation-query` skills to validate queries against the connected org before integrating into the app.
+Use the testing workflows in the `generating-graphql-read-query` and `generating-graphql-mutation-query` skills to validate queries against the connected org before integrating into the app.
 
 ### Step 6: Generate Types
 
@@ -284,7 +284,7 @@ Before completing GraphQL data access code:
 
 ### For Pattern 1 (.graphql files):
 
-1. [ ] All field names verified via grep against `schema.graphql` (invoke `salesforce-graphql-explore-schema`)
+1. [ ] All field names verified via grep against `schema.graphql` (invoke `exploring-graphql-schema`)
 2. [ ] Create `.graphql` file for the query/mutation
 3. [ ] Run `npm run graphql:codegen` to generate types
 4. [ ] Import query with `?raw` suffix
@@ -315,9 +315,9 @@ Before completing GraphQL data access code:
 
 ## Reference
 
-- Schema exploration: invoke the `salesforce-graphql-explore-schema` skill
-- Read query generation: invoke the `salesforce-graphql-read-query` skill
-- Mutation query generation: invoke the `salesforce-graphql-mutation-query` skill
+- Schema exploration: invoke the `exploring-graphql-schema` skill
+- Read query generation: invoke the `generating-graphql-read-query` skill
+- Mutation query generation: invoke the `generating-graphql-mutation-query` skill
 - Shared GraphQL schema types: `shared-schema.graphqls` (in this skill directory)
 - Schema download: `npm run graphql:schema` (run from webapp dir)
 - Type generation: `npm run graphql:codegen` (run from webapp dir)

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

@@ -0,0 +1,28 @@
+---
+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)
+npm run graphql:codegen # MUST succeed (verifies graphql queries)
+```
+
+**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

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

@@ -4,79 +4,12 @@ paths:
   - "**/webapplications/**/*"
 ---
 
-# TypeScript Standards
-
-## MANDATORY Configuration
-- `strict: true` - Enable all strict type checking
-- `noUncheckedIndexedAccess: true` - Prevent unsafe array/object access
-- `noUnusedLocals: true` - Report unused variables
-- `noUnusedParameters: true` - Report unused parameters
-
-## Function Return Types (REQUIRED)
-```typescript
-// Always specify return types
-function fetchUserData(id: string): Promise<User> {
-  return api.get(`/users/${id}`);
-}
-
-const calculateTotal = (items: Item[]): number => {
-  return items.reduce((sum, item) => sum + item.price, 0);
-};
-```
-
-## Interface Definitions (REQUIRED)
-```typescript
-// Data structures
-interface User {
-  id: string;
-  name: string;
-  email: string;
-  createdAt: Date;
-}
-
-// React component props
-interface ButtonProps {
-  variant: 'primary' | 'secondary';
-  onClick: () => void;
-  disabled?: boolean;
-  children: React.ReactNode;
-}
-
-export const Button: React.FC<ButtonProps> = ({ variant, onClick, disabled, children }) => {
-  // Implementation
-};
-```
-
 ## Type Safety Rules
 
 ### Never Use `any`
 ```typescript
 // FORBIDDEN
 const data: any = await fetchData();
-
-// REQUIRED: Proper typing
-interface ApiResponse {
-  data: User[];
-  status: 'success' | 'error';
-}
-const response: ApiResponse = await fetchData();
-
-// ACCEPTABLE: Unknown when type is truly unknown
-const parseJson = (input: string): unknown => JSON.parse(input);
-```
-
-### Null Safety
-```typescript
-// Handle null/undefined explicitly
-interface UserProfile {
-  user: User | null;
-  loading: boolean;
-  error: string | null;
-}
-
-// Use optional chaining and nullish coalescing
-const displayName = user?.name ?? 'Anonymous';
-const avatarUrl = user?.profile?.avatar ?? '/default-avatar.png';
 ```
 
 ## React TypeScript Patterns
@@ -86,53 +19,12 @@ const avatarUrl = user?.profile?.avatar ?? '/default-avatar.png';
 const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
   event.preventDefault();
 };
-
-const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
-  setInputValue(event.target.value);
-};
-
-const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
-  console.log('Button clicked');
-};
 ```
 
 ### State and Hooks
 ```typescript
 // Type useState properly
 const [user, setUser] = useState<User | null>(null);
-const [loading, setLoading] = useState<boolean>(false);
-const [errors, setErrors] = useState<string[]>([]);
-
-// Type custom hooks
-interface UseApiResult<T> {
-  data: T | null;
-  loading: boolean;
-  error: string | null;
-  refetch: () => Promise<void>;
-}
-
-function useApi<T>(url: string): UseApiResult<T> {
-  const [data, setData] = useState<T | null>(null);
-  const [loading, setLoading] = useState<boolean>(false);
-  const [error, setError] = useState<string | null>(null);
-
-  return { data, loading, error, refetch };
-}
-```
-
-## API Types
-
-### Salesforce Records
-```typescript
-interface SalesforceRecord {
-  Id: string;
-  attributes: { type: string; url: string };
-}
-
-interface Account extends SalesforceRecord {
-  Name: { value: string };
-  Industry?: { value: string | null };
-}
 ```
 
 ### GraphQL via DataSDK
@@ -143,24 +35,6 @@ See **webapp-react.md** for DataSDK usage patterns. Type your GraphQL responses:
 const response = await sdk.graphql?.<GetAccountsQuery>(QUERY, variables);
 ```
 
-## Error Handling Types
-```typescript
-interface ApiError {
-  message: string;
-  status: number;
-  code?: string;
-}
-
-class CustomError extends Error {
-  constructor(message: string, public readonly status: number, public readonly code?: string) {
-    super(message);
-    this.name = 'CustomError';
-  }
-}
-```
-
-## Anti-Patterns (FORBIDDEN)
-
 ### Type Assertions
 ```typescript
 // FORBIDDEN: Unsafe assertions
@@ -175,31 +49,3 @@ if (isUser(data)) {
   console.log(data.name); // Now safely typed
 }
 ```
-
-### Missing Return Types
-```typescript
-// FORBIDDEN: No return type
-const fetchData = async (id: string) => {
-  return await api.get(`/data/${id}`);
-};
-
-// REQUIRED: Explicit return type
-const fetchData = async (id: string): Promise<ApiResponse> => {
-  return await api.get(`/data/${id}`);
-};
-```
-
-## Quality Checklist
-Before completing TypeScript code:
-1. All functions have explicit return types
-2. All interfaces are properly defined
-3. No `any` types used (use `unknown` if necessary)
-4. Null/undefined handling is explicit
-5. React components are properly typed
-6. API calls have proper type definitions
-7. `tsc -b` compiles without errors
-
-## Enforcement
-- TypeScript errors MUST be fixed before any commit
-- NEVER disable TypeScript strict mode
-- Code reviews MUST check for proper typing

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

@@ -6,149 +6,29 @@ paths:
 
 # 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`
-
 ## 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`.
-
-- ✅ `import { createBrowserRouter, RouterProvider, Link, useNavigate, useLocation, Outlet } from 'react-router';`
-- ❌ `import { Link } from 'react-router-dom';` when the app uses `RouterProvider` from `react-router`
-
-Mixing packages causes "Cannot destructure property 'basename' of ... as it is null" because `Link`/hooks from `react-router-dom` read a different context than the one provided by `RouterProvider` from `react-router`.
-
-## 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';
-```
-
-## Icons & No Emojis (MANDATORY)
-
-- **Icons:** Use **lucide-react** only. Do not use Heroicons, Simple Icons, or other icon libraries in the web app.
-  - ✅ `import { Menu, Settings, Bell } from 'lucide-react';` then `<Menu className="w-5 h-5" />`
-  - ❌ Any emoji character as an icon or visual element (e.g. 🎨 🚀 ⚙️ 🔔)
-  - ❌ Other icon libraries (e.g. `@heroicons/react`, `react-icons`, custom SVG icon sets)
-- **No emojis ever:** Do not use emojis anywhere in the app: no emojis in UI labels, buttons, headings, empty states, tooltips, or any user-facing text. Use words and lucide-react icons instead.
-  - ✅ "Settings" with `<Settings />` icon
-  - ❌ "⚙️ Settings" or "Settings 🔧"
-- For icon usage patterns and naming, see the **designing-webapp-ui-ux** skill (`.a4drules/skills/designing-webapp-ui-ux/`, especially `data/icons.csv`).
-
-## Editing UI — Source Files Only (CRITICAL)
-
-When asked to edit the home page, a section, or any on-screen UI:
-
-- **Always edit the actual React/TSX source files.** Never output, paste, or generate raw HTML. The UI is built from components; the agent must locate the component file(s) that render the target area and change **JSX in those files**.
-- **Do not** replace JSX with HTML strings, and do not copy browser-rendered DOM (e.g. expanded `<div>`, `data-slot`, long class strings) into the codebase. That is the output of React + shadcn; the source is `.tsx` with `<Card>`, `<Input>`, etc.
-- **Edit inside the component that owns the UI.** If the element to change is rendered by a **child component** (e.g. `<GlobalSearchInput />` in `Home.tsx`), make the edit **inside that component's file** (e.g. `GlobalSearchInput.tsx`). Do **not** only wrap the component with extra elements in the parent (e.g. adding a `<section>` or `<div>` around `<GlobalSearchInput />`). The parent composes components; the visual/content change belongs in the component that actually renders that part of the UI.
-- **Where to edit:**
-  - **Home page content:** `src/pages/Home.tsx` — but if the target is inside a child (e.g. `<GlobalSearchInput />`), edit the child's file, not the parent.
-  - **Layout, header, nav:** `src/appLayout.tsx`.
-  - **Feature-specific UI (e.g. search, list):** open the **specific component file** that renders the target (e.g. `GlobalSearchInput.tsx` for the search input UI).
-- **Steps:** (1) Identify which **component** owns the section (follow the import: e.g. `GlobalSearchInput` → its file). (2) Open that component's file and modify the JSX there. (3) Only change the parent (e.g. `Home.tsx`) if the change is layout/ordering of components, not the internals of a child. Do not emit a standalone HTML snippet as the “edit.”
+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`.
 
-## Mobile Nav / Hamburger — Must Be Functional
-
-When adding a navigation menu that includes a hamburger (or Menu icon) for mobile:
-
-- **Do not** add a hamburger/Menu icon that does nothing. The icon must **toggle a visible mobile menu**.
-- **Required implementation:**
-  1. **State:** e.g. `const [isOpen, setIsOpen] = useState(false);`
-  2. **Toggle button:** The hamburger/Menu button must have `onClick={() => setIsOpen(!isOpen)}` and `aria-label="Toggle menu"` (or equivalent).
-  3. **Conditional panel:** A mobile-only menu panel that renders when `isOpen` is true, e.g. `{isOpen && ( <div className="..."> ... nav links ... </div> )}`. Use responsive classes (e.g. `md:hidden`) so the panel is shown only on small screens if the desktop nav is separate.
-  4. **Close on navigation:** Each nav link in the mobile panel should call `onClick={() => setIsOpen(false)}` (or similar) so the menu closes when the user navigates.
-- Implement this in `appLayout.tsx` (or the component that owns the header/nav). See existing apps for the full pattern (state + button + conditional panel + link onClick).
-
-## Styling
+## Component Library + Styling (MANDATORY)
 
+- Use **shadcn/ui** for UI components: `import { Button } from '@/components/ui/button';`
 - 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.
+React apps must NOT import Salesforce platform modules like `lightning/*` or `@wire` (LWC-only)
 
 ## Data Access (CRITICAL)
 
-For all Salesforce data access (GraphQL, REST, Chatter, Connect, Apex REST, UI API, Einstein LLM), invoke the **`salesforce-data-access`** skill (`.a4drules/skills/salesforce-data-access/`). It enforces Data SDK usage, GraphQL-first preference, optional chaining, and documents when to use `sdk.fetch` via the `salesforce-rest-api-fetch` skill.
-
-## 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
+For all Salesforce data access (GraphQL, REST, Chatter, Connect, Apex REST, UI API, Einstein LLM), invoke the **`accessing-data`** skill (`.a4drules/skills/accessing-data/`). It enforces Data SDK usage, GraphQL-first preference, optional chaining, and documents when to use `sdk.fetch` via the `fetching-rest-api` skill.
 
-## Anti-Patterns (FORBIDDEN)
+### GraphQL (Preferred)
 
-- ❌ 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
-- ❌ Mixing `react-router` and `react-router-dom` (e.g. `RouterProvider` from `react-router` but `Link` from `react-router-dom`) — use one package for all routing imports
-- ❌ Using emojis anywhere in the app (labels, icons, empty states, headings, tooltips)
-- ❌ Using any icon library other than **lucide-react** (no Heroicons, react-icons, or emoji-as-icon)
-- ❌ Outputting or pasting raw HTML when editing UI — always edit the React/TSX source files (e.g. `Home.tsx`, `appLayout.tsx`, feature components)
-- ❌ Adding a hamburger or Menu icon for mobile nav without implementing toggle state, conditional menu panel, and close-on-navigate
+For queries and mutations, invoke the **`using-graphql`** skill (`.a4drules/skills/using-graphql/`). It covers schema exploration, query patterns, codegen, type generation, and guardrails.
 
-## Quality Checklist
+### UI API (Fallback)
 
-- [ ] Entry point maintained (`app.tsx`)
-- [ ] Uses shadcn/ui and Tailwind
-- [ ] Icons from **lucide-react** only; no emojis anywhere in UI or user-facing text
-- [ ] UI changes made by editing .tsx source files (never by pasting raw HTML)
-- [ ] If mobile hamburger exists: it has toggle state, conditional menu panel, and close on link click
-- [ ] All routing imports from same package as router (e.g. `react-router` only)
-- [ ] DataSDK used for all Salesforce API calls
-- [ ] Proper error handling with try/catch
-- [ ] Loading and error states implemented
-- [ ] No hardcoded credentials or IDs
+When GraphQL cannot cover the use case, use `sdk.fetch?.()` for UI API endpoints. See the **`fetching-rest-api`** skill (`.a4drules/skills/fetching-rest-api/`) for full REST API documentation.

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

@@ -6,10 +6,7 @@ paths:
 
 # Skills-First Protocol (MUST FOLLOW)
 
-**Before writing any code or executing any command**, search for relevant skills that may already provide guidance, patterns, or step-by-step instructions for the task at hand.
-
-## Core Directive
-Before planning, executing a 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.
+**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.

package/dist/AGENT.md

@@ -58,9 +58,9 @@ cd <sfdx-source>/webapplications/<appName>
 
 This project includes **.a4drules/** at the project root. Follow them when generating or editing code.
 
-- **Salesforce Data Access** (`.a4drules/skills/salesforce-data-access/`): Use for all Salesforce data fetches. Enforces Data SDK usage (`createDataSDK()` + `sdk.graphql` or `sdk.fetch`); GraphQL preferred, fetch when GraphQL is not sufficient.
-- **Salesforce REST API Fetch** (`.a4drules/skills/salesforce-rest-api-fetch/`): Use when implementing Chatter, Connect REST, Apex REST, UI API REST, or Einstein LLM calls via `sdk.fetch`.
-- **Salesforce GraphQL** (`.a4drules/skills/salesforce-graphql/`): Use when implementing Salesforce GraphQL queries or mutations. Sub-skills: `salesforce-graphql-explore-schema`, `salesforce-graphql-read-query`, `salesforce-graphql-mutation-query`.
+- **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`.
 
 When rules refer to "web app directory" or `<sfdx-source>/webapplications/<appName>/`, resolve `<sfdx-source>` from `sfdx-project.json` and use the **actual app folder name** for this project.
 
@@ -83,4 +83,4 @@ sf project deploy start --source-dir <packageDir> --target-org <alias>
 
 - **UI**: shadcn/ui + Tailwind. Import from `@/components/ui/...`.
 - **Entry**: Keep `App.tsx` and routes in `src/`; add features as new routes or sections, don't replace the app shell but you may modify it to match the requested design.
-- **Data (Salesforce)**: Invoke the `salesforce-data-access` skill for all Salesforce data fetches. The skill enforces use of the Data SDK (`createDataSDK()` + `sdk.graphql` or `sdk.fetch`) — never use `fetch` or `axios` directly. GraphQL is preferred; use `sdk.fetch` when GraphQL is not sufficient (e.g., Chatter, Connect REST). For GraphQL implementation, invoke the `salesforce-graphql` skill.
+- **Data (Salesforce)**: Invoke the `accessing-data` skill for all Salesforce data fetches. The skill enforces use of the Data SDK (`createDataSDK()` + `sdk.graphql` or `sdk.fetch`) — never use `fetch` or `axios` directly. GraphQL is preferred; use `sdk.fetch` when GraphQL is not sufficient (e.g., Chatter, Connect REST). For GraphQL implementation, invoke the `using-graphql` skill.

package/dist/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.107.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.106.2...v1.107.0) (2026-03-17)
+
+
+### Features
+
+* **template:** add sf-project-setup command at SFDX project root ([#301](https://github.com/salesforce-experience-platform-emu/webapps/issues/301)) ([5a187cd](https://github.com/salesforce-experience-platform-emu/webapps/commit/5a187cd2faeadcab6c8f206d8c110c29763983ec))
+
+
+
+
+
+## [1.106.2](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.106.1...v1.106.2) (2026-03-17)
+
+
+### Bug Fixes
+
+* attempt to make rules more concise ([#298](https://github.com/salesforce-experience-platform-emu/webapps/issues/298)) ([69b3dab](https://github.com/salesforce-experience-platform-emu/webapps/commit/69b3dab574caf140e549ef092fa8b8ac1819afd8))
+
+
+
+
+
 ## [1.106.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.106.0...v1.106.1) (2026-03-17)
 
 

package/dist/README.md

@@ -2,6 +2,16 @@
 
 Now that you’ve created a Salesforce DX project, what’s next? Here are some documentation resources to get you started.
 
+## Web app: install, build, and dev server
+
+From the **SFDX project root** (this directory), run:
+
+```bash
+npm run sf-project-setup
+```
+
+This installs dependencies in the web app, builds it, and starts the Vite dev server. Use this after cloning or extracting the project.
+
 ## How Do You Plan to Deploy Your Changes?
 
 Do you want to deploy a set of changes, or create a self-contained application? Choose a [development model](https://developer.salesforce.com/tools/vscode/en/user-guide/development-models).

package/dist/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-  "version": "1.106.1",
+  "version": "1.107.0",
   "description": "Base SFDX project template",
   "license": "SEE LICENSE IN LICENSE.txt",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
+    "sf-project-setup": "node scripts/sf-project-setup.mjs",
     "build": "echo 'No build required for base-sfdx-project'",
     "clean": "echo 'No clean required for base-sfdx-project'",
     "lint": "eslint **/{aura,lwc}/**/*.js",

package/dist/scripts/sf-project-setup.mjs

@@ -0,0 +1,66 @@
+#!/usr/bin/env node
+/**
+ * Run from SFDX project root: install dependencies, build, and launch the dev server
+ * for the web app in force-app/main/default/webapplications/.
+ *
+ * Usage: npm run sf-project-setup
+ * (from the directory that contains force-app/ and sfdx-project.json)
+ */
+
+import { spawnSync } from 'node:child_process';
+import { resolve, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { readdirSync, existsSync, readFileSync } from 'node:fs';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const ROOT = resolve(__dirname, '..');
+
+function resolveWebapplicationsDir() {
+  const sfdxPath = resolve(ROOT, 'sfdx-project.json');
+  if (!existsSync(sfdxPath)) {
+    console.error('Error: sfdx-project.json not found at project root.');
+    process.exit(1);
+  }
+  const sfdxProject = JSON.parse(readFileSync(sfdxPath, 'utf8'));
+  const pkgDir = sfdxProject?.packageDirectories?.[0]?.path;
+  if (!pkgDir) {
+    console.error('Error: No packageDirectories[].path found in sfdx-project.json.');
+    process.exit(1);
+  }
+  return resolve(ROOT, pkgDir, 'main', 'default', 'webapplications');
+}
+
+function discoverWebappDir() {
+  const webapplicationsDir = resolveWebapplicationsDir();
+  if (!existsSync(webapplicationsDir)) {
+    console.error(`Error: webapplications directory not found: ${webapplicationsDir}`);
+    process.exit(1);
+  }
+  const entries = readdirSync(webapplicationsDir, { withFileTypes: true });
+  const dirs = entries.filter((e) => e.isDirectory() && !e.name.startsWith('.'));
+  if (dirs.length === 0) {
+    console.error(`Error: No web app folder found under ${webapplicationsDir}`);
+    process.exit(1);
+  }
+  if (dirs.length > 1) {
+    console.log(`Multiple web apps found; using first: ${dirs[0].name}`);
+  }
+  return resolve(webapplicationsDir, dirs[0].name);
+}
+
+function run(label, cmd, args, opts) {
+  console.log(`\n--- ${label} ---\n`);
+  const result = spawnSync(cmd, args, { stdio: 'inherit', ...opts });
+  if (result.status !== 0) {
+    process.exit(result.status ?? 1);
+  }
+}
+
+const webappDir = discoverWebappDir();
+console.log('SFDX project root:', ROOT);
+console.log('Web app directory:', webappDir);
+
+run('npm install', 'npm', ['install'], { cwd: webappDir });
+run('npm run build', 'npm', ['run', 'build'], { cwd: webappDir });
+console.log('\n--- Launching dev server (Ctrl+C to stop) ---\n');
+run('npm run dev', 'npm', ['run', 'dev'], { cwd: webappDir });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-feature-react-file-upload-experimental",
-  "version": "1.106.1",
+  "version": "1.107.0",
   "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.106.1",
+    "@salesforce/webapp-experimental": "^1.107.0",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "nodemon": "^3.1.0",

package/dist/.a4drules/webapp-cli-commands.md

@@ -1,88 +0,0 @@
----
-description: CLI command generation rules — no node -e one-liners; safe quoting and scripts
-paths:
-  - "**/webapplications/**/*"
----
-
-# A4D Enforcement: CLI Command Generation & No `node -e` One-Liners
-
-When **generating any CLI/shell commands** (for the user or for automation), follow the rules below. Default shell is **Zsh** (macOS); commands must work there without Bash-only syntax.
-
----
-
-## 1. Never Use Complex `node -e` One-Liners
-
-**Forbidden:** `node -e` (or `node -p`, `node --eval`) for file manipulation, string replacement, reading/writing configs, or multi-line logic.
-
-**Why:** In Zsh, `node -e '...'` **silently breaks** due to:
-- **`!` (history expansion):** Zsh expands `!` in double-quoted strings → `event not found` or wrong output.
-- **Backticks:** `` ` `` is command substitution; the shell runs it before Node sees the string.
-- **Nested quoting:** Escaping differs between Bash and Zsh; multi-line JS in one string is fragile.
-
-**Allowed:** Trivial one-line only if it has **no** backticks, no `!`, no nested quotes, no multi-line, no `fs` usage. Example: `node -e "console.log(1+1)"`. If in doubt, **use a script file**.
-
----
-
-## 2. How To Generate CLI Commands Correctly
-
-### Run Node scripts by path, not inline code
-
-- **Do:** `node scripts/setup-cli.mjs --target-org myorg`
-- **Do:** `node path/to/script.mjs arg1 arg2`
-- **Do not:** `node -e "require('fs').writeFileSync(...)"` or any non-trivial inline JS.
-
-### For file edits or transforms
-
-1. **Prefer IDE/agent file tools** (StrReplace, Write, etc.) — they avoid the shell.
-2. **Otherwise:** write a **temporary `.js` or `.mjs` file**, run it, then remove it. Use a **heredoc with quoted delimiter** so the shell does not interpret `$`, `` ` ``, or `!`:
-
-```bash
-cat > /tmp/_transform.js << 'SCRIPT'
-const fs = require('fs');
-const data = JSON.parse(fs.readFileSync('package.json', 'utf8'));
-data.name = 'my-app';
-fs.writeFileSync('package.json', JSON.stringify(data, null, 2) + '\n');
-SCRIPT
-node /tmp/_transform.js && rm /tmp/_transform.js
-```
-
-3. **Simple replacements:** `sed -i '' 's/old/new/g' path/to/file` (macOS: `-i ''`).
-4. **JSON:** `jq '.name = "my-app"' package.json > tmp.json && mv tmp.json package.json`.
-
-### Quoting and shell safety
-
-- Use **single quotes** around the outer shell string when the inner content has `$`, `` ` ``, or `!`.
-- For heredocs that must be literal, use **`<< 'END'`** (quoted delimiter) so the body is not expanded.
-- **Do not** generate commands that rely on Bash-only features (e.g. `[[ ]]` is fine in Zsh; avoid `source` vs `.` if you need POSIX).
-
-### Paths and working directory
-
-- **State where to run from** when it matters, e.g. "From project root" or "From `force-app/main/default/webapplications/<appName>`".
-- Prefer **explicit paths** or `cd <dir> && ...` so the command is copy-paste safe.
-- This project: setup is `node scripts/setup-cli.mjs --target-org <alias>` from **project root**. Web app commands (`npm run dev`, `npm run build`, `npm run lint`) run from the **web app directory** (e.g. `force-app/main/default/webapplications/<appName>` or `**/webapplications/<appName>`).
-
-### npm / npx
-
-- Use **exact package names** (e.g. `npx @salesforce/webapps-features-experimental list`).
-- For app-specific scripts, **cd to the web app directory first**, then run `npm run <script>` or `npm install ...`.
-- Chain steps with `&&`; one logical command per line is clearer than one giant line.
-
-### Summary checklist when generating a command
-
-- [ ] No `node -e` / `node -p` / `node --eval` with complex or multi-line code.
-- [ ] If Node logic is needed, use `node path/to/script.mjs` or a temp script with heredoc `<< 'SCRIPT'`.
-- [ ] No unescaped `!`, `` ` ``, or `$` in double-quoted strings in Zsh.
-- [ ] Working directory and required args (e.g. `--target-org`) are clear.
-- [ ] Prefer file-editing tools over shell one-liners when editing project files.
-
----
-
-## 3. Violation Handling
-
-- If a generated command used a complex `node -e` one-liner, **revert and redo** using a script file, `sed`/`jq`, or IDE file tools.
-- If the user sees `event not found`, `unexpected token`, or garbled output, **check for**:
-  - `node -e` with special characters,
-  - Double-quoted strings containing `!` or backticks,
-  - Wrong working directory or missing args.
-
-**Cross-reference:** **webapp.md** (MUST FOLLOW #1) summarizes the no–`node -e` rule; this file is the full reference for CLI command generation and alternatives.

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

@@ -1,136 +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)
-```
-
-## 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`