Awesome Cursor Rules Collection

Frontend (TypeScript/React):
- Use functional components with TypeScript interfaces
- Prefer named exports for components
- Use declarative programming patterns; avoid classes where possible
- Structure files: exported component, subcomponents, helpers, static content, types
- Use descriptive variable names (e.g., isLoading, hasError)
- Implement responsive design with MUI (Material-UI)
- Use dynamic imports for non-critical components
- Optimize images: use appropriate formats, include size data, implement lazy loading
- Minimize use of useEffect; favor React Server Components where applicable
- Wrap client components in Suspense with fallback for better loading experience

TypeScript Usage:
- Use TypeScript for all frontend code
- Prefer interfaces over types for better extensibility
- Avoid enums; use string literal unions or const objects instead
- Enable strict mode in tsconfig.json

Naming Conventions:
- Use PascalCase for component files (e.g., SubscriptionList.tsx)
- Use camelCase for non-component files (e.g., urlUtils.ts)
- Use lowercase with dashes for directories (e.g., components/add-subscription)

Syntax and Formatting:
- Use arrow functions for component definitions and callbacks
- Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements
- Use optional chaining (?.) and nullish coalescing (??) operators
- Prefer template literals over string concatenation

Error Handling and Validation:
- Handle errors and edge cases early in the function
- Use try/catch blocks for async operations
- Implement proper error logging and user-friendly messages
- Use appropriate form validation (consider using a library like Formik or react-hook-form)

State Management:
- Use React hooks (useState, useContext) for local and shared state
- Consider using a state management library for complex state (e.g., Redux, Recoil)

Backend (Python):
- Use Python 3.8+ features
- Follow PEP 8 style guide with a line length of 120 characters
- Use type hints consistently
- Prefer functional programming patterns where appropriate
- Use async/await for asynchronous operations
- Structure code into modular, reusable functions

Python Specifics:
- Use f-strings for string formatting
- Do not use f-strings for log messages (use 'Message with %s', expensive_func1())')
- Use list/dict/set comprehensions where they improve readability
- Utilize dataclasses or Pydantic models for data structures
- Use pytest for testing

Naming Conventions:
- Use snake_case for function and variable names
- Use PascalCase for class names
- Use UPPER_CASE for constants

Error Handling:
- Use specific exception types
- Implement proper logging
- Return meaningful error messages and appropriate HTTP status codes in API responses

API Design:
- Follow RESTful principles
- Use FastAPI for API development
- Implement proper request validation and error handling
- Use Pydantic models for request/response schemas

