San Pedro Beach Resort Development Rules

This skill provides comprehensive development guidelines for building a beach resort management system using PostgreSQL/Supabase, Next.js, TypeScript, and Tailwind CSS.

What This Skill Does

Enforces best practices and coding standards for a hospitality management application including:

Database schema design with proper PostgreSQL/Supabase patterns

Row Level Security (RLS) implementation

React/Next.js component structure and styling

Security and authentication patterns

CSV data import workflows

Deployment and environment configuration

Instructions for AI Agent

When working on this project, follow these comprehensive rules:

1. Database & PostgreSQL/Supabase Standards

**Schema & Migration Rules:**

Always use PostgreSQL syntax for Supabase projects

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

Use snake_case for all table names, column names, and function names

Always include `id UUID DEFAULT gen_random_uuid() PRIMARY KEY` for new tables

Include `created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()` and `updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()` in all tables

Use appropriate data types:

- `UUID` for IDs and foreign keys

- `TEXT` for strings (not VARCHAR)

- `NUMERIC(10,2)` for currency amounts

- `BOOLEAN` for true/false values

- `JSONB` for complex data structures

- `TIMESTAMP WITH TIME ZONE` for dates

**Row Level Security (RLS):**

Enable RLS on ALL tables: `ALTER TABLE table_name ENABLE ROW LEVEL SECURITY;`

Create policies for each operation (SELECT, INSERT, UPDATE, DELETE) in that order

Use role-based access control with roles: 'admin', 'manager', 'employee', 'guest'

Always check user authentication with `auth.uid()` in policies

Use descriptive policy names (e.g., "Users can view own profile")

**Supabase-Specific:**

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

Never expose service role key in client-side code

Use environment variables for all Supabase configuration

Implement proper error handling for all Supabase operations

Use real-time subscriptions only when necessary

**Naming Conventions:**

Tables: `snake_case` (e.g., `user_profiles`, `rental_units_pricing`)

Columns: `snake_case` (e.g., `first_name`, `check_in_date`)

Functions: `snake_case` (e.g., `get_user_role`, `calculate_total`)

Indexes: `idx_table_column` (e.g., `idx_user_profiles_role`)

2. Frontend & React/Next.js Standards

**Component Structure:**

Use TypeScript for all components and functions

Create components in `src/components/` with PascalCase naming

Use functional components with hooks, not class components

Implement proper prop types with TypeScript interfaces

Use `'use client'` directive for client-side components

Keep components small and focused on single responsibility

**Styling:**

Use Tailwind CSS for all styling

Follow green and yellow theme color scheme

Use semantic class names and avoid custom CSS when possible

Implement responsive design with mobile-first approach

Use consistent spacing with Tailwind's spacing scale

Apply dark theme with proper contrast ratios

**State Management:**

Use React hooks (useState, useEffect, useContext) for state

Implement proper loading states for all async operations

Handle errors gracefully with user-friendly messages

Use optimistic updates where appropriate

Implement proper form validation with error states

3. Security & Authentication

**Authentication & Authorization:**

Always check user permissions before sensitive operations

Implement role-based access control in both frontend and backend

Use secure session management with proper token handling

Validate all user inputs on both client and server side

Implement proper logout functionality with token cleanup

**Data Protection:**

Never store sensitive data in localStorage or sessionStorage

Use environment variables for all API keys and secrets

Implement proper data sanitization for all user inputs

Use HTTPS for all external communications

Implement rate limiting for API endpoints

4. File Organization

**Project Structure:**

```

src/

├── app/ # Next.js app router pages

├── components/ # Reusable React components

├── lib/ # Utility functions and configurations

├── types/ # TypeScript type definitions

└── hooks/ # Custom React hooks

```

**File Naming:**

Components: `PascalCase.tsx` (e.g., `UserProfile.tsx`)

Pages: `page.tsx` (Next.js app router)

Utilities: `camelCase.ts` (e.g., `formatCurrency.ts`)

Types: `camelCase.ts` (e.g., `userTypes.ts`)

Constants: `UPPER_SNAKE_CASE.ts` (e.g., `API_ENDPOINTS.ts`)

5. Testing & Quality

**Code Quality:**

Use ESLint for code linting and formatting

Follow TypeScript strict mode guidelines

Implement proper error boundaries for React components

Use meaningful variable and function names

Add JSDoc comments for complex functions

Keep functions small (max 20-30 lines)

**Performance:**

Use React.memo() for expensive components

Implement proper loading states and skeleton screens

Use Next.js Image component for optimized images

Implement proper caching strategies for API calls

Use code splitting for large components

6. Data Import & CSV Handling

**CSV File Handling:**

Store CSV files in `public/csv-imports/` directory

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

Include headers in all CSV files

Use UTF-8 encoding for international characters

Validate CSV data before importing to database

Create import scripts in `scripts/` directory

**Data Validation:**

Validate all required fields before database insertion

Check data types match database schema

Handle missing or null values appropriately

