+```
+
+**Image Guidelines**:
+- Use WebP format
+- Provide width/height
+- Use `priority` for above-fold images
+- Use `loading="lazy"` for below-fold
+- Compress images before upload
+- Use CDN for image delivery
+
+### 3. Font Optimization
+
+**MUST** optimize web fonts:
+
+```typescript
+// next/font
+import { Inter } from 'next/font/google'
+
+const inter = Inter({
+ subsets: ['latin'],
+ display: 'swap', // Prevent invisible text
+ preload: true
+})
+
+// ✅ GOOD - Subset fonts
+font-family: Inter;
+unicode-range: U+0000-00FF; // Latin only
+
+// ❌ BAD - Load entire font
+font-family: 'Noto Sans'; // All languages
+```
+
+**Font Loading Strategy**:
+- Use `font-display: swap`
+- Preload critical fonts
+- Self-host fonts
+- Use variable fonts
+- Subset to required characters
+
+### 4. CSS Optimization
+
+**MUST** minimize CSS:
+
+```typescript
+// ✅ GOOD - Tailwind with purge
+module.exports = {
+ content: [
+ './app/**/*.{js,ts,jsx,tsx}',
+ './components/**/*.{js,ts,jsx,tsx}'
+ ],
+ // Removes unused CSS
+}
+
+// ✅ GOOD - Critical CSS inline
+
+
+// ❌ BAD - Large CSS bundles
+import 'bootstrap/dist/css/bootstrap.min.css'
+```
+
+**CSS Guidelines**:
+- Use Tailwind CSS (utility-first)
+- Purge unused styles
+- Inline critical CSS
+- Avoid `@import` in CSS
+- Use CSS modules for components
+
+### 5. JavaScript Optimization
+
+**MUST** optimize JavaScript:
+
+```typescript
+// ✅ GOOD - Tree shaking
+import { useState } from 'react'
+import { format } from 'date-fns/format'
+
+// ❌ BAD - Entire library imported
+import * as React from 'react'
+import dateFns from 'date-fns'
+
+// ✅ GOOD - Lazy component
+const HeavyComponent = lazy(() => import('./HeavyComponent'))
+
+// ❌ BAD - Always loaded
+import HeavyComponent from './HeavyComponent'
+```
+
+**JavaScript Guidelines**:
+- Use tree shaking
+- Minimize third-party libraries
+- Remove console.log in production
+- Use Web Workers for heavy computation
+- Defer non-critical scripts
+
+### 6. React Optimization
+
+**MUST** optimize React components:
+
+```typescript
+// ✅ GOOD - Memoization
+const MemoizedComponent = memo(Component)
+
+const expensiveValue = useMemo(() => {
+ return computeExpensiveValue(a, b)
+}, [a, b])
+
+const handleClick = useCallback(() => {
+ doSomething(a, b)
+}, [a, b])
+
+// ❌ BAD - Unnecessary re-renders
+const value = computeExpensiveValue(a, b) // Every render
+const handleClick = () => doSomething() // New function every render
+```
+
+**React Guidelines**:
+- Use `memo()` for expensive components
+- Use `useMemo()` for expensive calculations
+- Use `useCallback()` for event handlers
+- Avoid inline functions in JSX
+- Use keys properly in lists
+
+## Backend Optimization
+
+### 1. Database Query Optimization
+
+**MUST** optimize database queries:
+
+```typescript
+// ✅ GOOD - Select only needed fields
+const users = await prisma.user.findMany({
+ select: {
+ id: true,
+ firstName: true,
+ lastName: true
+ }
+})
+
+// ❌ BAD - Select all fields
+const users = await prisma.user.findMany()
+
+// ✅ GOOD - Use indexes
+await prisma.application.findMany({
+ where: { status: 'SUBMITTED' } // Has index
+})
+
+// ❌ BAD - No index
+await prisma.application.findMany({
+ where: {
+ personalStatement: { contains: 'keyword' } // No index
+ }
+})
+
+// ✅ GOOD - Batch queries
+const [users, apps] = await Promise.all([
+ prisma.user.findMany(),
+ prisma.application.findMany()
+])
+
+// ❌ BAD - Sequential queries
+const users = await prisma.user.findMany()
+const apps = await prisma.application.findMany()
+```
+
+**Database Guidelines**:
+- Select only needed fields
+- Use appropriate indexes
+- Avoid N+1 queries
+- Use pagination
+- Batch database operations
+- Use transactions sparingly
+
+### 2. API Response Optimization
+
+**MUST** optimize API responses:
+
+```typescript
+// ✅ GOOD - Cached response
+return NextResponse.json(data, {
+ headers: {
+ 'Cache-Control': 'private, max-age=60, stale-while-revalidate=300'
+ }
+})
+
+// ✅ GOOD - Compressed response
+import { gzip } from 'zlib'
+
+const compressed = gzip(JSON.stringify(data))
+
+// ✅ GOOD - Paginated response
+const page = parseInt(searchParams.get('page') || '1')
+const perPage = 50
+
+const data = await prisma.application.findMany({
+ take: perPage,
+ skip: (page - 1) * perPage
+})
+```
+
+**API Guidelines**:
+- Enable compression
+- Use caching headers
+- Implement pagination
+- Return only needed data
+- Use ETags for conditional requests
+
+### 3. Connection Pooling
+
+**MUST** use connection pooling:
+
+```typescript
+// ✅ GOOD - Prisma handles pooling
+const prisma = new PrismaClient()
+
+// Configuration in DATABASE_URL
+postgresql://user:pass@host:5432/db?connection_limit=10
+
+// ❌ BAD - New connection each time
+const prisma = new PrismaClient()
+// ... close connection
+await prisma.$disconnect()
+```
+
+### 4. Caching Strategy
+
+**MUST** implement caching:
+
+```typescript
+// ✅ GOOD - Response caching
+const cached = cache.get(key)
+if (cached) return cached
+
+const data = await fetchData()
+cache.set(key, data, 300) // 5 minutes
+
+// ✅ GOOD - Memoization
+const memoizedFn = memoize(expensiveFn)
+
+// Future: Redis caching
+import Redis from 'ioredis'
+const redis = new Redis(process.env.REDIS_URL)
+
+const cached = await redis.get(key)
+if (cached) return JSON.parse(cached)
+
+const data = await fetchData()
+await redis.setex(key, 300, JSON.stringify(data))
+```
+
+**Caching Guidelines**:
+- Cache frequently accessed data
+- Set appropriate TTL
+- Invalidate on updates
+- Use Redis for distributed caching
+- Cache at multiple levels
+
+## Network Optimization
+
+### 1. HTTP/2 & HTTP/3
+
+**MUST** leverage modern protocols:
+
+- Use HTTP/2 (automatic on Vercel)
+- Enable server push (cautiously)
+- Use multiplexing
+- Compress headers
+
+### 2. CDN Usage
+
+**MUST** use CDN for static assets:
+
+```typescript
+// Vercel CDN (automatic)
+// Static files in /public automatically served via CDN
+
+// External CDN for images
+
+
+// ❌ BAD - No lazy loading
+import HeavyComponent from './Heavy'
+
+// ❌ BAD - Inline styles
+
+
+// ❌ BAD - N+1 queries
+for (const user of users) {
+ const apps = await prisma.application.findMany({
+ where: { userId: user.id }
+ })
+}
+```
+
+### ✅ Do's
+
+```typescript
+// ✅ GOOD - Tree shaking
+import { debounce } from 'lodash-es'
+
+// ✅ GOOD - Non-blocking
+const { data } = useSWR('/api/data')
+
+// ✅ GOOD - Memoized
+const filtered = useMemo(
+ () => items.filter(expensive),
+ [items]
+)
+
+// ✅ GOOD - Stable reference
+const handleClick = useCallback(() => handler(), [])
+
+// ✅ GOOD - Optimized image
+Status: {status}
+}
+```
+
+## Application Actions
+
+### Create Application
+
+**File**: `app/actions/application-actions.ts`
+
+```typescript
+'use server'
+
+import { auth } from '@clerk/nextjs/server'
+import { prisma } from '@/lib/prisma'
+import { ApplicationStatus } from '@prisma/client'
+import { revalidatePath } from 'next/cache'
+
+interface ApplicationInput {
+ firstName: string
+ lastName: string
+ email: string
+ phone: string
+ dateOfBirth: string
+ studyPlan1: string
+ studyLevel: string
+ // ... other fields
+}
+
+export async function createApplicationAction(data: ApplicationInput) {
+ // 1. Authenticate
+ const { userId } = await auth()
+
+ if (!userId) {
+ return {
+ success: false,
+ error: 'Authentication required',
+ status: 401
+ }
+ }
+
+ // 2. Validate input
+ const requiredFields = ['firstName', 'lastName', 'email', 'phone']
+ for (const field of requiredFields) {
+ if (!data[field]) {
+ return {
+ success: false,
+ error: `Missing required field: ${field}`,
+ status: 400
+ }
+ }
+ }
+
+ try {
+ // 3. Check for existing application
+ const existingApplication = await prisma.application.findFirst({
+ where: { userId }
+ })
+
+ if (existingApplication) {
+ return {
+ success: false,
+ error: 'Application already exists',
+ errorCode: 'DUPLICATE_APPLICATION',
+ status: 409
+ }
+ }
+
+ // 4. Create application in transaction
+ const application = await prisma.$transaction(async (tx) => {
+ // Update user info
+ await tx.user.update({
+ where: { id: userId },
+ data: {
+ firstName: data.firstName,
+ lastName: data.lastName,
+ inputEmail: data.email,
+ phone: data.phone,
+ dateOfBirth: new Date(data.dateOfBirth)
+ }
+ })
+
+ // Create application
+ const app = await tx.application.create({
+ data: {
+ userId,
+ major: data.studyPlan1,
+ currentEducationLevel: data.studyLevel,
+ status: ApplicationStatus.SUBMITTED,
+ submittedAt: new Date(),
+ // ... map other fields
+ }
+ })
+
+ // Create default timeline steps
+ const timelineSteps = [
+ { stepNumber: 1, title: 'Application Submitted', status: 'COMPLETED' },
+ { stepNumber: 2, title: 'Document Review', status: 'CURRENT' },
+ { stepNumber: 3, title: 'Interview', status: 'UPCOMING' },
+ { stepNumber: 4, title: 'Decision', status: 'UPCOMING' },
+ ]
+
+ await Promise.all(
+ timelineSteps.map(step =>
+ tx.timelineStep.create({
+ data: {
+ applicationId: app.id,
+ ...step,
+ estimate: '1-2 weeks',
+ actionText: 'View'
+ }
+ })
+ )
+ )
+
+ return app
+ })
+
+ // 5. Revalidate cache
+ revalidatePath('/dashboard')
+
+ // 6. Return success
+ return {
+ success: true,
+ applicationId: application.id
+ }
+
+ } catch (error) {
+ console.error('Application creation error:', error)
+ return {
+ success: false,
+ error: 'Failed to create application',
+ status: 500
+ }
+ }
+}
+```
+
+### Update Application
+
+```typescript
+'use server'
+
+export async function updateApplicationAction(
+ applicationId: string,
+ updates: Partial` wrappers.
+2. Group classes logically: layout (`flex`, `grid`), spacing (`gap-*`, `p-*`), then visuals (`bg-*`, `border-*`, `text-*`), and finish with state/helpers (`transition`, `hover:*`).
+3. Extract repeated patterns into helper components or `cva` variants when you copy a Tailwind block more than twice.
+4. Run `pnpm lint` and ensure `cn()` merges custom classNames with defaults to avoid duplicate utilities.
+5. Screenshot responsive breakpoints (mobile, md, lg) for PRs that touch layout or color tokens.
+
+Adhering to these rules keeps every screen aligned with the existing Admin dashboard, document requirements UI, and onboarding flows while leaving room for future theming changes driven by CSS variables.