@salesforce/templates 66.5.5 → 66.6.0

package/lib/templates/project/reactb2x/_r_/webapp-react-typescript.md

@@ -1,205 +0,0 @@
----
-description: Strict TypeScript standards for type-safe React applications
-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
-
-### Event Handlers
-```typescript
-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
-
-See **webapp-react.md** for DataSDK usage patterns. Type your GraphQL responses:
-
-```typescript
-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
-const user = data as User;
-
-// REQUIRED: Type guards
-function isUser(obj: unknown): obj is User {
-  return typeof obj === 'object' && obj !== null && typeof (obj as User).id === 'string';
-}
-
-if (isUser(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/lib/templates/project/reactb2x/_r_/webapp-react.md

@@ -1,202 +0,0 @@
----
-description: React-specific patterns and Salesforce data access for SFDX web apps
-paths:
-  - "**/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`
-
-## 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 **webapp-ui-ux** skill (`.a4drules/skills/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.”
-
-## 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
-
-- 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)
-
-All Salesforce API calls **must** go through the DataSDK (`@salesforce/sdk-data`). Do NOT use `axios` or raw `fetch` — the SDK handles authentication and CSRF.
-
-### GraphQL (Preferred)
-
-For queries and mutations, follow the **`graphql-data-access`** skill in `feature-graphql`. It covers schema exploration, query patterns, codegen, type generation, and guardrails.
-
-### UI API (Fallback)
-
-When GraphQL cannot cover the use case, use `sdk.fetch!()` for UI API endpoints:
-
-```typescript
-const sdk = await getDataSDK();
-const resp = await sdk.fetch!('/services/data/v62.0/ui-api/records/{recordId}');
-```
-
-### 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
-- ❌ 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
-
-## Quality Checklist
-
-- [ ] 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

package/lib/templates/project/reactb2x/_r_/webapp-skills-first.md

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

package/lib/templates/project/reactb2x/_r_/webapp-webapplication.md

@@ -1,159 +0,0 @@
-
----
-paths:
-  - "**/webapplications/**/*"
----
-
-# WebApplication Requirements
-
-## Bundle Rules
-- A WebApplication bundle must live under `webapplications/<AppName>/`
-- The bundle must contain `<AppName>.webapplication-meta.xml`
-- The metadata filename must exactly match the folder name
-- A build output directory must exist and contain at least one file
-- Default build output directory: `dist/`
-- If `webapplication.json.outputDir` is set, it overrides `dist/`
-
-Valid example:
-```text
-webapplications/
-  MyApp/
-    MyApp.webapplication-meta.xml
-    webapplication.json
-    dist/
-      index.html
-```
-
-## Metadata XML
-Required fields:
-- `masterLabel`
-- `version` (max 20 chars)
-- `isActive` (boolean)
-
-Optional fields:
-- `description` (max 255 chars)
-
-## webapplication.json
-`webapplication.json` is optional.
-
-Allowed top-level keys only:
-- `outputDir`
-- `routing`
-- `headers`
-
-### File Constraints
-- Must be valid UTF-8 JSON
-- Max size: 100 KB
-- Root must be a non-empty object
-- Never allow `{}`, arrays, or primitives as the root
-
-### Path Safety
-Applies to:
-- `outputDir`
-- `routing.fallback`
-
-Reject:
-- backslashes
-- leading `/` or `\`
-- `..` segments
-- null or control characters
-- globs: `*`, `?`, `**`
-- `%`
-
-All resolved paths must stay within the application bundle.
-
-### outputDir
-- Must be a non-empty string
-- Must reference a subdirectory only
-- Reject `.` and `./`
-- The directory must exist in the bundle
-- The directory must contain at least one file
-
-### routing
-- If present, must be a non-empty object
-- Allowed keys only:
-  - `rewrites`
-  - `redirects`
-  - `fallback`
-  - `trailingSlash`
-  - `fileBasedRouting`
-
-#### routing.trailingSlash
-- Must be one of: `"always"`, `"never"`, `"auto"`
-
-#### routing.fileBasedRouting
-- Must be a boolean
-
-#### routing.fallback
-- Must be a non-empty string
-- Must satisfy Path Safety rules
-- Target file must exist
-
-#### routing.rewrites
-- Must be a non-empty array
-- Each item must be a non-empty object
-- Allowed keys: `route`, `rewrite`
-- `rewrite` must be a non-empty string
-- `route`, if present, must be a non-empty string
-
-Example:
-```json
-{
-  "routing": {
-    "rewrites": [
-      { "route": "/app/:path*", "rewrite": "/index.html" }
-    ]
-  }
-}
-```
-
-#### routing.redirects
-- Must be a non-empty array
-- Each item must be a non-empty object
-- Allowed keys: `route`, `redirect`, `statusCode`
-- `redirect` must be a non-empty string
-- `route`, if present, must be a non-empty string
-- `statusCode`, if present, must be one of: `301`, `302`, `307`, `308`
-
-Example:
-```json
-{
-  "routing": {
-    "redirects": [
-      { "route": "/old-page", "redirect": "/new-page", "statusCode": 301 }
-    ]
-  }
-}
-```
-
-### headers
-- If present, must be a non-empty array
-- Each item must be a non-empty object
-- Allowed keys: `source`, `headers`
-- `headers` must be a non-empty array
-
-Each header entry must contain:
-- `key`: non-empty string
-- `value`: non-empty string
-
-Example:
-```json
-{
-  "headers": [
-    {
-      "source": "/assets/**",
-      "headers": [
-        { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
-      ]
-    }
-  ]
-}
-```
-
-## Never Suggest
-- `{}` as the JSON root
-- `"routing": {}`
-- empty arrays
-- empty array items such as `[{}]`
-- `"outputDir": "."`
-- `"outputDir": "./"`

package/lib/templates/project/reactb2x/_r_/webapp.md

@@ -1,98 +0,0 @@
----
-description: Core web application rules for SFDX React apps
-paths:
-  - "**/webapplications/**/*"
----
-
-# Skills-First (MUST FOLLOW)
-
-**Before writing any code or running any command**, search for relevant skills (`SKILL.md` files) that cover your task. Read the full skill and follow its instructions. Skills live in `.a4drules/skills/` and `feature/*/skills/`. See **webapp-skills-first.md** for the full protocol and a task-to-skill lookup table.
-
-# Web App Generation
-
-## Before `sf webapp generate`
-
-**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`.
-
-```bash
-sf webapp generate -n MyWebApp -t reactbasic
-```
-
-Do not use `create-react-app`, Vite, or other generic scaffolds; use `sf webapp generate` so the app is SFDX-aware.
-
-## After Generation (MANDATORY)
-
-After generating or when touching an existing app:
-
-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.
-
-# Navigation & Layout (MANDATORY)
-
-Agents consistently miss these. **You must not leave them default.**
-
-## appLayout.tsx is the Source of Truth
-
-- **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 Making UI Changes
-
-**When making any change** that affects navigation, header, footer, sidebar, theme, or overall layout:
-
-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.
-
-## Navigation Menu (Critical)
-
-- **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").
-
-**Check before finishing:** Did I change the nav items and labels to match this app?
-
-## Placeholder Name & Design (Critical)
-
-- **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.
-
-**Check before finishing:** Is the app name and shell design still the template default? If yes, update it.
-
-## Where to Edit
-
-
-| 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.
-
-# 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.
-
-# 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.
-