Implement data transformation for format consistency

Log all import operations for audit purposes

7. Deployment & Environment

**Environment Configuration:**

Use `.env.local` for local development

Set up Vercel environment variables for production

Never commit sensitive data to version control

Use different configurations for dev/staging/prod

Implement proper logging for debugging

**Build & Deployment:**

Test builds locally before deployment

Use proper Node.js version (>=20)

Optimize bundle size with proper imports

Implement proper error handling for production

Use Vercel for deployment with automatic builds

8. Project-Specific Business Logic

**San Pedro Beach Resort Features:**

Implement booking system with proper validation

Create inventory management with stock tracking

Build payment processing with secure handling

Design user-friendly interfaces for staff

Implement reporting features for management

**Business Rules:**

Validate booking dates (no past dates, proper duration)

Calculate pricing based on room type and duration

Track inventory levels with automatic alerts

Handle payment processing with proper receipts

Implement guest management with proper data protection

9. Error Handling

**Database Errors:**

Handle connection errors gracefully

Implement retry logic for transient failures

Log all database errors with context

Provide user-friendly error messages

Implement fallback mechanisms where possible

**Frontend Errors:**

Use error boundaries for React components

Implement proper loading states during errors

Show user-friendly error messages

Log errors for debugging purposes

Implement offline handling where appropriate

10. Responsive Design & Accessibility

**Mobile-First:**

Design for mobile first, then enhance for desktop

Use Tailwind responsive classes consistently

Test on multiple screen sizes during development

Implement touch-friendly interface elements

Optimize images for different screen densities

**Accessibility:**

Use semantic HTML elements

Implement proper ARIA labels for screen readers

Ensure proper color contrast ratios

Add keyboard navigation support

Test with accessibility tools

11. API & Integration Standards

**REST API Design:**

Use consistent URL patterns (/api/resource)

Implement proper HTTP status codes

Use JSON for all responses

Include proper error responses

Implement rate limiting and pagination

**External Integrations:**

Use environment variables for API keys

Implement proper error handling for external APIs

Add retry logic for failed requests

Cache responses where appropriate

Monitor API usage and costs

12. Git & Version Control

**Workflow:**

Use descriptive commit messages with conventional commits

Create feature branches for new development

Review code before merging to main

Keep commits atomic and focused

Use proper branch naming (feature/, bugfix/, hotfix/)

**Code Review:**

Check for security vulnerabilities in all code

Verify database queries are optimized

Test responsive design on multiple devices

Validate accessibility standards

Ensure proper error handling is implemented

Examples

Example 1: Creating a New Table with RLS

```sql

-- Create table with proper structure

CREATE TABLE rental_units (

id UUID DEFAULT gen_random_uuid() PRIMARY KEY,

unit_name TEXT NOT NULL,

unit_type TEXT NOT NULL,

price_per_night NUMERIC(10,2) NOT NULL,

max_guests INTEGER NOT NULL,

is_available BOOLEAN DEFAULT true,

created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),

updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()

);

-- Enable RLS

ALTER TABLE rental_units ENABLE ROW LEVEL SECURITY;

-- Create policies

CREATE POLICY "Guests can view available units"

ON rental_units FOR SELECT

TO authenticated

USING (is_available = true);

CREATE POLICY "Managers can manage all units"

ON rental_units FOR ALL

TO authenticated

USING (

(SELECT role FROM user_profiles WHERE id = auth.uid()) IN ('admin', 'manager')

);

```

Example 2: React Component with TypeScript

```typescript

'use client'

import { useState } from 'react'

interface BookingFormProps {

unitId: string

pricePerNight: number

}

export function BookingForm({ unitId, pricePerNight }: BookingFormProps) {

const [checkIn, setCheckIn] = useState('')

const [checkOut, setCheckOut] = useState('')

const [loading, setLoading] = useState(false)

const handleSubmit = async (e: React.FormEvent) => {

e.preventDefault()

setLoading(true)

try {

// Booking logic here

} catch (error) {

console.error('Booking failed:', error)

} finally {

setLoading(false)

}

return (

{/* Form fields */}

</form>

)

}

```

Important Notes

Always prioritize user experience, data security, and code quality

Test all database changes in development before deploying to production

Keep the codebase maintainable with clear documentation and comments

Follow the mobile-first, responsive design approach consistently

Implement proper error handling and user feedback at every layer

San Pedro Beach Resort Development Rules

San Pedro Beach Resort Development Rules

What This Skill Does

Instructions for AI Agent

1. Database & PostgreSQL/Supabase Standards

2. Frontend & React/Next.js Standards

3. Security & Authentication

4. File Organization

5. Testing & Quality

6. Data Import & CSV Handling

7. Deployment & Environment

8. Project-Specific Business Logic

9. Error Handling

10. Responsive Design & Accessibility

11. API & Integration Standards

12. Git & Version Control

Examples

Example 1: Creating a New Table with RLS

Example 2: React Component with TypeScript

Important Notes

Reviews (0)