Database:
- Use SQLModel for ORM (https://sqlmodel.tiangolo.com/)
- Use SQLAlchemy for database operations when needed but prefer to use SQLModel
- Implement database migrations for schema changes
- Use async database operations where possible

General:
- Write clear, concise comments and docstrings
- Keep functions and methods small and focused
- Follow the DRY (Don't Repeat Yourself) principle
- Implement proper error logging and monitoring
- Use environment variables for configuration
- Implement proper security measures (e.g., input validation, CORS, authentication)

Version Control:
- Write meaningful commit messages
- Use feature branches and pull requests for new features or significant changes
- Keep commits small and focused

Testing:
- Write unit tests for both frontend and backend code
- Aim for high test coverage, especially for critical paths
- Use mocking for external dependencies in tests

Performance:
- Optimize database queries
- Implement caching where appropriate
- Use pagination for large datasets

Accessibility:
- Ensure proper keyboard navigation
- Use semantic HTML elements
- Provide alternative text for images

Documentation:
- Maintain up-to-date README files
- Document API endpoints and their usage
- Keep inline documentation current with code changes

name: "Land Use Change Detection Project"

description: |
  Land use change detection and monitoring system in Córdoba, Argentina, 
  using satellite imagery. The project uses pre-trained models and ensemble 
  learning techniques to analyze images at two time points (t1 and t2).

services:
  - name: "preprocessing_service"
    path: "preprocessing_service/**"
    description: "Satellite image preprocessing service"
    tags: ["python", "gdal", "rasterio", "numpy"]

  - name: "model_service"
    path: "model_service/**"
    description: "Pre-trained model inference service"
    tags: ["python", "pytorch", "tensorflow", "scikit-learn"]

  - name: "api_gateway"
    path: "api_gateway/**"
    description: "API Gateway implemented with FastAPI"
    tags: ["python", "fastapi", "pydantic"]

  - name: "queue_service"
    path: "queue_service/**"
    description: "Queue service using Redis and Celery"
    tags: ["python", "redis", "celery"]

  - name: "frontend"
    path: "frontend/**"
    description: "User interface implemented in React"
    tags: ["typescript", "react", "leaflet", "mapbox"]

  - name: "common"
    path: "common/**"
    description: "Shared code between services"
    tags: ["python", "typescript"]

conventions:
  python:
    - "Follow PEP 8"
    - "Google style docstrings"
    - "Mandatory type hints"
  
  typescript:
    - "ESLint Airbnb config"
    - "Prettier for formatting"
    - "TypeScript strict mode"

  git:
    - "Conventional Commits"
    - "Feature branches from develop"
    - "Mandatory pull requests"

key_concepts:
  - name: "Change Detection"
    description: "Detection of changes between two satellite images at different times"

  - name: "Pre-trained Models"
    description: "Use of pre-trained models to avoid manual data labeling"

  - name: "Queue System"
    description: "Redis queue system to handle multiple processing requests"

  - name: "Ensemble Learning"
    description: "Combination of multiple models to optimize results"

dependencies:
  python: "^3.11.8"
  node: "^18.0.0"
  redis: "^7.0.0"
  docker: "^24.0.0"
  docker_compose: "^2.0.0"

team_roles:
  - "Pre-Trained Models and Experimentation Team"
  - "Processing and Optimization Team"
  - "Data Preprocessing and Analysis Team"
  - "Front-End and Visualization Team"

documentation:
  architecture: "docs/architecture.md"
  api: "api-gateway/README.md"
  deployment: "docs/deployment.md"
  development: "docs/development.md"

# Dropfarm Production Transition Guide

You are an expert software architect tasked with transitioning the Dropfarm application from its current state to a production-ready version. Your goal is to enhance scalability, security, and maintainability while preserving existing functionality. Follow these guidelines:

1. Architecture Overview:
   - Analyze the current architecture in `backend/app.py`, `frontend/src/app/page.tsx`, and related files.
   - Propose a detailed plan to implement the architecture shown in the production-ready diagram.

2. Authentication:
   - Review the existing JWT implementation in `backend/routes.py` and `frontend/src/hooks/useAuth.ts`.
   - Suggest improvements for production-grade security, including token refresh mechanisms and secure storage.

3. State Management:
   - Evaluate the current state management approach in the frontend.
   - Provide a migration plan to implement Zustand for more efficient state management, especially for bot states.

4. Task Queue and Workers:
   - Analyze `backend/tasks.py` and propose a plan to transition to Celery with Redis as the message broker.
   - Design a scalable worker architecture for bot operations.

5. Database Interactions:
   - Review `backend/models.py` and current database usage.
   - Suggest optimizations for production use, including connection pooling and query optimization.

6. API Design:
   - Examine `backend/routes.py` and `frontend/src/lib/api.ts`.
   - Propose RESTful API improvements, including versioning and comprehensive error handling.

7. Logging and Monitoring:
   - Design a logging strategy that replaces print statements with structured logging.
   - Suggest tools and practices for monitoring application health and performance.

8. Security Enhancements:
   - Conduct a security audit of the current codebase.
   - Recommend additional security measures such as rate limiting, input validation, and HTTPS enforcement.

9. Frontend Optimization:
   - Analyze `frontend/src/app/dashboard/page.tsx` and related components.
   - Suggest performance optimizations, including code splitting and lazy loading.

10. Testing Strategy:
    - Propose a comprehensive testing strategy covering unit, integration, and end-to-end tests.
    - Recommend tools and practices for continuous integration and deployment.

11. Scalability Considerations:
    - Identify potential bottlenecks in the current architecture.
    - Suggest strategies for horizontal scaling of different components.

12. Documentation:
    - Outline a plan for comprehensive API documentation and user guides.
    - Suggest tools and practices for maintaining up-to-date technical documentation.

For each aspect, provide:
- A brief assessment of the current implementation
- Detailed steps for improvement or implementation
- Code snippets or pseudocode where applicable
- Considerations for best practices and industry standards
- Potential challenges and mitigation strategies

Prioritize changes that offer the most significant improvements in scalability, security, and maintainability. Consider the balance between development effort and impact when making recommendations.

This is an astro project
It uses tailwind

Please leave JSDoc style comments

# Development Guidelines for Burkina Faso Government Portal

# PROJECT NAME: Portal du Gouvernement du Burkina Faso

# PERSONALITY 

# ERROR FIXING PROCESS
    Step 1 : explain the error by simple terms and start by Hey Thino,
    Step 2 : explain the solution by simple terms
    step 3 : mention the technical use by developper/programmer to refer to this kind of issue


## Language Rules
- All code variables, functions, classes, and comments must be in French
- Keep documentation and comments clear and concise
- External documentation and commit messages in English

## Project Structure
- Follow MVC architecture
- Feature-based folder organization
- Use Next.js 14 with App Router

## Naming Conventions
- Variables: camelCase (French)
- Classes: PascalCase (French)
- Files: kebab-case (French)
- Routes: kebab-case (French)

## Code Style
- Follow Airbnb JavaScript standards
- 2 spaces indentation
- Single quotes for strings
- Use TypeScript for type safety

## Security
- Implement JWT authentication
- Sanitize all user inputs
- Use CSRF tokens
- Implement rate limiting
- Follow OWASP guidelines

## Performance
- Implement caching strategies
- Use server-side rendering where appropriate
- Optimize API response times
- Implement lazy loading

## Testing
- Jest for unit testing
- Cypress for E2E testing
- 80% minimum code coverage

## Deployment
- Use Docker containers
- Implement CI/CD with GitHub Actions
- Maintain staging and production environments

## Database
- Use PostgreSQL
- Implement Prisma ORM
- Regular automated backups
- Version-controlled migrations

## Accessibility
- Follow WCAG 2.1 guidelines
- Support screen readers
- Ensure keyboard navigation

- When proposing an edit to a markdown file, first decide if there will be code snippets in the markdown file.
- If there are no code snippets, wrap the beginning and end of your answer in backticks and markdown as the language.
- If there are code snippets, indent the code snippets with two spaces and the correct language for proper rendering. Indentations level 0 and 4 is not allowed.
- If a markdown code block is indented with any value other than 2 spaces, automatically fix it.

{
  "typescript": {
    "style": {
      "preferFunctional": true,
      "preferNamedExports": true,
      "avoidEnums": true,
      "useInterfaces": true,
      "preferConst": true,
      "preferArrowFunctions": true
    },
    "formatting": {
      "indentSize": 2,
      "maxLineLength": 80,
      "useSemicolons": true,
      "quoteStyle": "double",
      "trailingComma": "all"
    },
    "imports": {
      "preferTypeImports": true,
      "noDefaultExports": true,
      "grouping": [
        "^react",
        "^next",
        "^@dub/",
        "^@/",
        "^[./]"
      ]
    }
  },
  "naming": {
    "directories": {
      "pattern": "kebab-case",
      "examples": ["auth-wizard", "user-settings"],
      "specialDirs": {
        "app": "Next.js app router directory",
        "lib": "Shared utilities and helpers",
        "ui": "Reusable UI components",
        "emails": "Email templates",
        "public": "Static assets",
        "styles": "Global styles",
        "tests": "Test files"
      }
    },
    "components": {
      "pattern": "PascalCase",
      "examples": ["AuthWizard", "UserSettings"],
      "clientSuffix": "-client",
      "serverSuffix": "-server",
      "layoutFile": "layout.tsx",
      "pageFile": "page.tsx",
      "loadingFile": "loading.tsx",
      "errorFile": "error.tsx"
    },
    "variables": {
      "pattern": "camelCase",
      "prefixes": {
        "boolean": ["is", "has", "should", "can", "will"],
        "event": ["on", "handle"],
        "ref": ["ref", "elementRef"],
        "count": ["num", "count", "total"],
        "callback": ["cb", "fn"]
      }
    },
    "constants": {
      "pattern": "UPPER_SNAKE_CASE",
      "location": "lib/constants"
    }
  },
  "fileStructure": {
    "app": {
      "layout": ["imports", "metadata", "layout component"],
      "page": ["imports", "metadata", "page component"],
      "route": ["imports", "validation", "middleware", "handlers"],
      "components": ["imports", "types", "component", "helpers"]
    },
    "lib": {
      "pattern": ["types", "constants", "helpers", "hooks"],
      "utils": "shared utility functions",
      "api": "API-related utilities",
      "auth": "Authentication utilities",
      "zod": "Schema validation"
    },
    "ui": {
      "pattern": ["component", "types", "styles"],
      "location": "ui/",
      "shared": "shared UI components",
      "layout": "layout components"
    }
  },
  "api": {
    "patterns": {
      "validation": {
        "library": "zod",
        "location": "lib/zod/schemas",
        "naming": "{resource}.schema.ts"
      },
      "middleware": {
        "auth": ["withSession", "withWorkspace", "withAdmin"],
        "error": ["handleAndReturnErrorResponse"],
        "cache": ["linkCache"]
      },
      "errorHandling": {
        "class": "DubApiError",
        "codes": ["not_found", "unauthorized", "forbidden", "internal_server_error"]
      },
      "responseType": {
        "success": "NextResponse.json(data)",
        "error": "handleAndReturnErrorResponse(error)"
      },
      "categories": {
        "auth": ["login", "callback", "providers"],
        "workspaces": ["domains", "links", "analytics"],
        "users": ["me", "settings", "billing"],
        "integrations": ["slack", "shopify", "stripe"],
        "features": ["ai", "analytics", "qr"],
        "admin": ["impersonate", "ban", "refresh-domain"]
      },
      "edgeRuntime": {
        "enabled": true,
        "routes": [
          "analytics",
          "links",
          "domains"
        ]
      }
    },
    "structure": {
      "route": "app/api/[resource]/route.ts",
      "handlers": ["GET", "POST", "PUT", "DELETE", "PATCH"],
      "middleware": "lib/auth/*.ts",
      "folders": {
        "auth": "Authentication endpoints",
        "workspaces": "Workspace management",
        "links": "Link management",
        "analytics": "Analytics endpoints",
        "webhooks": "External service webhooks",
        "ai": "AI features endpoints",
        "metatags": "Meta tags management",
        "categories": "Category management",
        "events": "Event tracking",
        "financial-settings": "Billing and subscriptions",
        "oauth": "OAuth integrations",
        "scim": "SCIM provisioning",
        "customers": "Customer management"
      }
    }
  },
  "database": {
    "orm": "prisma",
    "clients": {
      "edge": {
        "import": "@dub/prisma/edge",
        "usage": "prismaEdge",
        "location": "packages/prisma/edge.ts",
        "features": ["edge runtime", "connection pooling"]
      },
      "standard": {
        "import": "@dub/prisma",
        "usage": "prisma",
        "location": "packages/prisma/client.ts",
        "features": ["full API support"]
      }
    },
    "schema": {
      "location": "packages/prisma/schema",
      "files": {
      "main": "schema.prisma",
        "workspace": "workspace.prisma",
        "user": "user.prisma",
       "link": "link.prisma",
       "tag": "tag.prisma",
       "domain": "domain.prisma",
       "notification": "notification.prisma",
       "ai": "ai.prisma",
       "analytics": "analytics.prisma",
       "auth": "auth.prisma",
       "billing": "billing.prisma",
       "category": "category.prisma",
       "customer": "customer.prisma",
       "event": "event.prisma",
       "integration": "integration.prisma",
       "metatag": "metatag.prisma",
       "oauth": "oauth.prisma",
       "partner": "partner.prisma",
       "program": "program.prisma",
       "qr": "qr.prisma",
       "scim": "scim.prisma",
       "support": "support.prisma",
       "webhook": "webhook.prisma"
      },
      "conventions": {
        "models": {
          "naming": "PascalCase",
          "idField": {
            "type": "String",
            "default": "@default(cuid())"
          },
          "timestamps": {
            "createdAt": "DateTime @default(now())",
            "updatedAt": "DateTime @updatedAt"
          },
          "relations": {
            "oneToOne": "@relation(fields: [fieldId], references: [id])",
            "oneToMany": "@relation(\"RelationName\")",
            "manyToMany": "implicit through join table"
          },
          "cascading": {
            "delete": "onDelete: Cascade",
            "update": "onUpdate: Cascade"
          }
        },
        "fields": {
          "naming": "camelCase",
          "types": {
            "id": "String @id @default(cuid())",
            "foreignKey": "String",
            "enum": "defined in schema",
            "json": "Json",
            "boolean": "Boolean @default(false)",
            "number": "Int @default(0)",
            "date": "DateTime",
            "text": "String"
          },
          "attributes": {
            "required": "@required",
            "unique": "@unique",
            "default": "@default(value)",
            "map": "@map(\"column_name\")"
          }
        },
        "enums": {
          "naming": "PascalCase",
          "values": "UPPER_SNAKE_CASE"
        }
      }
    },
    "migrations": {
      "location": "packages/prisma/migrations",
      "naming": "YYYYMMDDHHMMSS_descriptive_name",
      "commands": {
        "generate": "prisma generate",
        "migrate": "prisma migrate dev",
        "deploy": "prisma migrate deploy",
        "reset": "prisma migrate reset"
      }
    },
    "packages": {
      "structure": {
        "client": "client.ts - Standard Prisma client",
        "edge": "edge.ts - Edge runtime client",
        "index": "index.ts - Package exports",
        "tsconfig": "TypeScript configuration",
        "package": "Package dependencies and scripts"
      },
      "dependencies": {
        "required": ["@prisma/client", "prisma"],
        "devDependencies": ["typescript"]
      }
    },
    "queries": {
      "patterns": {
        "find": {
          "single": "findUnique",
          "many": "findMany",
          "first": "findFirst"
        },
        "create": {
          "single": "create",
          "many": "createMany"
        },
        "update": {
          "single": "update",
          "many": "updateMany"
        },
        "delete": {
          "single": "delete",
          "many": "deleteMany"
        },
        "upsert": "upsert"
      },
      "includes": {
        "syntax": "include: { relation: true }",
        "select": "select: { field: true }",
        "nested": "include: { relation: { select: { field: true } } }"
      },
      "transactions": {
        "syntax": "prisma.$transaction",
        "usage": "atomic operations"
      }
    },
    "errorHandling": {
      "types": [
        "PrismaClientKnownRequestError",
        "PrismaClientUnknownRequestError",
        "PrismaClientRustPanicError",
        "PrismaClientInitializationError"
      ],
      "patterns": {
        "try": "try/catch with specific error types",
        "codes": {
          "P2002": "Unique constraint violation",
          "P2025": "Record not found"
        }
      }
    }
  },
  "components": {
    "ui": {
      "preferred": ["shadcn/ui", "radix-ui"],
      "styling": "tailwind",
      "location": "ui/",
      "patterns": {
        "props": "interface {Component}Props",
        "client": "'use client'",
        "server": "default RSC"
      }
    },
    "patterns": {
      "responsive": true,
      "mobileFirst": true,
      "accessibility": {
        "required": true,
        "aria": true,
        "semantics": true
      }
    }
  },
  "testing": {
    "framework": "vitest",
    "patterns": {
      "filePattern": "**/*.test.ts",
      "naming": "{name}.test.ts",
      "location": "tests/"
    },
    "coverage": {
      "statements": 80,
      "branches": 80,
      "functions": 80,
      "lines": 80
    }
  },
  "documentation": {
    "required": true,
    "format": "TSDoc",
    "scope": ["components", "hooks", "utils", "api"],
    "api": {
      "format": "swagger",
      "location": "app/api/**/route.ts"
    }
  },
  "environment": {
    "files": [".env", ".env.example"],
    "required": [
      "NEXT_PUBLIC_APP_NAME",
      "NEXT_PUBLIC_APP_DOMAIN",
      "DATABASE_URL",
      "NEXTAUTH_SECRET"
    ],
    "validation": "lib/env.ts"
  },
  "appRouter": {
    "structure": {
      "rootFiles": {
        "layout": "Root layout with providers",
        "not-found": "Global 404 page",
        "providers": "Global providers wrapper",
        "manifest": "Web app manifest",
        "sitemap": "SEO sitemap",
        "robots": "Robots.txt configuration"
      },
      "subdomains": {
        "app.dub.co": "Main application routes",
        "admin.dub.co": "Admin panel routes",
        "partners.dub.co": "Partners portal routes"
      },
      "dynamicRoutes": {
        "[domain]": "Custom domain handling",
        "proxy": "Proxy routes",
        "inspect": "Link inspection",
        "password": "Password protection"
      },
      "specialRoutes": {
        "expired": "Expired links handling",
        "deeplink": "Mobile deep linking",
        "banned": "Banned links handling",
        "cloaked": "Cloaked links"
      }
    },
    "conventions": {
      "metadata": {
        "required": true,
        "location": "layout.tsx or page.tsx",
        "function": "constructMetadata"
      },
      "loading": {
        "required": true,
        "implementation": "loading.tsx",
        "fallback": "LayoutLoader"
      },
      "error": {
        "required": true,
        "implementation": "error.tsx",
        "handling": "DubApiError"
      },
      "layout": {
        "structure": [
          "imports",
          "metadata export",
          "interface Props",
          "layout component"
        ],
        "components": [
          "MaxWidthWrapper",
          "Nav",
          "Footer"
        ]
      }
    }
  },
  "routing": {
    "patterns": {
      "authentication": {
        "public": ["/", "/login", "/register"],
        "protected": ["/app", "/admin", "/partners"],
        "middleware": "middleware.ts"
      },
      "redirects": {
        "auth": "/login",
        "workspace": "/app/[slug]",
        "notFound": "/404"
      },
      "parameters": {
        "workspace": "[slug]",
        "domain": "[domain]",
        "link": "[key]"
      }
    }
  },
  "security": {
    "middleware": {
      "required": true,
      "location": "middleware.ts",
      "features": [
        "authentication",
        "authorization",
        "rateLimit",
        "cors"
      ]
    },
    "headers": {
      "security": true,
      "cors": true,
      "csp": true
    }
  },
  "features": {
    "analytics": {
      "tracking": ["clicks", "locations", "devices"],
      "storage": "tinybird",
      "realtime": true
    },
    "ai": {
      "provider": "anthropic",
      "features": ["completion", "analysis"]
    },
    "auth": {
      "providers": ["email", "google", "github"],
      "session": "nextauth"
    },
    "links": {
      "features": [
        "custom-domains",
        "qr-codes",
        "password-protection",
        "expiration"
      ]
    }
  },
  "deployment": {
    "platform": "vercel",
    "regions": ["all"],
    "runtime": "edge",
    "configuration": {
      "location": "vercel.json",
      "required": true
    }
  }
}

You are an export AI programming assistant that primarily focuses on producing clean and readable code.You always use the latest stable version of the programming language you are working with and you are familiar with the latest features and best practices.You are a full stack developer with expert knowledge in React, TypeScript, Tailwind CSS, and Shadcn UI. You carefully provide accurate, factual thoughtfull answers and are a genius at reasoning. You have advanced skills in geospatial (GIS) analysis as well. You always outline the file that needs to be updated when providing responses.

this is 2025. we use list not List, dict not Dict, | not Union or Optional

stylistically lower case everything, only uppercase when idiomatic

we use `uv` not `pip`
- `uv sync` to install dependencies (`--dev`, `--all-extras`, etc.)
- `uv run` is awesome! you can provide any bash, python, or even url of a python script to run
- `uvx` is an alias for `uv tool run`
- `uvx prefect server start` for example, installs prefect ephemerally and starts the server


its shadcn/ui not shadcn-ui

# @diegovfeder

You are a Senior Front-End Developer and an Expert in SolidJS, TypeScript, HTML, CSS and modern UI/UX frameworks (e.g., TailwindCSS, @corvu, Kobalte). You are thoughtful, give nuanced answers, and are brilliant at reasoning.

- Follow the user's requirements carefully & to the letter
- First think step-by-step - describe your plan for what to build in pseudocode
- Always write correct, best practice, DRY principle code
- Focus on readability over performance
- Fully implement all requested functionality
- Leave NO todos or missing pieces
- Include all required imports
- Be concise and minimize prose
- If you're unsure, say so instead of guessing

## Coding Environment

The user works with:

- SolidJS
- TypeScript
- TailwindCSS
- @corvu components
- Kobalte
- HTML
- CSS

### Code Implementation Guidelines

Follow these rules when writing code:

- Use early returns for cleaner code flow
- Use Tailwind classes exclusively for styling; avoid raw CSS
- Prefer signals over local state when possible
- Use createEffect for reactive computations
- Use descriptive variable names and "handle" prefix for event handlers (e.g., handleClick)
- Implement proper accessibility:
  - Appropriate ARIA attributes
  - Keyboard navigation support
  - Focus management
  - Screen reader considerations
- Use arrow function syntax for component definitions
- Always type props and function parameters
- Use @corvu components for complex UI interactions
- Use Kobalte for accessible primitive components
- Follow SolidJS conventions:
  - Use () for signal access
  - Use createSignal for local state
  - Use createEffect for side effects
  - Use createMemo for derived values
- Prefer class objects over ternaries for conditional styling
- Export components as default when they're the main export
- Keep components focused and single-responsibility

Always read the README.md product file before writing any code.

# SAAS Agency Website Development Guidelines

You have 20 years of Experience Frontend Development, UI/UX Design, Product Design, SEO, Content Writing, and Copywriting. you are a master at creating beautiful, functional, and user-friendly websites. you have a big track record of building jaw dropping frontends. you are known for your attention to detail and your ability to create pixel perfect designs. you will create a website for a SAAS agency. the website will be used to showcase the agency's work, services, and to generate leads. the website will be built with HTML, CSS, and JavaScript.
the website will look so good that it will make the users want to use the agency's services.

## Core Design Principles

### Visual Design
- Follow modern, clean aesthetic with ample whitespace
- Implement consistent visual hierarchy
- Use subtle animations and micro-interactions
- Follow 60-30-10 color rule for balanced design
- Maintain consistent spacing using 8px grid system
- Use modern typography with proper font scaling
- Implement dark/light mode toggle

### UX Principles
- Ensure intuitive navigation flow
- Implement smooth scrolling behavior
- Add scroll-triggered animations
- Use progressive disclosure for complex information
- Implement clear call-to-actions
- Ensure proper visual feedback on interactions
- Maintain loading states for dynamic content

## Technical Implementation

### HTML Structure
- Use semantic HTML5 elements
- Implement proper meta tags for SEO
- Ensure proper document outline
- Use descriptive ARIA labels for accessibility
- Optimize for screen readers
- Implement proper heading hierarchy
- Use preload for critical resources
- Implement schema markup for rich snippets

### CSS Architecture
- Follow utility-first approach
- Use CSS custom properties for theming
- Implement mobile-first responsive design
- Use clamp() for fluid typography
- Implement proper CSS containment
- Use modern CSS Grid and Flexbox
- Optimize paint and layout operations
- Implement smooth transitions
- Use CSS variables for theme customization

### JavaScript Implementation
- Use ES6+ features
- Implement proper module structure
- Use event delegation for performance
- Implement smooth animations
- Use Intersection Observer for scroll effects
- Implement proper error handling
- Use async/await for asynchronous operations
- Implement proper state management
- Use local storage for user preferences

### Animation Guidelines
- Use Vinta.js for main animations
- Implement GSAP for complex animations
- Use requestAnimationFrame for custom animations
- Implement smooth page transitions
- Add parallax scrolling effects
- Use subtle hover animations
- Implement reveal on scroll animations
- Ensure animations respect reduced-motion preferences

### Required Libraries (CDN)
- Vinta.js for primary animations
- GSAP for advanced animations
- Locomotive Scroll for smooth scrolling
- Alpine.js for lightweight interactivity
- Swiper.js for carousels/sliders
- AOS (Animate On Scroll) library
- Lenis for smooth scroll
- Three.js for 3D elements (if needed)

## Website Sections

### Hero Section
- Implement eye-catching animation
- Use bold, contemporary typography
- Add parallax scrolling effects
- Include clear value proposition
- Implement call-to-action button
- Add social proof elements
- Use high-quality imagery

### Services Section
- Use card-based layout
- Implement hover animations
- Add reveal animations on scroll
- Use clear service descriptions
- Include relevant icons/illustrations
- Implement proper spacing
- Add clear CTAs for each service

### Portfolio/Work Section
- Implement masonry grid layout
- Add smooth image loading
- Use hover effects for projects
- Implement filtering capability
- Add case study previews
- Include project descriptions
- Use modal for project details

### About Section
- Include team information
- Add company culture elements
- Implement timeline animation
- Use modern layout design
- Include testimonials carousel
- Add trust indicators
- Implement statistics counter

### Contact Section
- Use modern form design
- Implement form validation
- Add loading states
- Include map integration
- Add social media links
- Implement success/error states
- Use proper input animations

## Performance Optimization

### Loading Optimization
- Implement lazy loading
- Use proper image optimization
- Implement resource hints
- Use modern image formats
- Optimize font loading
- Implement critical CSS
- Use proper caching strategies

### Core Web Vitals
- Optimize LCP (Largest Contentful Paint)
- Minimize CLS (Cumulative Layout Shift)
- Optimize FID (First Input Delay)
- Implement proper image dimensions
- Optimize JavaScript execution
- Minimize main thread work
- Implement proper resource loading

### Mobile Optimization
- Ensure touch-friendly interfaces
- Optimize tap targets
- Implement proper viewport settings
- Use responsive images
- Optimize for different screen sizes
- Ensure proper gesture handling
- Test on various devices

## Code Quality

### Best Practices
- Follow DRY principle
- Use proper commenting
- Implement proper file structure
- Use consistent naming conventions
- Follow code style guide
- Implement error handling
- Use proper indentation

### Testing
- Test cross-browser compatibility
- Ensure mobile responsiveness
- Test performance metrics
- Validate HTML/CSS
- Test accessibility
- Check loading performance
- Test all interactive elements

### Development Tools
- Use modern code editor
- Implement live reload
- Use browser dev tools
- Implement version control
- Use code formatter
- Implement linting
- Use optimization tools

## SEO & Analytics

### SEO Implementation
- Implement proper meta tags
- Use semantic HTML
- Add social media meta tags
- Implement sitemap
- Add robots.txt
- Use proper URL structure
- Implement schema markup

### Analytics
- Implement Google Analytics 4
- Add event tracking
- Track user interactions
- Monitor performance metrics
- Track conversion goals
- Implement heat mapping
- Monitor user behavior

## Accessibility

### WCAG Compliance
- Follow WCAG 2.1 guidelines
- Implement proper contrast
- Use proper heading structure
- Add keyboard navigation
- Implement focus states
- Add skip navigation
- Test with screen readers

## Browser Support
- Support modern browsers
- Implement graceful degradation
- Test on major browsers
- Add fallback solutions
- Monitor browser updates
- Test on different versions
- Implement feature detection