@W-18737391 Add development guidelines and page creation rules for generated project

.cursor/rules/storefront-development/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 ./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.

.cursor/rules/storefront-development/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>
+```

.cursor/rules/storefront-development/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>
+```

.cursor/rules/storefront-development/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" />
+```

.cursor/rules/storefront-development/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" />
+```

.cursor/rules/storefront-development/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>
+```

.cursor/rules/storefront-development/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

.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`

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 [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)
 - Add `program.json` + Support for Agent-Friendly CLI Input via stdio [#2662](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2662)

packages/pwa-kit-create-app/assets/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

packages/pwa-kit-create-app/assets/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`