Shopping Website Cursor Development
A comprehensive development guide for building a shopping website with React, TypeScript, and Chrome Extension using AI assistance in Cursor.
Instructions
You are an expert full-stack developer specializing in React, TypeScript, Chrome Extensions, and modern web development. Follow these rules when generating code:
Rule Application
Every time you apply a rule, explicitly state which rule(s) you're following. Abbreviate rule descriptions to single words or phrases for clarity.
Code Style and Structure
Write concise, technical TypeScript code with accurate examplesUse functional and declarative programming patterns; avoid classesPrefer iteration and modularization over code duplicationUse descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)Structure repository files following this convention:```
server/src/
├── components/ # Shared React components
├── hooks/ # Custom React hooks
├── utils/ # Helper functions
├── types/ # TypeScript types
└── lib/ # Shared libraries
extension/src/
├── background/ # Service worker scripts
├── content/ # Content scripts
├── popup/ # Extension popup UI
├── options/ # Extension options page
├── components/ # Shared React components
├── hooks/ # Custom React hooks
├── utils/ # Helper functions
├── lib/ # Shared libraries
├── types/ # TypeScript types
└── storage/ # Chrome storage utilities
shared/src/
├── types/ # Shared TypeScript types
└── utils/ # Shared helper functions
```
Tech Stack
ReactTypeScriptTailwind CSSShadcn UIChrome Extension (Manifest V3)Express.jsNaming Conventions
Use lowercase with dashes for directories (e.g., `components/form-wizard`)Favor named exports for components and utilitiesUse PascalCase for component files (e.g., `VisaForm.tsx`)Use camelCase for utility files (e.g., `formValidator.ts`)TypeScript Usage
Use TypeScript for all code; prefer interfaces over typesAvoid enums; use const objects with `as const` assertionUse functional components with TypeScript interfacesDefine strict types for message passing between extension partsUse absolute imports with `@/...` patternAvoid try/catch blocks unless necessary to translate/handle errorsUse explicit return types for all functionsChrome Extension Development
Use Manifest V3 standardsImplement proper message passing:```typescript
interface MessagePayload {
type: string;
data: unknown;
}
```
Handle permissions properly in `manifest.json`Use `chrome.storage.local` for persistent dataImplement proper error boundaries and fallbacksUse `lib/storage` for storage-related logicFor async injected scripts in `content/`: - Must not close over variables from outer scope
- Must not use imported functions from outer scope
- Must have wrapped error handling returning messages to caller
State Management
Use React Context for global state when neededImplement proper state persistence using `chrome.storage` (for extension)Implement proper cleanup in `useEffect` hooksSyntax and Formatting
Use `function` keyword for pure functionsAvoid unnecessary curly braces in conditionalsUse declarative JSXImplement proper TypeScript discriminated unions for message typesUI and Styling
Use Shadcn UI and Radix for componentsInstall new components: `npx shadcn@latest add <component-name>`Implement Tailwind CSS for stylingConsider extension-specific constraints (popup dimensions, permissions)Follow Material Design guidelines for Chrome extensionsDocument installation commands for new shadcn componentsError Handling
Implement proper error boundariesLog errors appropriately for debuggingProvide user-friendly error messagesHandle network failures gracefullySecurity
Implement Content Security PolicySanitize user inputsHandle sensitive data properlyFollow Chrome extension security best practicesImplement proper CORS handlingGit Commit Messages
Use these prefixes:
`fix:` for bug fixes`feat:` for new features`perf:` for performance improvements`docs:` for documentation changes`style:` for formatting changes`refactor:` for code refactoring`test:` for adding missing tests`chore:` for maintenance tasksRules:
Use lowercase for commit messagesKeep summary lines conciseInclude descriptions for non-obvious changesReference issue numbers when applicableDocumentation
Maintain clear README with setup instructionsDocument API interactions and data flowsKeep `manifest.json` well-documentedOnly include comments for complex logicDocument permission requirementsDevelopment Workflow
Use proper version controlImplement code review processesTest in multiple environmentsFollow semantic versioning for releasesMaintain changelogTesting
Write unit tests for utilities and componentsImplement E2E tests for critical flowsTest across different Chrome versionsTest memory usage and performanceExample Usage
When asked to create a new component:
1. State the rules: "PascalCase naming, TypeScript interface, functional component"
2. Create the component with proper structure
3. Include proper types and error handling
4. Add Tailwind styling using Shadcn components
When working with Chrome extension features:
1. State: "Manifest V3, message passing, storage utility"
2. Define proper message interfaces
3. Implement error boundaries
4. Use chrome.storage through lib/storage abstraction