🤖 Using Cursor Rules (If you’re using Cursor AI)

Cursor rules help customize how Cursor AI behaves in your ExtensionFast project. By setting up a .cursorrules file, you ensure Cursor understands your project’s conventions and provides more relevant suggestions.

📋 What Are Cursor Rules?

Cursor rules are configuration instructions that act as persistent context for the AI. Instead of repeating the same information in every chat (“we’re using React with WXT, Firebase for backend, Stripe for payments”), Cursor automatically knows your project setup and coding preferences.

🚀 Setup Instructions

Create the .cursorrules file in your ExtensionFast project root directory (the same level as package.json), create a new file named .cursorrules:


touch .cursorrules

Copy the cursor rules configuration into your .cursorrules file:


# ExtensionFast Development Rules
 
## Project Overview
This is a Chrome extension project built with ExtensionFast - a production-ready React/WXT boilerplate for rapid extension development.
 
## Tech Stack
- **Framework**: React with WXT (Web Extension Tools)
- **Build Tool**: Vite
- **Backend Options**: Firebase or Supabase
- **Payment Processing**: Stripe
- **Authentication**: Social and email auth
- **Package Manager**: npm
 
## Code Style & Standards
 
### General
- Use TypeScript for all new files
- Use functional components with React Hooks (no class components)
- Prefer `const` over `let`, avoid `var`
- Use async/await over promise chains
- Write descriptive variable and function names
 
### React Patterns
- Always use React Hooks (useState, useEffect, useContext, etc.)
- Keep components small and focused on a single responsibility
- Extract reusable logic into custom hooks
- Use proper dependency arrays in useEffect
- Avoid inline function definitions in JSX when possible
 
### File Structure
- Components go in `/components`
- Pages/views go in `/pages`
- Hooks go in `/hooks`
- Utils go in `/utils`
- Types go in `/types`
- Keep extension-specific files (background, content scripts) organized
 
## Chrome Extension Specifics
 
### Manifest
- Follow Chrome Extension Manifest V3 standards
- Always declare necessary permissions explicitly
- Keep permissions minimal for store approval
 
### Background Scripts
- Use service workers (Manifest V3 requirement)
- Keep background script logic lightweight
- Handle message passing properly between contexts
 
### Content Scripts
- Isolate styles to avoid conflicts with host pages
- Use message passing to communicate with background scripts
- Clean up listeners and observers on unmount
 
## Environment & Configuration
 
### Environment Variables
- Store all sensitive keys in `.env.local`
- Never commit `.env.local` to version control
- Use `VITE_` prefix for all environment variables
- Document required env vars in README
 
### Firebase/Supabase
- Choose one backend and stick with it
- Initialize connection in a single config file
- Use proper error handling for all database operations
- Implement proper security rules
 
## Authentication
- Use the built-in auth components from the boilerplate
- Handle auth state properly across extension contexts
- Store tokens securely
- Implement proper logout cleanup
 
## Stripe Integration
- Use Stripe test mode during development
- Handle payment failures gracefully
- Never expose secret keys in client-side code
- Implement proper webhook handling
 
## Development Workflow
 
### Commands
- `npm run dev` - Start development server
- `npm run build` - Build for production
- Always test in actual Chrome before submitting
 
### Testing
- Test in Chrome as an unpacked extension regularly
- Test all features after building for production
- Verify permissions are working correctly
- Test on clean browser profiles
 
## Store Submission
- Follow Chrome Web Store policies strictly
- Use proper screenshots and descriptions
- Ensure privacy policy is clear and accessible
- Test thoroughly before submission
 
## Best Practices
- Keep bundle size minimal
- Lazy load components when appropriate
- Implement proper error boundaries
- Use loading states for async operations
- Handle edge cases and errors gracefully
- Comment complex logic
- Keep UI responsive and accessible
 
## Security
- Sanitize user inputs
- Validate data from external sources
- Use Content Security Policy properly
- Never use `eval()` or similar unsafe practices
- Implement proper CORS handling
 
## Performance
- Minimize re-renders with proper memoization
- Use React.memo for expensive components
- Optimize images and assets
- Keep content scripts lightweight
- Use chrome.storage API efficiently
 
## Documentation
- Update README when adding new features
- Document environment variables
- Comment non-obvious code
- Keep inline documentation concise but clear

Save and restart Cursor, after saving the .cursorrules file, restart Cursor to ensure it picks up the new configuration.

You should notice Cursor follows ExtensionFast conventions automatically!

📁 File Location

Your .cursorrules file should be placed in the root directory:


extensionfast-project/
├── .cursorrules          ← Add here
├── package.json
├── wxt.config.ts
├── src/
│   ├── components/
│   ├── pages/
│   └── ...
├── public/
└── README.md

⚙️ Customizing Rules

Feel free to customize the .cursorrules file for your specific needs:

Add project-specific naming conventions
Include custom component patterns
Specify additional libraries or tools you’re using
Add team-specific guidelines

Simply edit the .cursorrules file and save - Cursor will use the updated rules immediately.

💬 Additional Resources

Cursor Documentation – Official Cursor documentation