Development guidelines for the CrossList marketplace management app built with React, Vite, Firebase, and Supabase
Development rules and conventions for the CrossList App, a marketplace management application that helps users cross-list products across multiple platforms.
When installing new packages, always use:
```bash
pnpm add <package-name>
```
For ShadCN components, use:
```bash
npx shadcn add <component-name>
```
You cannot directly view or modify `.env` files. When environment variable changes are needed, provide clear instructions to the user about what they should add to their `.env` file, including:
Example format:
```
VITE_FIREBASE_API_KEY=your_api_key_here
```
**Good** (Functional):
```javascript
const processProducts = (products) =>
products.filter(p => p.active).map(p => ({ ...p, listed: true }));
```
**Avoid** (OOP):
```javascript
class ProductProcessor {
process(products) {
// ...
}
}
```
**Never** attempt to start or run the application yourself. The user has the development server running in a separate terminal.
When changes are made, inform the user that they may need to:
When database schema modifications are required:
1. **Do not** execute SQL directly
2. **Write** the SQL statements to a file (e.g., `migrations/YYYY-MM-DD-description.sql`)
3. **Provide** clear comments explaining the changes
4. **Inform** the user they need to run the migration manually
Example migration file:
```sql
-- Add new column for product variants
ALTER TABLE products
ADD COLUMN variants JSONB DEFAULT '[]'::jsonb;
-- Create index for faster variant queries
CREATE INDEX idx_products_variants ON products USING GIN (variants);
```
The CrossList App is designed to help users manage product listings across multiple marketplace platforms. Key features include:
The UI is based on Base44 design system, customized with Tailwind and ShadCN components.
1. **Components**: Keep React components small and focused
2. **State**: Use hooks (useState, useEffect, useContext) for state management
3. **API Calls**: Centralize API logic using Hono endpoints
4. **Types**: Leverage TypeScript where possible for type safety
5. **Accessibility**: Ensure components meet WCAG standards
6. **Performance**: Optimize re-renders and use React.memo when appropriate
Maintain clean separation of concerns:
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/crosslist-app-development-rules/raw