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 patternsRow Level Security (RLS) implementationReact/Next.js component structure and stylingSecurity and authentication patternsCSV data import workflowsDeployment and environment configurationInstructions 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 projectsCreate migrations in `docs/` folder with naming: `YYYY-MM-DD_description.sql`Use snake_case for all table names, column names, and function namesAlways include `id UUID DEFAULT gen_random_uuid() PRIMARY KEY` for new tablesInclude `created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()` and `updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()` in all tablesUse 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 orderUse role-based access control with roles: 'admin', 'manager', 'employee', 'guest'Always check user authentication with `auth.uid()` in policiesUse descriptive policy names (e.g., "Users can view own profile")**Supabase-Specific:**
Use Supabase client from `@/lib/supabase` for all database operationsNever expose service role key in client-side codeUse environment variables for all Supabase configurationImplement proper error handling for all Supabase operationsUse 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 functionsCreate components in `src/components/` with PascalCase namingUse functional components with hooks, not class componentsImplement proper prop types with TypeScript interfacesUse `'use client'` directive for client-side componentsKeep components small and focused on single responsibility**Styling:**
Use Tailwind CSS for all stylingFollow green and yellow theme color schemeUse semantic class names and avoid custom CSS when possibleImplement responsive design with mobile-first approachUse consistent spacing with Tailwind's spacing scaleApply dark theme with proper contrast ratios**State Management:**
Use React hooks (useState, useEffect, useContext) for stateImplement proper loading states for all async operationsHandle errors gracefully with user-friendly messagesUse optimistic updates where appropriateImplement proper form validation with error states3. Security & Authentication
**Authentication & Authorization:**
Always check user permissions before sensitive operationsImplement role-based access control in both frontend and backendUse secure session management with proper token handlingValidate all user inputs on both client and server sideImplement proper logout functionality with token cleanup**Data Protection:**
Never store sensitive data in localStorage or sessionStorageUse environment variables for all API keys and secretsImplement proper data sanitization for all user inputsUse HTTPS for all external communicationsImplement rate limiting for API endpoints4. 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 formattingFollow TypeScript strict mode guidelinesImplement proper error boundaries for React componentsUse meaningful variable and function namesAdd JSDoc comments for complex functionsKeep functions small (max 20-30 lines)**Performance:**
Use React.memo() for expensive componentsImplement proper loading states and skeleton screensUse Next.js Image component for optimized imagesImplement proper caching strategies for API callsUse code splitting for large components6. Data Import & CSV Handling
**CSV File Handling:**
Store CSV files in `public/csv-imports/` directoryUse descriptive filenames (e.g., `employees_2025.csv`)Include headers in all CSV filesUse UTF-8 encoding for international charactersValidate CSV data before importing to databaseCreate import scripts in `scripts/` directory**Data Validation:**
Validate all required fields before database insertionCheck data types match database schemaHandle missing or null values appropriatelyImplement data transformation for format consistencyLog all import operations for audit purposes7. Deployment & Environment
**Environment Configuration:**
Use `.env.local` for local developmentSet up Vercel environment variables for productionNever commit sensitive data to version controlUse different configurations for dev/staging/prodImplement proper logging for debugging**Build & Deployment:**
Test builds locally before deploymentUse proper Node.js version (>=20)Optimize bundle size with proper importsImplement proper error handling for productionUse Vercel for deployment with automatic builds8. Project-Specific Business Logic
**San Pedro Beach Resort Features:**
Implement booking system with proper validationCreate inventory management with stock trackingBuild payment processing with secure handlingDesign user-friendly interfaces for staffImplement reporting features for management**Business Rules:**
Validate booking dates (no past dates, proper duration)Calculate pricing based on room type and durationTrack inventory levels with automatic alertsHandle payment processing with proper receiptsImplement guest management with proper data protection9. Error Handling
**Database Errors:**
Handle connection errors gracefullyImplement retry logic for transient failuresLog all database errors with contextProvide user-friendly error messagesImplement fallback mechanisms where possible**Frontend Errors:**
Use error boundaries for React componentsImplement proper loading states during errorsShow user-friendly error messagesLog errors for debugging purposesImplement offline handling where appropriate10. Responsive Design & Accessibility
**Mobile-First:**
Design for mobile first, then enhance for desktopUse Tailwind responsive classes consistentlyTest on multiple screen sizes during developmentImplement touch-friendly interface elementsOptimize images for different screen densities**Accessibility:**
Use semantic HTML elementsImplement proper ARIA labels for screen readersEnsure proper color contrast ratiosAdd keyboard navigation supportTest with accessibility tools11. API & Integration Standards
**REST API Design:**
Use consistent URL patterns (/api/resource)Implement proper HTTP status codesUse JSON for all responsesInclude proper error responsesImplement rate limiting and pagination**External Integrations:**
Use environment variables for API keysImplement proper error handling for external APIsAdd retry logic for failed requestsCache responses where appropriateMonitor API usage and costs12. Git & Version Control
**Workflow:**
Use descriptive commit messages with conventional commitsCreate feature branches for new developmentReview code before merging to mainKeep commits atomic and focusedUse proper branch naming (feature/, bugfix/, hotfix/)**Code Review:**
Check for security vulnerabilities in all codeVerify database queries are optimizedTest responsive design on multiple devicesValidate accessibility standardsEnsure proper error handling is implementedExamples
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 onSubmit={handleSubmit} className="space-y-4">
{/* Form fields */}
</form>
)
}
```
Important Notes
Always prioritize user experience, data security, and code qualityTest all database changes in development before deploying to productionKeep the codebase maintainable with clear documentation and commentsFollow the mobile-first, responsive design approach consistentlyImplement proper error handling and user feedback at every layer