development-guidelines.mdc

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