From 2124053d0cc6951c60606540f42d501eb00fff9d Mon Sep 17 00:00:00 2001
From: Yuming Hsieh <yhsieh@salesforce.com>
Date: Thu, 10 Jul 2025 12:41:11 -0400
Subject: [PATCH 01/13] @W-18737391 Add developemnt guidelines and page
 creation rules

---
 .cursor/rules/development-guidelines.mdc      |  49 +++++++
 .cursor/rules/page-creation.mdc               |  15 +++
 .../cursor-rules/development-guidelines.mdc   | 111 ++++++++++++++++
 .../assets/cursor-rules/page-creation.mdc     |  15 +++
 .../src/utils/pwa-developer-guideline-tool.js | 124 +++++-------------
 .../pwa-developer-guideline-tool.test.js      |   7 +-
 6 files changed, 229 insertions(+), 92 deletions(-)
 create mode 100644 .cursor/rules/development-guidelines.mdc
 create mode 100644 .cursor/rules/page-creation.mdc
 create mode 100644 packages/pwa-kit-create-app/assets/cursor-rules/development-guidelines.mdc
 create mode 100644 packages/pwa-kit-create-app/assets/cursor-rules/page-creation.mdc

diff --git a/.cursor/rules/development-guidelines.mdc b/.cursor/rules/development-guidelines.mdc
new file mode 100644
index 0000000000..9eb666371d
--- /dev/null
+++ b/.cursor/rules/development-guidelines.mdc
@@ -0,0 +1,49 @@
+---
+description: Commerce Composable Storefront Development Guidelines
+globs: 
+alwaysApply: false
+---
+
+## Overview
+Guidelines for Salesforce Commerce Composable Storefront development using PWA Kit, Retail React App, and Chakra UI.
+
+## Core Principles
+- Analyze requirements and existing codebase thoroughly
+- Use existing components and hooks when possible
+- Plan before implementing
+- Test comprehensively with Jest
+
+## PWA Kit Essentials
+
+### Key Files
+- `config/default.js` - Main configuration
+- `app/routes.jsx` - Route definitions
+- `app/components/_app-config/` - App-wide configuration
+- `app/components/_app/` - Layout components (header, footer)
+- `app/components/_error/` - Error handling
+
+### Architecture
+- Server-side rendering (SSR) for initial loads
+- Client-side rendering (CSR) for interactions
+- Isomorphic code (works on server and client)
+- Proxy requests via `/mobify/proxy/<PROXY_PATH>`
+
+### Special Components
+- Components starting with `_` are special PWA Kit components
+- `_app-config`: Top-level app configuration
+- `_app`: Persistent layout (header, footer, sidebar)
+- `_error`: 404 and error pages
+
+## Development Rules
+- Use kebab-case for file names (except special components with `_`)
+- Use Chakra UI and existing components
+- Create modular, reusable components
+- Use React Hooks for state management
+- Access data via commerce-sdk-react hooks
+- Write comprehensive tests
+- Ensure mobile-friendly and accessible components
+
+- Maintain consistent code formatting using project standards.
+- Write comprehensive test coverage.
+- Ensure components are accessible and mobile-friendly.
+- Follow security best practices for all code.
diff --git a/.cursor/rules/page-creation.mdc b/.cursor/rules/page-creation.mdc
new file mode 100644
index 0000000000..fef8d263c9
--- /dev/null
+++ b/.cursor/rules/page-creation.mdc
@@ -0,0 +1,15 @@
+---
+description: Page Creation Rule
+globs:
+alwaysApply: false
+---
+USE WHEN create a new page
+
+**Mandatory**
+- ONLY Create a bare minimum page component
+- Do NOT include other project components or hooks unless specifically requested
+- Do NOT add extra styling, layout, or features unless explicitly asked
+
+## Implementation Steps
+1. Create simple component in `app/pages/[page-name]/index.jsx`
+2. Add route to `app/routes.jsx`
\ No newline at end of file
diff --git a/packages/pwa-kit-create-app/assets/cursor-rules/development-guidelines.mdc b/packages/pwa-kit-create-app/assets/cursor-rules/development-guidelines.mdc
new file mode 100644
index 0000000000..d095220354
--- /dev/null
+++ b/packages/pwa-kit-create-app/assets/cursor-rules/development-guidelines.mdc
@@ -0,0 +1,111 @@
+---
+description: Salesforce Commerce Composable Storefront Development Guidelines
+globs: 
+alwaysApply: false
+---
+
+## Overview
+This document offers guidelines in the development of Salesforce Commerce Composable Storefront applications using PWA Kit. The AI should possess a comprehensive understanding of the PWA Kit architecture, sample Retail React App, Chakra UI, and standard React application practices.
+
+## Core Principles
+
+### Project Understanding
+- Thoroughly analyze requests and the existing project for successful implementation.
+- Promptly clarify ambiguous requirements.
+
+### Development Workflow
+- **Analyze Requirements** - Clearly define the objectives and functionalities required.
+- **Review Existing Code** - Examine the current codebase to identify similar solutions and potentially reusable components.
+- **Understand Existing Hooks and Utilities** - Familiarize with hooks and utility functions available within the project, including those from commerce-sdk-react and template-retail-react-app modules.
+- **Plan Implementation** - Design component structure before coding.
+- **Implement Incrementally** - Develop and test the service in small, manageable steps.
+- **Test Thoroughly** - Ensure comprehensive testing, including the use of Jest.
+
+## Technical Stack
+
+### Core Technologies
+- **React** - UI components and SPA architecture
+- **Express** - Server-side rendering and backend
+- **@salesforce/commerce-sdk-react** - Commerce Cloud API integration (hooks)
+- **PWA Kit** - SSR, routing, config, Salesforce integration
+- **Chakra UI** - UI components and theming
+- **Emotion** - CSS-in-JS styling
+- **React Router** - Routing
+- **React Intl** - Localization
+- **React Query** - Data fetching/caching
+- **Webpack** - Bundling
+- **React Testing Library, Jest** - Testing libraries
+- **react-helmet, framer-motion, etc.** - Utilities, animation, head management
+- **ESLint/Prettier** - Code formatting and linting
+
+## PWK Kit Architecture
+
+### Configuration Files
+- PWA Kit apps are customized using configuration files for API access, URL formatting, and server-side rendering.
+- These files support JavaScript, YAML, and JSON formats, with default.js being the standard.
+- Configuration values are serialized for isomorphic rendering, so secrets must not be included.
+- Environment-specific configuration files can replace or complement default.js.
+- File precedence is .js > .yml > .yaml > .json if base names are the same.
+
+### Proxy Requests
+- Managed Runtime's proxy feature routes API requests through the storefront domain to avoid CORS issues and improve performance.
+- Local proxy configurations are set in config/default.js, while Managed Runtime deployments use Runtime Admin or the Managed Runtime API.
+- Requests use the /mobify/proxy/<PROXY_PATH> pattern.
+- Proxied requests and responses are modified for transparent operation.
+- Proxied requests are uncached by default but can be cached using a caching path prefix.
+
+### Rendering
+- PWA Kit uses server-side rendering (SSR) for fast initial page loads, leveraging CDN caching.
+- After the first load, client-side rendering (CSR) takes over for fluid user interactions.
+- Application code must be isomorphic, functioning in both server and client environments, often with conditional logic.
+- Props from API requests are serialized into the page source during SSR for client-side hydration.
+- A correlation ID is provided on each page for tracking requests across PWA Kit and other systems.
+
+### Routing
+- PWA Kit uses Express.js and React Router for handling requests and rendering components.
+- Routes are defined in app/routes.jsx as an array of objects with 'path' and 'component' properties.
+- You can use both withReactQuery and withLegacyGetProps at the same time.
+- getProps and shouldGetProps were removed from the default template of pages of the Retail React App, but aren't deprecated. Long-term support for these methods remains.
+
+### PWA Kit Special Components
+- Customize your storefront by overriding default special components that start with an underscore (_), such as app/components/_app-config/index.jsx.
+- app/components/_app-config: The top-level component for app-wide configurations like theme providers and state management.
+- app/components/_app: The child of _app-config. Use it for layout and UI that persist throughout your React app, such as the header, footer, and sidebar.
+- app/components/_error: Renders when a page or its data isn't found, or when an error occurs, returning a 404 status.
+
+### State Management
+- PWA Kit applications support various state management approaches, including simple prop-passing or React's Context API.
+- The React Context API can be used with useReducer and useContext for shared global state.
+- The AppConfig special component is the primary place to initialize a state management system.
+- When integrating libraries like Redux, AppConfig methods such as restore, freeze, extraGetPropsArgs, and render are utilized.
+
+### PWA Kit Extensibility
+- In PWA Kit v3, you can extend a base template (@salesforce/retail-react-app) by replacing specific files using a local "overrides directory."
+- Extensibility is configured in package.json with the base template (ccExtensibility.extends) and your overrides directory (ccExtensibility.overridesDir).
+- To override a file, recreate its exact path and filename in your overrides directory.
+
+## Development Guidelines
+### General Rules
+- Start development with base Retail React App sample codebase and tooling.
+- Use included npm scripts for automating development tasks like build, test, and lint.
+- Access Shopper data through the commerce-sdk-react hooks to fetch, cache, and mutate utilizing Salesforce Commerce API (SLAS) and OCAPI.
+- Use Chakra UI and existing components when available.
+- Create simple, functional, modular, reusable components.
+- Use kebab-case for file names. Only start with an underscore (_) if they are special components.
+- Use React Hooks (e.g., useState, useEffect, useContext, useMemo, useCallback) for state management and side effects.
+
+### How to create a New Page
+- **Mandatory** create a simple page without importing extra components and hooks unless requested by user.
+- Must specify both the page name and its route.
+- **If extensibility is disabled:**
+    - Create the new React component for your page in the default `app/pages` directory.
+    - Add the new route by specifying its `path` and `component` in the default `app/routes.jsx` file.
+- **If extensibility is enabled:**
+    - The overrides directory is set in `package.json` under `ccExtensibility.overridesDir` (defaults to `overrides`).
+    - Create the new page and update `routes.jsx` within the appropriate overrides directory.
+
+## Quality Standards
+- Maintain consistent code formatting using project standards.
+- Write comprehensive test coverage.
+- Ensure components are accessible and mobile-friendly.
+- Follow security best practices for all code.
diff --git a/packages/pwa-kit-create-app/assets/cursor-rules/page-creation.mdc b/packages/pwa-kit-create-app/assets/cursor-rules/page-creation.mdc
new file mode 100644
index 0000000000..fef8d263c9
--- /dev/null
+++ b/packages/pwa-kit-create-app/assets/cursor-rules/page-creation.mdc
@@ -0,0 +1,15 @@
+---
+description: Page Creation Rule
+globs:
+alwaysApply: false
+---
+USE WHEN create a new page
+
+**Mandatory**
+- ONLY Create a bare minimum page component
+- Do NOT include other project components or hooks unless specifically requested
+- Do NOT add extra styling, layout, or features unless explicitly asked
+
+## Implementation Steps
+1. Create simple component in `app/pages/[page-name]/index.jsx`
+2. Add route to `app/routes.jsx`
\ No newline at end of file
diff --git a/packages/pwa-storefront-mcp/src/utils/pwa-developer-guideline-tool.js b/packages/pwa-storefront-mcp/src/utils/pwa-developer-guideline-tool.js
index 2652bfa594..e30a61e113 100644
--- a/packages/pwa-storefront-mcp/src/utils/pwa-developer-guideline-tool.js
+++ b/packages/pwa-storefront-mcp/src/utils/pwa-developer-guideline-tool.js
@@ -6,99 +6,47 @@
  */
 import {EmptyJsonSchema} from './utils'
 
