Imported from oubaidelmoudhik/moroccotravelup (AGENTS.md). Install upstream with npx skills add oubaidelmoudhik/moroccotravelup. Copyright stays with the author.

AGENTS.md

Build, Lint, and Test Commands

# Development server
npm run dev          # Start Next.js dev server on port 3000

# Production build
npm run build        # Run Next.js build (strict type checking)
npm run start        # Start production server after build

# Linting
npm run lint         # Run ESLint on entire project
npx eslint . --ext .ts,.tsx --fix  # Auto-fix linting issues

# Type checking
npx tsc --noEmit     # Run TypeScript compiler without emitting files

Code Style Guidelines

TypeScript

• Enable strict: true in tsconfig.json - no any types allowed
• Use explicit return types for exported functions
• Define interfaces for complex objects; use type for unions/primitives
• Use null instead of undefined for optional values

Imports

// Group imports by category (blank line between groups):
// 1. React imports
// 2. Next.js imports
// 3. Third-party libraries
// 4. @/ components
// 5. @/ lib utilities
// 6. Relative imports

import { useState, useEffect } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import { Footer } from "./footer"

Component Structure

• Use lowercase directory names: components/, lib/, hooks/
• Component files: PascalCase (e.g., HeroSection.tsx)
• Utility files: camelCase (e.g., utils.ts)
• React Server Components by default; add "use client" only when needed

Tailwind CSS

• Use cn() from @/lib/utils for conditional classes:

  className={cn(
    "base-styles",
    variant === "primary" && "primary-styles",
    className
  )}

• Follow shadcn/ui color palette with CSS variables:

  bg-primary text-primary-foreground
  bg-muted text-muted-foreground

• Use semantic color names, not raw hex values

shadcn/ui Components

• Use Radix UI primitives for accessible components
• Configure variants with cva (class-variance-authority)
• Wrap components with proper theme providers
• Follow "new-york" style from shadcn/ui schema

Naming Conventions

• Components: PascalCase
• Variables/functions: camelCase
• Constants: UPPER_SNAKE_CASE or camelCase for object constants
• Props interfaces: ComponentNameProps
• Event handlers: onEventName (e.g., onClick, onSubmit)

Error Handling

• Use try/catch with specific error types
• Display user-friendly error messages via toast notifications
• Log errors to console during development
• Wrap async operations in error boundaries

File Paths

• Use @/ alias for imports (configured in tsconfig.json)
• Components: @/components/
• UI components: @/components/ui/
• Utilities: @/lib/utils/
• Hooks: @/hooks/

Additional Guidelines

• No console.log statements in production code
• Use React Server Components for data fetching
• Use next/image for optimized images
• Use next/font for Google Fonts (Inter, Playfair Display)
• Keep components small and focused; extract reusable logic
• Use TypeScript for all files (.ts or .tsx)