Cursor Rules for San Pedro Beach Resort

Comprehensive development rules for building a secure, scalable beach resort booking system with PostgreSQL/Supabase backend, Next.js frontend, and TypeScript.

What This Skill Does

Provides a complete set of development standards and best practices for a San Pedro Beach Resort booking project, covering database design, frontend development, security, file organization, testing, deployment, and project-specific business logic.

Instructions

Phase 1: Database & PostgreSQL/Supabase Setup

1. **Always use PostgreSQL syntax** for all database operations

2. **Create migrations in `docs/` folder** with naming: `YYYY-MM-DD_description.sql`

3. **Use snake_case** for all database identifiers (tables, columns, functions)

4. **Include standard fields** in all new tables:

- `id UUID DEFAULT gen_random_uuid() PRIMARY KEY`

- `created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()`

- `updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()`

5. **Use appropriate PostgreSQL data types**:

- `UUID` for IDs and foreign keys

- `TEXT` for strings (not VARCHAR)

- `NUMERIC(10,2)` for currency

- `BOOLEAN` for true/false

- `JSONB` for complex structures

- `TIMESTAMP WITH TIME ZONE` for dates

6. **Enable Row Level Security (RLS)** on all tables with `ALTER TABLE table_name ENABLE ROW LEVEL SECURITY;`

7. **Create RLS policies** for each operation in order: SELECT → INSERT → UPDATE → DELETE

8. **Implement role-based access control** with roles: 'admin', 'manager', 'employee', 'guest'

9. **Use `auth.uid()`** in policies to check user authentication

10. **Use Supabase client** from `@/lib/supabase` for all database operations

11. **Never expose service role key** in client-side code

12. **Create indexes** with naming: `idx_table_column`

Phase 2: Frontend & React/Next.js Development

1. **Use TypeScript** for all components and functions

2. **Create components** in `src/components/` with PascalCase naming

3. **Use functional components** with hooks (no class components)

4. **Add `'use client'`** directive for client-side components

5. **Keep components small** and focused on single responsibility

6. **Use Tailwind CSS** for all styling with green/yellow theme

7. **Implement mobile-first** responsive design

8. **Use React hooks** (useState, useEffect, useContext) for state

9. **Implement loading states** for all async operations

10. **Handle errors gracefully** with user-friendly messages

11. **Validate all forms** with proper error states

12. **Use Next.js Image component** for optimized images

Phase 3: Security Implementation

1. **Always check user permissions** before sensitive operations

2. **Implement role-based access control** in frontend and backend

3. **Validate all user inputs** on client and server side

4. **Use environment variables** for all API keys and secrets

5. **Never store sensitive data** in localStorage/sessionStorage

6. **Implement proper data sanitization** for user inputs

7. **Use HTTPS** for all external communications

8. **Implement rate limiting** for API endpoints

9. **Use secure session management** with proper token handling

10. **Implement proper logout** with token cleanup

Phase 4: File Organization & Naming

1. **Organize project** following structure:

- `src/app/` - Next.js app router pages

- `src/components/` - Reusable React components

- `src/lib/` - Utility functions and configurations

- `src/types/` - TypeScript type definitions

- `src/hooks/` - Custom React hooks

2. **Name files consistently**:

- Components: `PascalCase.tsx`

- Pages: `page.tsx`

- Utilities: `camelCase.ts`

- Types: `camelCase.ts`

- Constants: `UPPER_SNAKE_CASE.ts`

Phase 5: Data Import & CSV Handling

1. **Store CSV files** in `public/csv-imports/` directory

2. **Use descriptive filenames** (e.g., `employees_2025.csv`)

3. **Include headers** in all CSV files

4. **Use UTF-8 encoding** for international characters

5. **Validate CSV data** before database import

6. **Create import scripts** in `scripts/` directory

7. **Validate required fields** before insertion

8. **Check data types** match schema

9. **Handle missing/null values** appropriately

10. **Log all import operations** for audit trail

Phase 6: Code Quality & Testing

1. **Use ESLint** for linting and formatting

2. **Follow TypeScript strict mode** guidelines

3. **Implement error boundaries** for React components

4. **Use meaningful names** for variables and functions

5. **Add JSDoc comments** for complex functions

6. **Keep functions small** (max 20-30 lines)

7. **Use React.memo()** for expensive components

8. **Implement skeleton screens** for loading states

9. **Use code splitting** for large components

10. **Test responsive design** on multiple devices

Phase 7: API & Integration

1. **Use consistent URL patterns** (/api/resource)

2. **Implement proper HTTP status codes**

3. **Use JSON** for all responses

4. **Include proper error responses**

5. **Implement rate limiting** and pagination

6. **Use environment variables** for external API keys

7. **Add retry logic** for failed requests

8. **Cache responses** where appropriate

9. **Monitor API usage** and costs

Phase 8: Deployment & Environment

1. **Use `.env.local`** for local development

2. **Set Vercel environment variables** for production

3. **Never commit sensitive data** to version control

4. **Test builds locally** before deployment

5. **Use Node.js >= 20** for this project

6. **Optimize bundle size** with proper imports

7. **Implement proper error handling** for production

8. **Deploy to Vercel** with automatic builds

Phase 9: Business Logic (Booking System)

1. **Validate booking dates** (no past dates, proper duration)

2. **Calculate pricing** based on room type and duration

3. **Track inventory levels** with automatic alerts

4. **Handle payment processing** with secure receipts

5. **Implement guest management** with data protection

6. **Create user-friendly interfaces** for staff

7. **Implement reporting features** for management

Phase 10: Documentation & Maintenance

1. **Add README.md** for major components

2. **Document API endpoints** with examples

3. **Include setup instructions** for new developers

4. **Document database schema** with ERD diagrams

5. **Maintain changelog** for version updates

6. **Use descriptive commit messages** (conventional commits)

7. **Create feature branches** for new development

8. **Review code** before merging to main

9. **Keep commits atomic** and focused

Constraints

Example Usage

**Database Migration Example:**

```sql

-- File: docs/2025-01-15_create_bookings_table.sql

CREATE TABLE bookings (

id UUID DEFAULT gen_random_uuid() PRIMARY KEY,

user_id UUID NOT NULL REFERENCES auth.users(id),

room_type TEXT NOT NULL,

check_in TIMESTAMP WITH TIME ZONE NOT NULL,

check_out TIMESTAMP WITH TIME ZONE NOT NULL,

total_amount NUMERIC(10,2) NOT NULL,

status TEXT NOT NULL DEFAULT 'pending',

created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),

updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()

);

ALTER TABLE bookings ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Users can view own bookings"

ON bookings FOR SELECT

USING (auth.uid() = user_id);

```

**Component Example:**

```typescript

// src/components/BookingCard.tsx

'use client';

import { useState } from 'react';

import Image from 'next/image';

interface BookingCardProps {

roomType: string;

price: number;

available: boolean;

}

export default function BookingCard({ roomType, price, available }: BookingCardProps) {

const [isLoading, setIsLoading] = useState(false);

return (

<div className="rounded-lg border border-green-500 p-4 bg-yellow-50">

<h3 className="text-lg font-semibold text-green-800">{roomType}</h3>

<p className="text-gray-700">₱{price.toFixed(2)}/night</p>

{available ? (

<button className="mt-2 px-4 py-2 bg-green-600 text-white rounded">

Book Now

</button>

) : (

<span className="text-red-600">Not Available</span>

)}

</div>

);

}

```

Notes