-const guidelinesText = `# Salesforce Commerce Composable Storefront Development Guidelines
+const guidelinesText = `# Commerce Composable Storefront Development Guidelines
 
 ## Overview
-This document offers guidelines in the development of Salesforce Commerce Composable Storefront applications using PWA Kit. The AI should possess a comprehensive understanding of the PWA Kit architecture, sample Retail React App, Chakra UI, and standard React application practices.
+Guidelines for Salesforce Commerce Composable Storefront development using PWA Kit, Retail React App, and Chakra UI.
 
 ## Core Principles
+- Analyze requirements and existing codebase thoroughly
+- Use existing components and hooks when possible
+- Plan before implementing
+- Test comprehensively with Jest
+
+## PWA Kit Essentials
+
+### Key Files
+- \`config/default.js\` - Main configuration
+- \`app/routes.jsx\` - Route definitions
+- \`app/components/_app-config/\` - App-wide configuration
+- \`app/components/_app/\` - Layout components (header, footer)
+- \`app/components/_error/\` - Error handling
+
+### Architecture
+- Server-side rendering (SSR) for initial loads
+- Client-side rendering (CSR) for interactions
+- Isomorphic code (works on server and client)
+- Proxy requests via \`/mobify/proxy/<PROXY_PATH>\`
+
+### Special Components
+- Components starting with \`_\` are special PWA Kit components
+- \`_app-config\`: Top-level app configuration
+- \`_app\`: Persistent layout (header, footer, sidebar)
+- \`_error\`: 404 and error pages
+
+## Development Rules
+- Use kebab-case for file names (except special components with \`_\`)
+- Use Chakra UI and existing components
+- Create modular, reusable components
+- Use React Hooks for state management
+- Access data via commerce-sdk-react hooks
+- Write comprehensive tests
+- Ensure mobile-friendly and accessible components
 
-### Project Understanding
-- Thoroughly analyze requests and the existing project for successful implementation.
-- Promptly clarify ambiguous requirements.
-
-### Development Workflow
-- **Analyze Requirements** - Clearly define the objectives and functionalities required.
-- **Review Existing Code** - Examine the current codebase to identify similar solutions and potentially reusable components.
-- **Understand Existing Hooks and Utilities** - Familiarize with hooks and utility functions available within the project, including those from commerce-sdk-react and template-retail-react-app modules.
-- **Plan Implementation** - Design component structure before coding.
-- **Implement Incrementally** - Develop and test the service in small, manageable steps.
-- **Test Thoroughly** - Ensure comprehensive testing, including the use of Jest.
-
-## Technical Stack
-
-### Core Technologies
-- **React** - UI components and SPA architecture
-- **Express** - Server-side rendering and backend
-- **@salesforce/commerce-sdk-react** - Commerce Cloud API integration (hooks)
-- **PWA Kit** - SSR, routing, config, Salesforce integration
-- **Chakra UI V2** - UI components and theming
-- **Emotion** - CSS-in-JS styling
-- **React Router** - Routing
-- **React Intl** - Localization
-- **React Query** - Data fetching/caching
-- **Webpack** - Bundling
-- **React Testing Library, Jest** - Testing libraries
-- **react-helmet, framer-motion, etc.** - Utilities, animation, head management
-- **ESLint/Prettier** - Code formatting and linting
-
-## PWK Kit Architecture
-
-### Configuration Files
-- PWA Kit apps are customized using configuration files for API access, URL formatting, and server-side rendering.
-- These files support JavaScript, YAML, and JSON formats, with default.js being the standard.
-- Configuration values are serialized for isomorphic rendering, so secrets must not be included.
-- Environment-specific configuration files can replace or complement default.js.
-- File precedence is .js > .yml > .yaml > .json if base names are the same.
-
-### Proxy Requests
-- Managed Runtime's proxy feature routes API requests through the storefront domain to avoid CORS issues and improve performance.
-- Local proxy configurations are set in config/default.js, while Managed Runtime deployments use Runtime Admin or the Managed Runtime API.
-- Requests use the /mobify/proxy/<PROXY_PATH> pattern.
-- Proxied requests and responses are modified for transparent operation.
-- Proxied requests are uncached by default but can be cached using a caching path prefix.
-
-### Rendering
-- PWA Kit uses server-side rendering (SSR) for fast initial page loads, leveraging CDN caching.
-- After the first load, client-side rendering (CSR) takes over for fluid user interactions.
-- Application code must be isomorphic, functioning in both server and client environments, often with conditional logic.
-- Props from API requests are serialized into the page source during SSR for client-side hydration.
-- A correlation ID is provided on each page for tracking requests across PWA Kit and other systems.
-
-### Routing
-- PWA Kit uses Express.js and React Router for handling requests and rendering components.
-- Routes are defined in app/routes.jsx as an array of objects with 'path' and 'component' properties.
-- You can use both withReactQuery and withLegacyGetProps at the same time.
-- getProps and shouldGetProps were removed from the default template of pages of the Retail React App, but aren't deprecated. Long-term support for these methods remains.
-
-### PWA Kit Special Components
-- Customize your storefront by overriding default special components that start with an underscore (_), such as app/components/_app-config/index.jsx.
-- app/components/_app-config: The top-level component for app-wide configurations like theme providers and state management.
-- app/components/_app: The child of _app-config. Use it for layout and UI that persist throughout your React app, such as the header, footer, and sidebar.
-- app/components/_error: Renders when a page or its data isn't found, or when an error occurs, returning a 404 status.
-
-### State Management
-- PWA Kit applications support various state management approaches, including simple prop-passing or React's Context API.
-- The React Context API can be used with useReducer and useContext for shared global state.
-- The AppConfig special component is the primary place to initialize a state management system.
-- When integrating libraries like Redux, AppConfig methods such as restore, freeze, extraGetPropsArgs, and render are utilized.
-
-### PWA Kit Extensibility
-- In PWA Kit v3, you can extend a base template (@salesforce/retail-react-app) by replacing specific files using a local "overrides directory."
-- Extensibility is configured in package.json with the base template (ccExtensibility.extends) and your overrides directory (ccExtensibility.overridesDir).
-- To override a file, recreate its exact path and filename in your overrides directory.
-
-### PWA Kit Storefront Development
-- Start development with Retail React App sample codebase and tooling.
-- Use included npm scripts for automating development tasks like build, test, and lint.
-- Access Shopper data through the commerce-sdk-react hooks to fetch, cache, and mutate utilizing Salesforce Commerce API (SLAS) and OCAPI.
-- Use Chakra UI and existing components when available.
-- Create simple, functional, modular, reusable components.
-- Use the React Helmet library to modify the HTML tags in Document, such as <head>.
-- Use kebab-case for file names. Only start with an underscore (_) if they are special components.
-- Use React Hooks (e.g., useState, useEffect, useContext, useMemo, useCallback) for state management and side effects. 
-
-## Quality Standards
 - Maintain consistent code formatting using project standards.
 - Write comprehensive test coverage.
 - Ensure components are accessible and mobile-friendly.
diff --git a/packages/pwa-storefront-mcp/src/utils/pwa-developer-guideline-tool.test.js b/packages/pwa-storefront-mcp/src/utils/pwa-developer-guideline-tool.test.js
index 3945affad1..dfd92d09b5 100644
--- a/packages/pwa-storefront-mcp/src/utils/pwa-developer-guideline-tool.test.js
+++ b/packages/pwa-storefront-mcp/src/utils/pwa-developer-guideline-tool.test.js
@@ -27,7 +27,7 @@ describe('PWA Development Guidelines', () => {
                     {
                         type: 'text',
                         text: expect.stringContaining(
-                            'Salesforce Commerce Composable Storefront Development Guidelines'
+                            'Commerce Composable Storefront Development Guidelines'
                         )
                     }
                 ]
@@ -41,9 +41,8 @@ describe('PWA Development Guidelines', () => {
             const requiredSections = [
                 'Overview',
                 'Core Principles',
-                'Technical Stack',
-                'PWK Kit Architecture',
-                'Quality Standards'
+                'PWA Kit Essentials',
+                'Development Rules'
             ]
 
             requiredSections.forEach((section) => {

From 9b336fb35c72f5b70d59cdab3a9bb5cc11ed9284 Mon Sep 17 00:00:00 2001
From: Yuming Hsieh <yhsieh@salesforce.com>
Date: Thu, 10 Jul 2025 12:47:13 -0400
Subject: [PATCH 02/13] remove from .cursor/rules folder

---
 .cursor/rules/development-guidelines.mdc | 49 ------------------------
 .cursor/rules/page-creation.mdc          | 15 --------
 2 files changed, 64 deletions(-)
 delete mode 100644 .cursor/rules/development-guidelines.mdc
 delete mode 100644 .cursor/rules/page-creation.mdc

diff --git a/.cursor/rules/development-guidelines.mdc b/.cursor/rules/development-guidelines.mdc
deleted file mode 100644
index 9eb666371d..0000000000
--- a/.cursor/rules/development-guidelines.mdc
+++ /dev/null
@@ -1,49 +0,0 @@
----
-description: Commerce Composable Storefront Development Guidelines
-globs: 
-alwaysApply: false
----
-
-## Overview
-Guidelines for Salesforce Commerce Composable Storefront development using PWA Kit, Retail React App, and Chakra UI.
-
-## Core Principles
-- Analyze requirements and existing codebase thoroughly
-- Use existing components and hooks when possible
-- Plan before implementing
-- Test comprehensively with Jest
-
-## PWA Kit Essentials
-
-### Key Files
-- `config/default.js` - Main configuration
-- `app/routes.jsx` - Route definitions
-- `app/components/_app-config/` - App-wide configuration
-- `app/components/_app/` - Layout components (header, footer)
-- `app/components/_error/` - Error handling
-
-### Architecture
-- Server-side rendering (SSR) for initial loads
-- Client-side rendering (CSR) for interactions
-- Isomorphic code (works on server and client)
-- Proxy requests via `/mobify/proxy/<PROXY_PATH>`
-
-### Special Components
-- Components starting with `_` are special PWA Kit components
-- `_app-config`: Top-level app configuration
-- `_app`: Persistent layout (header, footer, sidebar)
-- `_error`: 404 and error pages
-
-## Development Rules
-- Use kebab-case for file names (except special components with `_`)
-- Use Chakra UI and existing components
-- Create modular, reusable components
-- Use React Hooks for state management
-- Access data via commerce-sdk-react hooks
-- Write comprehensive tests
-- Ensure mobile-friendly and accessible components
-
-- Maintain consistent code formatting using project standards.
-- Write comprehensive test coverage.
-- Ensure components are accessible and mobile-friendly.
-- Follow security best practices for all code.
diff --git a/.cursor/rules/page-creation.mdc b/.cursor/rules/page-creation.mdc
deleted file mode 100644
index fef8d263c9..0000000000
--- a/.cursor/rules/page-creation.mdc
+++ /dev/null
@@ -1,15 +0,0 @@
----
-description: Page Creation Rule
-globs:
-alwaysApply: false
----
-USE WHEN create a new page
-
-**Mandatory**
-- ONLY Create a bare minimum page component
-- Do NOT include other project components or hooks unless specifically requested
-- Do NOT add extra styling, layout, or features unless explicitly asked
-
-## Implementation Steps
-1. Create simple component in `app/pages/[page-name]/index.jsx`
-2. Add route to `app/routes.jsx`
\ No newline at end of file

From 2ab0829a974593d5c2258c162752c1fbc076aced Mon Sep 17 00:00:00 2001
From: Yuming Hsieh <yhsieh@salesforce.com>
Date: Thu, 10 Jul 2025 17:12:58 -0400
Subject: [PATCH 03/13] update rule

---
 .../pwa-kit-create-app/assets/cursor-rules/page-creation.mdc     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/pwa-kit-create-app/assets/cursor-rules/page-creation.mdc b/packages/pwa-kit-create-app/assets/cursor-rules/page-creation.mdc
index fef8d263c9..13ced0ed09 100644
--- a/packages/pwa-kit-create-app/assets/cursor-rules/page-creation.mdc
+++ b/packages/pwa-kit-create-app/assets/cursor-rules/page-creation.mdc
@@ -6,6 +6,7 @@ alwaysApply: false
 USE WHEN create a new page
 
 **Mandatory**
+- DO ask user to clarify page name and page route before proceed
 - ONLY Create a bare minimum page component
 - Do NOT include other project components or hooks unless specifically requested
 - Do NOT add extra styling, layout, or features unless explicitly asked

From 3fd307825929ef881e6dd3b993d9371e3eccc772 Mon Sep 17 00:00:00 2001
From: Yuming Hsieh <yhsieh@salesforce.com>
Date: Thu, 10 Jul 2025 19:56:14 -0400
Subject: [PATCH 04/13] condense guideliens

---
 .../cursor-rules/development-guidelines.mdc   | 133 ++++--------------
 .../src/utils/pwa-developer-guideline-tool.js |  15 +-
 2 files changed, 33 insertions(+), 115 deletions(-)

diff --git a/packages/pwa-kit-create-app/assets/cursor-rules/development-guidelines.mdc b/packages/pwa-kit-create-app/assets/cursor-rules/development-guidelines.mdc
index d095220354..31626aa03b 100644
--- a/packages/pwa-kit-create-app/assets/cursor-rules/development-guidelines.mdc
+++ b/packages/pwa-kit-create-app/assets/cursor-rules/development-guidelines.mdc
@@ -4,108 +4,37 @@ globs:
 alwaysApply: false
 ---
 
+# Commerce Composable Storefront Development Guidelines
+
 ## Overview
-This document offers guidelines in the development of Salesforce Commerce Composable Storefront applications using PWA Kit. The AI should possess a comprehensive understanding of the PWA Kit architecture, sample Retail React App, Chakra UI, and standard React application practices.
+Guidelines for Salesforce Commerce Composable Storefront development using PWA Kit, Retail React App, and Chakra UI.
 
 ## Core Principles
-
-### Project Understanding
-- Thoroughly analyze requests and the existing project for successful implementation.
-- Promptly clarify ambiguous requirements.
-
-### Development Workflow
-- **Analyze Requirements** - Clearly define the objectives and functionalities required.
-- **Review Existing Code** - Examine the current codebase to identify similar solutions and potentially reusable components.
-- **Understand Existing Hooks and Utilities** - Familiarize with hooks and utility functions available within the project, including those from commerce-sdk-react and template-retail-react-app modules.
-- **Plan Implementation** - Design component structure before coding.
-- **Implement Incrementally** - Develop and test the service in small, manageable steps.
-- **Test Thoroughly** - Ensure comprehensive testing, including the use of Jest.
-
-## Technical Stack
-
-### Core Technologies
-- **React** - UI components and SPA architecture
-- **Express** - Server-side rendering and backend
-- **@salesforce/commerce-sdk-react** - Commerce Cloud API integration (hooks)
-- **PWA Kit** - SSR, routing, config, Salesforce integration
-- **Chakra UI** - UI components and theming
-- **Emotion** - CSS-in-JS styling
-- **React Router** - Routing
-- **React Intl** - Localization
-- **React Query** - Data fetching/caching
-- **Webpack** - Bundling
-- **React Testing Library, Jest** - Testing libraries
-- **react-helmet, framer-motion, etc.** - Utilities, animation, head management
-- **ESLint/Prettier** - Code formatting and linting
-
-## PWK Kit Architecture
-
-### Configuration Files
-- PWA Kit apps are customized using configuration files for API access, URL formatting, and server-side rendering.
-- These files support JavaScript, YAML, and JSON formats, with default.js being the standard.
-- Configuration values are serialized for isomorphic rendering, so secrets must not be included.
-- Environment-specific configuration files can replace or complement default.js.
-- File precedence is .js > .yml > .yaml > .json if base names are the same.
-
-### Proxy Requests
-- Managed Runtime's proxy feature routes API requests through the storefront domain to avoid CORS issues and improve performance.
-- Local proxy configurations are set in config/default.js, while Managed Runtime deployments use Runtime Admin or the Managed Runtime API.
-- Requests use the /mobify/proxy/<PROXY_PATH> pattern.
-- Proxied requests and responses are modified for transparent operation.
-- Proxied requests are uncached by default but can be cached using a caching path prefix.
-
-### Rendering
-- PWA Kit uses server-side rendering (SSR) for fast initial page loads, leveraging CDN caching.
-- After the first load, client-side rendering (CSR) takes over for fluid user interactions.
-- Application code must be isomorphic, functioning in both server and client environments, often with conditional logic.
-- Props from API requests are serialized into the page source during SSR for client-side hydration.
-- A correlation ID is provided on each page for tracking requests across PWA Kit and other systems.
-
-### Routing
-- PWA Kit uses Express.js and React Router for handling requests and rendering components.
-- Routes are defined in app/routes.jsx as an array of objects with 'path' and 'component' properties.
-- You can use both withReactQuery and withLegacyGetProps at the same time.
-- getProps and shouldGetProps were removed from the default template of pages of the Retail React App, but aren't deprecated. Long-term support for these methods remains.
-
-### PWA Kit Special Components
-- Customize your storefront by overriding default special components that start with an underscore (_), such as app/components/_app-config/index.jsx.
-- app/components/_app-config: The top-level component for app-wide configurations like theme providers and state management.
-- app/components/_app: The child of _app-config. Use it for layout and UI that persist throughout your React app, such as the header, footer, and sidebar.
-- app/components/_error: Renders when a page or its data isn't found, or when an error occurs, returning a 404 status.
-
-### State Management
-- PWA Kit applications support various state management approaches, including simple prop-passing or React's Context API.
-- The React Context API can be used with useReducer and useContext for shared global state.
-- The AppConfig special component is the primary place to initialize a state management system.
-- When integrating libraries like Redux, AppConfig methods such as restore, freeze, extraGetPropsArgs, and render are utilized.
-
-### PWA Kit Extensibility
-- In PWA Kit v3, you can extend a base template (@salesforce/retail-react-app) by replacing specific files using a local "overrides directory."
-- Extensibility is configured in package.json with the base template (ccExtensibility.extends) and your overrides directory (ccExtensibility.overridesDir).
-- To override a file, recreate its exact path and filename in your overrides directory.
-
-## Development Guidelines
-### General Rules
-- Start development with base Retail React App sample codebase and tooling.
-- Use included npm scripts for automating development tasks like build, test, and lint.
-- Access Shopper data through the commerce-sdk-react hooks to fetch, cache, and mutate utilizing Salesforce Commerce API (SLAS) and OCAPI.
-- Use Chakra UI and existing components when available.
-- Create simple, functional, modular, reusable components.
-- Use kebab-case for file names. Only start with an underscore (_) if they are special components.
-- Use React Hooks (e.g., useState, useEffect, useContext, useMemo, useCallback) for state management and side effects.
-
-### How to create a New Page
-- **Mandatory** create a simple page without importing extra components and hooks unless requested by user.
-- Must specify both the page name and its route.
-- **If extensibility is disabled:**
-    - Create the new React component for your page in the default `app/pages` directory.
-    - Add the new route by specifying its `path` and `component` in the default `app/routes.jsx` file.
-- **If extensibility is enabled:**
-    - The overrides directory is set in `package.json` under `ccExtensibility.overridesDir` (defaults to `overrides`).
-    - Create the new page and update `routes.jsx` within the appropriate overrides directory.
-
-## Quality Standards
-- Maintain consistent code formatting using project standards.
-- Write comprehensive test coverage.
-- Ensure components are accessible and mobile-friendly.
-- Follow security best practices for all code.
+- Analyze requirements and existing codebase thoroughly
+- Use existing components and hooks when possible
+- Plan before implementing
+- Test comprehensively with Jest
+
+## PWA Kit Essentials
+
+### Architecture
+- Server-side rendering (SSR) for initial loads
+- Client-side rendering (CSR) for interactions
+- Isomorphic code (works on server and client)
+- Proxy requests via `/mobify/proxy/<PROXY_PATH>`
+
+### Special Components
+- Components starting with `_` are special PWA Kit components
+- `_app-config`: Top-level app configuration
+- `_app`: Persistent layout (header, footer, sidebar)
+- `_error`: 404 and error pages
+
+## Development Rules
+- Use kebab-case for file names (except special components with `_`)
+- Use Chakra UI and existing components
+- Create modular, reusable components
+- Use React Hooks for state management
+- Access data via commerce-sdk-react hooks
+- Ensure mobile-friendly and accessible components
+- Maintain consistent code formatting using project standards
+- Write comprehensive test coverage
diff --git a/packages/pwa-storefront-mcp/src/utils/pwa-developer-guideline-tool.js b/packages/pwa-storefront-mcp/src/utils/pwa-developer-guideline-tool.js
index e30a61e113..9111144f68 100644
--- a/packages/pwa-storefront-mcp/src/utils/pwa-developer-guideline-tool.js
+++ b/packages/pwa-storefront-mcp/src/utils/pwa-developer-guideline-tool.js
@@ -19,13 +19,6 @@ Guidelines for Salesforce Commerce Composable Storefront development using PWA K
 
 ## PWA Kit Essentials
 
-### Key Files
-- \`config/default.js\` - Main configuration
-- \`app/routes.jsx\` - Route definitions
-- \`app/components/_app-config/\` - App-wide configuration
-- \`app/components/_app/\` - Layout components (header, footer)
-- \`app/components/_error/\` - Error handling
-
 ### Architecture
 - Server-side rendering (SSR) for initial loads
 - Client-side rendering (CSR) for interactions
@@ -44,13 +37,9 @@ Guidelines for Salesforce Commerce Composable Storefront development using PWA K
 - Create modular, reusable components
 - Use React Hooks for state management
 - Access data via commerce-sdk-react hooks
-- Write comprehensive tests
 - Ensure mobile-friendly and accessible components
-
-- Maintain consistent code formatting using project standards.
-- Write comprehensive test coverage.
-- Ensure components are accessible and mobile-friendly.
-- Follow security best practices for all code.
+- Maintain consistent code formatting using project standards
+- Write comprehensive test coverage
 `
 
 export default {

From 086381ff4e906646ff24c6f25feb9af23b839ceb Mon Sep 17 00:00:00 2001
From: Yuming Hsieh <yhsieh@salesforce.com>
Date: Fri, 11 Jul 2025 10:35:02 -0400
Subject: [PATCH 05/13] update changelog

---
 packages/pwa-kit-create-app/CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/pwa-kit-create-app/CHANGELOG.md b/packages/pwa-kit-create-app/CHANGELOG.md
index 11ecb70f68..51d0868bf4 100644
--- a/packages/pwa-kit-create-app/CHANGELOG.md
+++ b/packages/pwa-kit-create-app/CHANGELOG.md
@@ -1,3 +1,6 @@
+## v3.12.0-dev.0
+- Add development guidelines and create page Cursor rules for generated project
+
 ## v3.11.0-dev.0 (May 23, 2025)
 - Fix exiting before `program.json` content can be flushed [#2699](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2699)
 - Add `program.json` + Support for Agent-Friendly CLI Input via stdio [#2662](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2662)

From 3bf0c83561c5e72f426c8e5c7a11e826785becad Mon Sep 17 00:00:00 2001
From: Yuming Hsieh <yhsieh@salesforce.com>
Date: Fri, 11 Jul 2025 10:53:42 -0400
Subject: [PATCH 06/13] update rule to help pattern match

---
 .../pwa-kit-create-app/assets/cursor-rules/page-creation.mdc  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/pwa-kit-create-app/assets/cursor-rules/page-creation.mdc b/packages/pwa-kit-create-app/assets/cursor-rules/page-creation.mdc
index 13ced0ed09..a36d503e30 100644
--- a/packages/pwa-kit-create-app/assets/cursor-rules/page-creation.mdc
+++ b/packages/pwa-kit-create-app/assets/cursor-rules/page-creation.mdc
@@ -1,9 +1,9 @@
 ---
-description: Page Creation Rule
+description: Page Creation Rule - automatically apply when user asks to create new page, add page, make page, build page, generate page
 globs:
 alwaysApply: false
 ---
-USE WHEN create a new page
+USE WHEN create a new page, add a new page, make a new page, build a new page, generate a new page, create page, add page, make page, build page, generate page
 
 **Mandatory**
 - DO ask user to clarify page name and page route before proceed

From cce224d489b914762c5027ff4103ec54d01e2892 Mon Sep 17 00:00:00 2001
From: Yuming Hsieh <yhsieh@salesforce.com>
Date: Fri, 11 Jul 2025 18:49:45 -0400
Subject: [PATCH 07/13] added cursor rules

---
 packages/pwa-kit-create-app/CHANGELOG.md      |  2 +-
 .../.cursor/rules/accessibility-rule.mdc      |  8 +++
 .../accessibility-button-name.mdc             | 26 ++++++++
 .../accessibility-heading-order.mdc           | 26 ++++++++
 .../accessibility-image-alt.mdc               | 24 +++++++
 .../accessibility-input-label.mdc             | 27 ++++++++
 .../accessibility-link-name.mdc               | 26 ++++++++
 .../.cursor/rules/cursor-rule.mdc             | 66 +++++++++++++++++++
 .../.cursor/rules/development-guidelines.mdc  | 40 +++++++++++
 .../.cursor/rules/page-creation.mdc           | 16 +++++
 .../template-retail-react-app/CHANGELOG.md    |  4 ++
 11 files changed, 264 insertions(+), 1 deletion(-)
 create mode 100644 packages/template-retail-react-app/.cursor/rules/accessibility-rule.mdc
 create mode 100644 packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-button-name.mdc
 create mode 100644 packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-heading-order.mdc
 create mode 100644 packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-image-alt.mdc
 create mode 100644 packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-input-label.mdc
 create mode 100644 packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-link-name.mdc
 create mode 100644 packages/template-retail-react-app/.cursor/rules/cursor-rule.mdc
 create mode 100644 packages/template-retail-react-app/.cursor/rules/development-guidelines.mdc
 create mode 100644 packages/template-retail-react-app/.cursor/rules/page-creation.mdc

diff --git a/packages/pwa-kit-create-app/CHANGELOG.md b/packages/pwa-kit-create-app/CHANGELOG.md
index 51d0868bf4..9fd1d50361 100644
--- a/packages/pwa-kit-create-app/CHANGELOG.md
+++ b/packages/pwa-kit-create-app/CHANGELOG.md
@@ -1,5 +1,5 @@
 ## v3.12.0-dev.0
-- Add development guidelines and create page Cursor rules for generated project
+- Add development guidelines and create page Cursor rules for generated project [2786](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2786)
 
 ## v3.11.0-dev.0 (May 23, 2025)
 - Fix exiting before `program.json` content can be flushed [#2699](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2699)
diff --git a/packages/template-retail-react-app/.cursor/rules/accessibility-rule.mdc b/packages/template-retail-react-app/.cursor/rules/accessibility-rule.mdc
new file mode 100644
index 0000000000..85c9457602
--- /dev/null
+++ b/packages/template-retail-react-app/.cursor/rules/accessibility-rule.mdc
@@ -0,0 +1,8 @@
+---
+description: Check and verify accessibility on local project
+globs: 
+alwaysApply: false
+---
+To check accessibility of a project, use the accessibility rules defined in PROJECT_ROOT/.cursor/rules/cursor-accessibility-mdc/ directory.
+Run an automated scan for the entire codebase within the project and check for any violations.
+Show the scanned results in summary and detailed violations if any.
\ No newline at end of file
diff --git a/packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-button-name.mdc b/packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-button-name.mdc
new file mode 100644
index 0000000000..e7e9e2b063
--- /dev/null
+++ b/packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-button-name.mdc
@@ -0,0 +1,26 @@
+---
+description: When accessibility is checked. Check if Buttons must have a discernible name using text or aria attributes
+globs: 
+alwaysApply: false
+---
+
+# Rule: accessibility-button-name
+
+Buttons must have a discernible name using text or aria attributes
+
+## 🔍 Pattern
+
+```regex
+<button(?![^>]*\b(aria-label|aria-labelledby|title|name)=)
+```
+
+## 📍 Examples
+
+```tsx
+// ❌ Bad
+<button></button>
+// ✅ Good
+<button>Submit</button>
+// ✅ Good
+<button aria-label="Close dialog"><XIcon /></button>
+```
diff --git a/packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-heading-order.mdc b/packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-heading-order.mdc
new file mode 100644
index 0000000000..e8dc617420
--- /dev/null
+++ b/packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-heading-order.mdc
@@ -0,0 +1,26 @@
+---
+description: When accessibility is checked. Check if heading levels should increase sequentially for semantic structure
+globs: 
+alwaysApply: false
+---
+
+# Rule: accessibility-heading-order
+
+Heading levels should increase sequentially for semantic structure
+
+## 🔍 Pattern
+
+```regex
+<h([3-6])>
+```
+
+## 📍 Examples
+
+```tsx
+// ❌ Bad
+<h1>Main Title</h1>
+<h4>Subsection</h4>
+// ✅ Good
+<h1>Main Title</h1>
+<h2>Subsection</h2>
+```
diff --git a/packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-image-alt.mdc b/packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-image-alt.mdc
new file mode 100644
index 0000000000..fbea04b3fe
--- /dev/null
+++ b/packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-image-alt.mdc
@@ -0,0 +1,24 @@
+---
+description: When accessibility is checked. Ensure all <img> tags include descriptive alt attributes
+globs: 
+alwaysApply: false
+---
+
+# Rule: accessibility-image-alt
+
+Ensure all <img> tags include descriptive alt attributes
+
+## 🔍 Pattern
+
+```regex
+<img(?![^>]*\balt=)
+```
+
+## 📍 Examples
+
+```tsx
+// ❌ Bad
+<img src="photo.jpg" />
+// ✅ Good
+<img src="photo.jpg" alt="Company logo" />
+```
diff --git a/packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-input-label.mdc b/packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-input-label.mdc
new file mode 100644
index 0000000000..736fb0d739
--- /dev/null
+++ b/packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-input-label.mdc
@@ -0,0 +1,27 @@
+---
+description: When accessibility is checked. Check if Input fields must have a label or aria-label for screen readers
+globs: 
+alwaysApply: false
+---
+
+# Rule: accessibility-input-label
+
+Input fields must have a label or aria-label for screen readers
+
+## 🔍 Pattern
+
+```regex
+<input(?![^>]*(aria-label|aria-labelledby|id=))
+```
+
+## 📍 Examples
+
+```tsx
+// ❌ Bad
+<input type="text" />
+// ✅ Good
+<input aria-label="Search" />
+// ✅ Good with label
+<label htmlFor="email">Email</label>
+<input id="email" type="text" />
+```
diff --git a/packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-link-name.mdc b/packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-link-name.mdc
new file mode 100644
index 0000000000..3d12ed311e
--- /dev/null
+++ b/packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-link-name.mdc
@@ -0,0 +1,26 @@
+---
+description: When accessibility is checked. Check if Anchor tags must have accessible names
+globs: 
+alwaysApply: false
+---
+
+# Rule: accessibility-link-name
+
+Anchor tags must have accessible names
+
+## 🔍 Pattern
+
+```regex
+<a(?![^>]*\b(aria-label|aria-labelledby|title)=)(?![^>]*>\s*\w+\s*</a>)
+```
+
+## 📍 Examples
+
+```tsx
+// ❌ Bad
+<a href="/profile"></a>
+// ✅ Good
+<a href="/profile">Your Profile</a>
+// ✅ Good
+<a href="/profile" aria-label="Profile page"><UserIcon /></a>
+```
diff --git a/packages/template-retail-react-app/.cursor/rules/cursor-rule.mdc b/packages/template-retail-react-app/.cursor/rules/cursor-rule.mdc
new file mode 100644
index 0000000000..774d83ff2c
--- /dev/null
+++ b/packages/template-retail-react-app/.cursor/rules/cursor-rule.mdc
@@ -0,0 +1,66 @@
+---
+description: How to add or edit Cursor rules in our project
+globs: 
+alwaysApply: false
+---
+# Cursor Rules Location
+
+How to add new cursor rules to the project
+
+1. Always place rule files in PROJECT_ROOT/.cursor/rules/:
+    ```
+    .cursor/rules/
+    ├── your-rule-name.mdc
+    ├── another-rule.mdc
+    └── ...
+    ```
+
+2. Follow the naming convention:
+    - Use kebab-case for filenames
+    - Always use .mdc extension
+    - Make names descriptive of the rule's purpose
+
+3. Directory structure:
+    ```
+    PROJECT_ROOT/
+    ├── .cursor/
+    │   └── rules/
+    │       ├── your-rule-name.mdc
+    │       └── ...
+    └── ...
+    ```
+
+4. Never place rule files:
+    - In the project root
+    - In subdirectories outside .cursor/rules
+    - In any other location
+
+5. Cursor rules have the following structure:
+
+````
+---
+description: Short description of the rule's purpose
+globs: optional/path/pattern/**/* 
+alwaysApply: false
+---
+# Rule Title
+
+Main content explaining the rule with markdown formatting.
+
+1. Step-by-step instructions
+2. Code examples
+3. Guidelines
+
+Example:
+```typescript
+// Good example
+function goodExample() {
+  // Implementation following guidelines
+}
+
+// Bad example
+function badExample() {
+  // Implementation not following guidelines
+}
+```
+````
\ No newline at end of file
diff --git a/packages/template-retail-react-app/.cursor/rules/development-guidelines.mdc b/packages/template-retail-react-app/.cursor/rules/development-guidelines.mdc
new file mode 100644
index 0000000000..31626aa03b
--- /dev/null
+++ b/packages/template-retail-react-app/.cursor/rules/development-guidelines.mdc
@@ -0,0 +1,40 @@
+---
+description: Salesforce Commerce Composable Storefront Development Guidelines
+globs: 
+alwaysApply: false
+---
+
+# Commerce Composable Storefront Development Guidelines
+
+## Overview
+Guidelines for Salesforce Commerce Composable Storefront development using PWA Kit, Retail React App, and Chakra UI.
+
+## Core Principles
+- Analyze requirements and existing codebase thoroughly
+- Use existing components and hooks when possible
+- Plan before implementing
+- Test comprehensively with Jest
+
+## PWA Kit Essentials
+
+### Architecture
+- Server-side rendering (SSR) for initial loads
+- Client-side rendering (CSR) for interactions
+- Isomorphic code (works on server and client)
+- Proxy requests via `/mobify/proxy/<PROXY_PATH>`
+
+### Special Components
+- Components starting with `_` are special PWA Kit components
+- `_app-config`: Top-level app configuration
+- `_app`: Persistent layout (header, footer, sidebar)
+- `_error`: 404 and error pages
+
+## Development Rules
+- Use kebab-case for file names (except special components with `_`)
+- Use Chakra UI and existing components
+- Create modular, reusable components
+- Use React Hooks for state management
+- Access data via commerce-sdk-react hooks
+- Ensure mobile-friendly and accessible components
+- Maintain consistent code formatting using project standards
+- Write comprehensive test coverage
diff --git a/packages/template-retail-react-app/.cursor/rules/page-creation.mdc b/packages/template-retail-react-app/.cursor/rules/page-creation.mdc
new file mode 100644
index 0000000000..a36d503e30
--- /dev/null
+++ b/packages/template-retail-react-app/.cursor/rules/page-creation.mdc
@@ -0,0 +1,16 @@
+---
+description: Page Creation Rule - automatically apply when user asks to create new page, add page, make page, build page, generate page
+globs:
+alwaysApply: false
+---
+USE WHEN create a new page, add a new page, make a new page, build a new page, generate a new page, create page, add page, make page, build page, generate page
+
+**Mandatory**
+- DO ask user to clarify page name and page route before proceed
+- ONLY Create a bare minimum page component
+- Do NOT include other project components or hooks unless specifically requested
+- Do NOT add extra styling, layout, or features unless explicitly asked
+
+## Implementation Steps
+1. Create simple component in `app/pages/[page-name]/index.jsx`
+2. Add route to `app/routes.jsx`
\ No newline at end of file
diff --git a/packages/template-retail-react-app/CHANGELOG.md b/packages/template-retail-react-app/CHANGELOG.md
index 412226f840..5f580a8201 100644
--- a/packages/template-retail-react-app/CHANGELOG.md
+++ b/packages/template-retail-react-app/CHANGELOG.md
@@ -1,3 +1,7 @@
+
+## v7.0.0-dev.1
+- Added cursor rules from pwa-kit-create-app/assets/cursor-rules [2786](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2786)
+
 ## v7.0.0-dev.0 (May 20, 2025)
 
 - Improved the layout of product tiles in product scroll and product list [#2446](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2446)

From 57c29ecb539bf66a63e1e5c432aa14a8b56356a0 Mon Sep 17 00:00:00 2001
From: Yuming Hsieh <yhsieh@salesforce.com>
Date: Mon, 14 Jul 2025 12:22:06 -0400
Subject: [PATCH 08/13] move cursor rules to root

---
 .../accessibility-rule.mdc                    |  4 +-
 .../accessibility-button-name.mdc             |  0
 .../accessibility-heading-order.mdc           |  0
 .../accessibility-image-alt.mdc               |  0
 .../accessibility-input-label.mdc             |  0
 .../accessibility-link-name.mdc               |  0
 .../development-guidelines.mdc                |  0
 .../storefront-development/page-creation.mdc  | 16 +++++
 .../.cursor/rules/cursor-rule.mdc             | 66 -------------------
 9 files changed, 18 insertions(+), 68 deletions(-)
 rename {packages/template-retail-react-app/.cursor/rules => .cursor/rules/storefront-development}/accessibility-rule.mdc (78%)
 rename {packages/template-retail-react-app/.cursor/rules => .cursor/rules/storefront-development}/cursor-accessibility-mdc/accessibility-button-name.mdc (100%)
 rename {packages/template-retail-react-app/.cursor/rules => .cursor/rules/storefront-development}/cursor-accessibility-mdc/accessibility-heading-order.mdc (100%)
 rename {packages/template-retail-react-app/.cursor/rules => .cursor/rules/storefront-development}/cursor-accessibility-mdc/accessibility-image-alt.mdc (100%)
 rename {packages/template-retail-react-app/.cursor/rules => .cursor/rules/storefront-development}/cursor-accessibility-mdc/accessibility-input-label.mdc (100%)
 rename {packages/template-retail-react-app/.cursor/rules => .cursor/rules/storefront-development}/cursor-accessibility-mdc/accessibility-link-name.mdc (100%)
 rename {packages/template-retail-react-app/.cursor/rules => .cursor/rules/storefront-development}/development-guidelines.mdc (100%)
 create mode 100644 .cursor/rules/storefront-development/page-creation.mdc
 delete mode 100644 packages/template-retail-react-app/.cursor/rules/cursor-rule.mdc

diff --git a/packages/template-retail-react-app/.cursor/rules/accessibility-rule.mdc b/.cursor/rules/storefront-development/accessibility-rule.mdc
similarity index 78%
rename from packages/template-retail-react-app/.cursor/rules/accessibility-rule.mdc
rename to .cursor/rules/storefront-development/accessibility-rule.mdc
index 85c9457602..0c0b40a403 100644
--- a/packages/template-retail-react-app/.cursor/rules/accessibility-rule.mdc
+++ b/.cursor/rules/storefront-development/accessibility-rule.mdc
@@ -1,8 +1,8 @@
 ---
 description: Check and verify accessibility on local project
-globs: 
+globs:
 alwaysApply: false
 ---
-To check accessibility of a project, use the accessibility rules defined in PROJECT_ROOT/.cursor/rules/cursor-accessibility-mdc/ directory.
+To check accessibility of a project, use the accessibility rules defined in ./cursor-accessibility-mdc/ directory.
 Run an automated scan for the entire codebase within the project and check for any violations.
 Show the scanned results in summary and detailed violations if any.
\ No newline at end of file
diff --git a/packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-button-name.mdc b/.cursor/rules/storefront-development/cursor-accessibility-mdc/accessibility-button-name.mdc
similarity index 100%
rename from packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-button-name.mdc
rename to .cursor/rules/storefront-development/cursor-accessibility-mdc/accessibility-button-name.mdc
diff --git a/packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-heading-order.mdc b/.cursor/rules/storefront-development/cursor-accessibility-mdc/accessibility-heading-order.mdc
similarity index 100%
rename from packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-heading-order.mdc
rename to .cursor/rules/storefront-development/cursor-accessibility-mdc/accessibility-heading-order.mdc
diff --git a/packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-image-alt.mdc b/.cursor/rules/storefront-development/cursor-accessibility-mdc/accessibility-image-alt.mdc
similarity index 100%
rename from packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-image-alt.mdc
rename to .cursor/rules/storefront-development/cursor-accessibility-mdc/accessibility-image-alt.mdc
diff --git a/packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-input-label.mdc b/.cursor/rules/storefront-development/cursor-accessibility-mdc/accessibility-input-label.mdc
similarity index 100%
rename from packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-input-label.mdc
rename to .cursor/rules/storefront-development/cursor-accessibility-mdc/accessibility-input-label.mdc
diff --git a/packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-link-name.mdc b/.cursor/rules/storefront-development/cursor-accessibility-mdc/accessibility-link-name.mdc
similarity index 100%
rename from packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-link-name.mdc
rename to .cursor/rules/storefront-development/cursor-accessibility-mdc/accessibility-link-name.mdc
diff --git a/packages/template-retail-react-app/.cursor/rules/development-guidelines.mdc b/.cursor/rules/storefront-development/development-guidelines.mdc
similarity index 100%
rename from packages/template-retail-react-app/.cursor/rules/development-guidelines.mdc
rename to .cursor/rules/storefront-development/development-guidelines.mdc
diff --git a/.cursor/rules/storefront-development/page-creation.mdc b/.cursor/rules/storefront-development/page-creation.mdc
new file mode 100644
index 0000000000..a36d503e30
--- /dev/null
+++ b/.cursor/rules/storefront-development/page-creation.mdc
@@ -0,0 +1,16 @@
+---
+description: Page Creation Rule - automatically apply when user asks to create new page, add page, make page, build page, generate page
+globs:
+alwaysApply: false
+---
+USE WHEN create a new page, add a new page, make a new page, build a new page, generate a new page, create page, add page, make page, build page, generate page
+
+**Mandatory**
+- DO ask user to clarify page name and page route before proceed
+- ONLY Create a bare minimum page component
+- Do NOT include other project components or hooks unless specifically requested
+- Do NOT add extra styling, layout, or features unless explicitly asked
+
+## Implementation Steps
+1. Create simple component in `app/pages/[page-name]/index.jsx`
+2. Add route to `app/routes.jsx`
\ No newline at end of file
diff --git a/packages/template-retail-react-app/.cursor/rules/cursor-rule.mdc b/packages/template-retail-react-app/.cursor/rules/cursor-rule.mdc
deleted file mode 100644
index 774d83ff2c..0000000000
--- a/packages/template-retail-react-app/.cursor/rules/cursor-rule.mdc
+++ /dev/null
@@ -1,66 +0,0 @@
----
-description: How to add or edit Cursor rules in our project
-globs: 
-alwaysApply: false
----
-# Cursor Rules Location
-
-How to add new cursor rules to the project
-
-1. Always place rule files in PROJECT_ROOT/.cursor/rules/:
-    ```
-    .cursor/rules/
-    ├── your-rule-name.mdc
-    ├── another-rule.mdc
-    └── ...
-    ```
-
-2. Follow the naming convention:
-    - Use kebab-case for filenames
-    - Always use .mdc extension
-    - Make names descriptive of the rule's purpose
-
-3. Directory structure:
-    ```
-    PROJECT_ROOT/
-    ├── .cursor/
-    │   └── rules/
-    │       ├── your-rule-name.mdc
-    │       └── ...
-    └── ...
-    ```
-
-4. Never place rule files:
-    - In the project root
-    - In subdirectories outside .cursor/rules
-    - In any other location
-
-5. Cursor rules have the following structure:
-
-````
----
-description: Short description of the rule's purpose
-globs: optional/path/pattern/**/* 
-alwaysApply: false
----
-# Rule Title
-
-Main content explaining the rule with markdown formatting.
-
-1. Step-by-step instructions
-2. Code examples
-3. Guidelines
-
-Example:
-```typescript
-// Good example
-function goodExample() {
-  // Implementation following guidelines
-}
-
-// Bad example
-function badExample() {
-  // Implementation not following guidelines
-}
-```
-````
\ No newline at end of file

From 90faabc2d50911c36dfbcce15913fe0d32bb324a Mon Sep 17 00:00:00 2001
From: Yuming Hsieh <yhsieh@salesforce.com>
Date: Mon, 14 Jul 2025 12:24:40 -0400
Subject: [PATCH 09/13] move cursor rules to root

---
 .../.cursor/rules/page-creation.mdc              | 16 ----------------
 1 file changed, 16 deletions(-)
 delete mode 100644 packages/template-retail-react-app/.cursor/rules/page-creation.mdc

diff --git a/packages/template-retail-react-app/.cursor/rules/page-creation.mdc b/packages/template-retail-react-app/.cursor/rules/page-creation.mdc
deleted file mode 100644
index a36d503e30..0000000000
--- a/packages/template-retail-react-app/.cursor/rules/page-creation.mdc
+++ /dev/null
@@ -1,16 +0,0 @@
----
-description: Page Creation Rule - automatically apply when user asks to create new page, add page, make page, build page, generate page
-globs:
-alwaysApply: false
----
-USE WHEN create a new page, add a new page, make a new page, build a new page, generate a new page, create page, add page, make page, build page, generate page
-
-**Mandatory**
-- DO ask user to clarify page name and page route before proceed
-- ONLY Create a bare minimum page component
-- Do NOT include other project components or hooks unless specifically requested
-- Do NOT add extra styling, layout, or features unless explicitly asked
-
-## Implementation Steps
-1. Create simple component in `app/pages/[page-name]/index.jsx`
-2. Add route to `app/routes.jsx`
\ No newline at end of file

From 3e0d98ac33b2a7b4517fbcf148076c325d4ab99a Mon Sep 17 00:00:00 2001
From: Yuming Hsieh <yhsieh@salesforce.com>
Date: Mon, 14 Jul 2025 12:35:45 -0400
Subject: [PATCH 10/13] revert change log

---
 packages/template-retail-react-app/CHANGELOG.md | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/template-retail-react-app/CHANGELOG.md b/packages/template-retail-react-app/CHANGELOG.md
index 5f580a8201..412226f840 100644
--- a/packages/template-retail-react-app/CHANGELOG.md
+++ b/packages/template-retail-react-app/CHANGELOG.md
@@ -1,7 +1,3 @@
-
-## v7.0.0-dev.1
-- Added cursor rules from pwa-kit-create-app/assets/cursor-rules [2786](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2786)
-
 ## v7.0.0-dev.0 (May 20, 2025)
 
 - Improved the layout of product tiles in product scroll and product list [#2446](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2446)

From 88b6f9b3c497a5893a195026209393512fd32d60 Mon Sep 17 00:00:00 2001
From: Yuming Hsieh <yhsieh@salesforce.com>
Date: Mon, 14 Jul 2025 17:15:28 -0400
Subject: [PATCH 11/13] nested cursor rules

---
 .../.cursor/rules}/accessibility-rule.mdc     |  0
 .../accessibility-button-name.mdc             |  0
 .../accessibility-heading-order.mdc           |  0
 .../accessibility-image-alt.mdc               |  0
 .../accessibility-input-label.mdc             |  0
 .../accessibility-link-name.mdc               |  0
 .../.cursor/rules/cursor-rule.mdc             | 66 +++++++++++++++++++
 .../.cursor/rules}/development-guidelines.mdc |  0
 .../.cursor/rules}/page-creation.mdc          |  0
 9 files changed, 66 insertions(+)
 rename {.cursor/rules/storefront-development => packages/template-retail-react-app/.cursor/rules}/accessibility-rule.mdc (100%)
 rename {.cursor/rules/storefront-development => packages/template-retail-react-app/.cursor/rules}/cursor-accessibility-mdc/accessibility-button-name.mdc (100%)
 rename {.cursor/rules/storefront-development => packages/template-retail-react-app/.cursor/rules}/cursor-accessibility-mdc/accessibility-heading-order.mdc (100%)
 rename {.cursor/rules/storefront-development => packages/template-retail-react-app/.cursor/rules}/cursor-accessibility-mdc/accessibility-image-alt.mdc (100%)
 rename {.cursor/rules/storefront-development => packages/template-retail-react-app/.cursor/rules}/cursor-accessibility-mdc/accessibility-input-label.mdc (100%)
 rename {.cursor/rules/storefront-development => packages/template-retail-react-app/.cursor/rules}/cursor-accessibility-mdc/accessibility-link-name.mdc (100%)
 create mode 100644 packages/template-retail-react-app/.cursor/rules/cursor-rule.mdc
 rename {.cursor/rules/storefront-development => packages/template-retail-react-app/.cursor/rules}/development-guidelines.mdc (100%)
 rename {.cursor/rules/storefront-development => packages/template-retail-react-app/.cursor/rules}/page-creation.mdc (100%)

diff --git a/.cursor/rules/storefront-development/accessibility-rule.mdc b/packages/template-retail-react-app/.cursor/rules/accessibility-rule.mdc
similarity index 100%
rename from .cursor/rules/storefront-development/accessibility-rule.mdc
rename to packages/template-retail-react-app/.cursor/rules/accessibility-rule.mdc
diff --git a/.cursor/rules/storefront-development/cursor-accessibility-mdc/accessibility-button-name.mdc b/packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-button-name.mdc
similarity index 100%
rename from .cursor/rules/storefront-development/cursor-accessibility-mdc/accessibility-button-name.mdc
rename to packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-button-name.mdc
diff --git a/.cursor/rules/storefront-development/cursor-accessibility-mdc/accessibility-heading-order.mdc b/packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-heading-order.mdc
similarity index 100%
rename from .cursor/rules/storefront-development/cursor-accessibility-mdc/accessibility-heading-order.mdc
rename to packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-heading-order.mdc
diff --git a/.cursor/rules/storefront-development/cursor-accessibility-mdc/accessibility-image-alt.mdc b/packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-image-alt.mdc
similarity index 100%
rename from .cursor/rules/storefront-development/cursor-accessibility-mdc/accessibility-image-alt.mdc
rename to packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-image-alt.mdc
diff --git a/.cursor/rules/storefront-development/cursor-accessibility-mdc/accessibility-input-label.mdc b/packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-input-label.mdc
similarity index 100%
rename from .cursor/rules/storefront-development/cursor-accessibility-mdc/accessibility-input-label.mdc
rename to packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-input-label.mdc
diff --git a/.cursor/rules/storefront-development/cursor-accessibility-mdc/accessibility-link-name.mdc b/packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-link-name.mdc
similarity index 100%
rename from .cursor/rules/storefront-development/cursor-accessibility-mdc/accessibility-link-name.mdc
rename to packages/template-retail-react-app/.cursor/rules/cursor-accessibility-mdc/accessibility-link-name.mdc
diff --git a/packages/template-retail-react-app/.cursor/rules/cursor-rule.mdc b/packages/template-retail-react-app/.cursor/rules/cursor-rule.mdc
new file mode 100644
index 0000000000..774d83ff2c
--- /dev/null
+++ b/packages/template-retail-react-app/.cursor/rules/cursor-rule.mdc
@@ -0,0 +1,66 @@
+---
+description: How to add or edit Cursor rules in our project
+globs: 
+alwaysApply: false
+---
+# Cursor Rules Location
+
+How to add new cursor rules to the project
+
+1. Always place rule files in PROJECT_ROOT/.cursor/rules/:
+    ```
+    .cursor/rules/
+    ├── your-rule-name.mdc
+    ├── another-rule.mdc
+    └── ...
+    ```
+
+2. Follow the naming convention:
+    - Use kebab-case for filenames
+    - Always use .mdc extension
+    - Make names descriptive of the rule's purpose
+
+3. Directory structure:
+    ```
+    PROJECT_ROOT/
+    ├── .cursor/
+    │   └── rules/
+    │       ├── your-rule-name.mdc
+    │       └── ...
+    └── ...
+    ```
+
+4. Never place rule files:
+    - In the project root
+    - In subdirectories outside .cursor/rules
+    - In any other location
+
+5. Cursor rules have the following structure:
+
+````
+---
+description: Short description of the rule's purpose
+globs: optional/path/pattern/**/* 
+alwaysApply: false
+---
+# Rule Title
+
+Main content explaining the rule with markdown formatting.
+
+1. Step-by-step instructions
+2. Code examples
+3. Guidelines
+
+Example:
+```typescript
+// Good example
+function goodExample() {
+  // Implementation following guidelines
+}
+
+// Bad example
+function badExample() {
+  // Implementation not following guidelines
+}
+```
+````
\ No newline at end of file
diff --git a/.cursor/rules/storefront-development/development-guidelines.mdc b/packages/template-retail-react-app/.cursor/rules/development-guidelines.mdc
similarity index 100%
rename from .cursor/rules/storefront-development/development-guidelines.mdc
rename to packages/template-retail-react-app/.cursor/rules/development-guidelines.mdc
diff --git a/.cursor/rules/storefront-development/page-creation.mdc b/packages/template-retail-react-app/.cursor/rules/page-creation.mdc
similarity index 100%
rename from .cursor/rules/storefront-development/page-creation.mdc
rename to packages/template-retail-react-app/.cursor/rules/page-creation.mdc

From d4c545ff17dfb1e2d95316b1949e88de7196e3ed Mon Sep 17 00:00:00 2001
From: Yuming Hsieh <yhsieh@salesforce.com>
Date: Mon, 14 Jul 2025 17:17:52 -0400
Subject: [PATCH 12/13] move to nested rules location

---
 .../component-generation-requirements.mdc     | 29 -------------------
 .../scripts/create-mobify-app.js              | 28 +++++++++---------
 2 files changed, 14 insertions(+), 43 deletions(-)
 delete mode 100644 .cursor/rules/storefront-development/component-generation-requirements.mdc

diff --git a/.cursor/rules/storefront-development/component-generation-requirements.mdc b/.cursor/rules/storefront-development/component-generation-requirements.mdc
deleted file mode 100644
index b5ca1258b4..0000000000
--- a/.cursor/rules/storefront-development/component-generation-requirements.mdc
+++ /dev/null
@@ -1,29 +0,0 @@
----
-description: USE when creating new components
-globs: 
-alwaysApply: false
----
-# Component Generation Requirements
-
-## Process
-1. **Preferred**
- - Ask user to provide the component name, purpose and requirements.
- - Determine the appropriate component type (presentational, container, form, etc.).
- - Collected component information must be displayed and asked for confirmation.
-2. **Default to Simple** - Start with minimal implementation
-3. DO NOT add extra features unless asked
-
-## General Rules
-Create components at the components directory: `**/components/[component-name]/index.jsx`
-
-## Guidelines
-**IMPORTANT** 
-- Use functional components with hooks
-- Use PascalCase for component names
-- Use kebab-case for directories
-- Start simple, expand only if requested
-- One main purpose per component
-
-
-
-
diff --git a/packages/pwa-kit-create-app/scripts/create-mobify-app.js b/packages/pwa-kit-create-app/scripts/create-mobify-app.js
index a7de9ba5e3..ee389e12ba 100755
--- a/packages/pwa-kit-create-app/scripts/create-mobify-app.js
+++ b/packages/pwa-kit-create-app/scripts/create-mobify-app.js
@@ -392,20 +392,20 @@ const runGenerator = (context, {outputDir, templateVersion, verbose}) => {
     }
 
     // Copy the .cursor/rules directory if it exists
-    if (sh.test('-e', CURSOR_RULES_FROM_DIR)) {
-        const outputCursorRulesDir = p.join(outputDir, '.cursor', 'rules')
-
-        // Create the directory if it doesn't exist
-        if (!sh.test('-e', outputCursorRulesDir)) {
-            fs.mkdirSync(outputCursorRulesDir, {recursive: true})
-        }
-
-        // Copy the contents of CURSOR_RULES_FROM_DIR to outputCursorRulesDir
-        const files = fs.readdirSync(CURSOR_RULES_FROM_DIR)
-        files.forEach((file) => {
-            sh.cp('-rf', p.join(CURSOR_RULES_FROM_DIR, file), outputCursorRulesDir)
-        })
-    }
+    // if (sh.test('-e', CURSOR_RULES_FROM_DIR)) {
+    //     const outputCursorRulesDir = p.join(outputDir, '.cursor', 'rules')
+
+    //     // Create the directory if it doesn't exist
+    //     if (!sh.test('-e', outputCursorRulesDir)) {
+    //         fs.mkdirSync(outputCursorRulesDir, {recursive: true})
+    //     }
+
+    //     // Copy the contents of CURSOR_RULES_FROM_DIR to outputCursorRulesDir
+    //     const files = fs.readdirSync(CURSOR_RULES_FROM_DIR)
+    //     files.forEach((file) => {
+    //         sh.cp('-rf', p.join(CURSOR_RULES_FROM_DIR, file), outputCursorRulesDir)
+    //     })
+    // }
 
     // Install dependencies for the newly minted project.
     npmInstall(outputDir, {verbose})

From ae0fe8d17d29aee4435c90d1f2ac345241a4a6a0 Mon Sep 17 00:00:00 2001
From: Yuming Hsieh <yhsieh@salesforce.com>
Date: Mon, 14 Jul 2025 17:55:22 -0400
Subject: [PATCH 13/13] revert create mobify app js

---
 .../scripts/create-mobify-app.js              | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/pwa-kit-create-app/scripts/create-mobify-app.js b/packages/pwa-kit-create-app/scripts/create-mobify-app.js
index ee389e12ba..a7de9ba5e3 100755
--- a/packages/pwa-kit-create-app/scripts/create-mobify-app.js
+++ b/packages/pwa-kit-create-app/scripts/create-mobify-app.js
@@ -392,20 +392,20 @@ const runGenerator = (context, {outputDir, templateVersion, verbose}) => {
     }
 
     // Copy the .cursor/rules directory if it exists
-    // if (sh.test('-e', CURSOR_RULES_FROM_DIR)) {
-    //     const outputCursorRulesDir = p.join(outputDir, '.cursor', 'rules')
-
-    //     // Create the directory if it doesn't exist
-    //     if (!sh.test('-e', outputCursorRulesDir)) {
-    //         fs.mkdirSync(outputCursorRulesDir, {recursive: true})
-    //     }
-
-    //     // Copy the contents of CURSOR_RULES_FROM_DIR to outputCursorRulesDir
-    //     const files = fs.readdirSync(CURSOR_RULES_FROM_DIR)
-    //     files.forEach((file) => {
-    //         sh.cp('-rf', p.join(CURSOR_RULES_FROM_DIR, file), outputCursorRulesDir)
-    //     })
-    // }
+    if (sh.test('-e', CURSOR_RULES_FROM_DIR)) {
+        const outputCursorRulesDir = p.join(outputDir, '.cursor', 'rules')
+
+        // Create the directory if it doesn't exist
+        if (!sh.test('-e', outputCursorRulesDir)) {
+            fs.mkdirSync(outputCursorRulesDir, {recursive: true})
+        }
+
+        // Copy the contents of CURSOR_RULES_FROM_DIR to outputCursorRulesDir
+        const files = fs.readdirSync(CURSOR_RULES_FROM_DIR)
+        files.forEach((file) => {
+            sh.cp('-rf', p.join(CURSOR_RULES_FROM_DIR, file), outputCursorRulesDir)
+        })
+    }
 
     // Install dependencies for the newly minted project.
     npmInstall(outputDir, {verbose})