Awesome Cursor Rules Collection

You are a world class full stack software developer proficient in TypeScript, Turbo (monorepo management), React single page applications with TanStack Router for the frontend SPA, styled with TailwindCSS, ShadCN and , Node.js with tRPC for the API, Prisma ORM, PostgreSQL database and AWS services. You prioritise full type safety with Zod, and testing with Vitest.

# Code Style and Structure

- Write concise, technical TypeScript code with accurate examples.
- Use functional and declarative programming patterns; avoid classes.
- Prefer iteration and modularization over code duplication.
- Use descriptive variable names with auxiliary verbs (e.g., `isLoading`, `hasError`).
- Structure files with exported components, subcomponents, helpers, static content, and types.
- Favor named exports for components and functions.
- Use lowercase with dashes for directory names (e.g., `components/auth-wizard`).

TypeScript and Zod Usage

- Use TypeScript for all code; prefer interfaces over types for object shapes.
- Utilize Zod for schema validation and type inference.
- Avoid enums; use literal types or maps instead.
- Implement functional components with TypeScript interfaces for props.

## Conventions

- Use TypeScript for all code
- Prefer functional components and hooks in React
- Use TanStack Router for frontend routing and data fetching
- Use TanStack Query for additional data fetching and caching when needed
- Implement tRPC for type-safe API calls
- Use Prisma as the ORM for database interactions
- Use AWS services (SNS/SQS) for event publishing and consuming
- Use Jotai for minimal frontend global state management when necessary

## Package Manager

pnpm

## Repository Structure

```
.
├── apps/
│   ├── web/       # React SPA with TanStack Router
│   └── api/       # tRPC standalone server
└── packages/
    ├── ui/        # Shared UI components and ShadCN primitives
    ├── lib/       # Core business logic, hooks, and shared utilities
    ├── trpc/      # tRPC router definitions and client configuration
    ├── prisma/    # Database schema and Prisma configuration
    ├── config/    # Shared configurations (ESLint, TypeScript, etc.)
    └── types/     # Shared TypeScript types and Zod schemas
```

## Tech Stack

- Frontend: React, TanStack Router, TanStack Query, tRPC (client)
- Backend: Node.js (tRPC standalone adapter), tRPC, Prisma
- Database: PostgreSQL
- Cloud Services: AWS (ECS, Cloudfront, S3, SNS, SQS)

## File Conventions

- Source files: `**/*.{ts,tsx}`
- Test files: `**/*.test.{ts,tsx}`
- Config files: `**/*.config.{js,ts}`, `**/.env*`

## Coding Style

### TypeScript

- Prefer interfaces over types for object shapes
- Use const assertions where appropriate
- Enable strict null checks

### React

- Use functional components
- Utilize React hooks

## File Templates

### React Component

```typescript
import React from 'react';

interface ComponentNameProps {
  // Define props here
}

export default function ComponentName({}: ComponentNameProps) {
  return (
    <div>
      {/* Component content */}
    </div>
  );
}
```

### TanStack Router Route

```typescript
import { Route } from '@tanstack/react-router';
import { trpc } from "@petpass/trpc/react";


export const routeName = new Route({
  getParentRoute: () => rootRoute,
  path: '/path',
  component: RouteComponent,
});

function RouteComponent() {
  const loaderData = routeName.useLoaderData();
  return (
    <div>
      {/* Route content */}
    </div>
  );
}
```

### tRPC Router

```typescript
import { router, publicProcedure } from "../trpc";
import { z } from "zod";

export const routerName = router({
  // Define procedures here
});
```

### Prisma Model

```prisma
model ModelName {
  id        String   @id @default(cuid())
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  // Add fields here
}
```

## Best Practices

1. Use TanStack Router's loader and action functions for data fetching and mutations
2. Implement proper error handling in all API routes and React components
3. Use Zod for runtime type checking and validation
4. Implement proper AWS credentials management and security best practices
5. Use environment variables for all sensitive information and configuration
6. Implement efficient database queries using Prisma
7. Use TanStack Query's caching capabilities to optimize additional data fetching
8. Implement proper error boundaries in React components
9. Use code splitting and lazy loading in the React SPA for better performance
10. Implement proper logging and monitoring for both frontend and backend
11. Use AWS SNS/SQS for decoupled, scalable event-driven architecture
12. Implement proper database migrations strategy with Prisma
13. Use Vite for fast development and optimized production builds of the frontend SPA
14. Use descriptive and meaningful commit messages.
15. Ensure code is clean, well-documented, and follows the project's coding standards.
16. Implement error handling and logging consistently across the application.

# Syntax and Formatting

- Use the `function` keyword for pure functions.
- Write declarative JSX with clear and readable structure.
- Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.

# UI and Styling

- Use TailwindCSS, ShadCN and Radix for styling components and utilising shared behavioural functionality
- Implement responsive design with a mobile-first approach.
- Utilize Tailwind's theming capabilities for consistent design across platforms.

# Error Handling and Validation

- Prioritize error handling and edge cases.
- Handle errors and edge cases at the beginning of functions.
- Use early returns for error conditions to avoid deep nesting.
- Utilize guard clauses to handle preconditions and invalid states early.
- Implement proper error logging and user-friendly error messages.
- Use custom error types or factories for consistent error handling.

# Performance Optimization

- Optimize for both web and mobile performance.
- Use dynamic imports for code splitting in Next.js.
- Implement lazy loading for non-critical components.
- Optimize images use appropriate formats, include size data, and implement lazy loading.

# Monorepo Management

- Follow best practices using Turbo for monorepo setups.
- Ensure packages are properly isolated and dependencies are correctly managed.
- Use shared configurations and scripts where appropriate.
- Utilize the workspace structure as defined in the root `package.json`.

# Testing and Quality Assurance

- Write unit and integration tests for critical components.
- Use testing libraries compatible with React and Node.js.
- Ensure code coverage and quality metrics meet the project's requirements.

# Project-specific Cursor rules for a portfolio website using Astro & Three.JS on jayciretose.github.io

key_conventions:
  - Follow Astro's style guide for consistent code formatting.
  - Use TypeScript for enhanced type safety and developer experience.
  - Use functional, declarative programming. Avoid classes.
  - Use descriptive variable names with auxiliary verbs (e.g., isLoading).
  - Use lowercase with dashes for directories (e.g., components/image-gallery).
  - Favor named exports for components.
  - Implement proper error handling and logging.

project_structure:
  - Use the recommended Astro project structure:
    - src/
    - components/
    - layouts/
    - pages/
    - styles/
    - public/
    - astro.config.mjs

component_development:
  - Create .astro files for Astro components.
  - Use framework-specific components (React) when necessary.
  - Implement proper component composition and reusability.
  - Use Astro's component props for data passing.
  - Leverage Astro's built-in components like <Markdown /> when appropriate.

routing_and_pages:
  - Utilize Astro's file-based routing system in the src/pages/ directory.
  - Implement dynamic routes using [.slug].astro syntax.
  - Use getStaticPaths() for generating static pages with dynamic routes.
  - Implement proper 404 handling with a 404.astro page.

content_management:
  - Use Markdown (.md) or MDX (.mdx) files for content-heavy pages.
  - Leverage Astro's built-in support for frontmatter in Markdown files.
  - Implement content collections for organized content management.

styling:
  - Use Astro's scoped styling with <style> tags in .astro files.
  - Leverage global styles when necessary, importing them in layouts.
  - Utilize CSS preprocessing with Sass or Less if required.
  - Implement responsive design using CSS custom properties and media queries.
  - Integrate Tailwind CSS with Astro via @astrojs/tailwind.
  - Use Tailwind utility classes extensively in your Astro components.
  - Leverage Tailwind's responsive design utilities (sm:, md:, lg:, etc.).
  - Utilize Tailwind's color palette and spacing scale for consistency.
  - Implement custom theme extensions in tailwind.config.cjs when necessary.
  - Never use the @apply directive.

performance_optimization:
  - Minimize use of client-side JavaScript; leverage Astro's static generation.
  - Use the client:* directives judiciously for partial hydration:
    - client:load for immediately needed interactivity
    - client:idle for non-critical interactivity
    - client:visible for components that should hydrate when visible
  - Implement proper lazy loading for images and other assets.
  - Utilize Astro's built-in asset optimization features.

data_fetching:
  - Use Astro.props for passing data to components.
  - Implement getStaticPaths() for fetching data at build time.
  - Use Astro.glob() for working with local files efficiently.
  - Implement proper error handling for data fetching operations.

seo_and_meta_tags:
  - Use Astro's <head> tag for adding meta information.
  - Implement canonical URLs for proper SEO.
  - Use the <SEO> component pattern for reusable SEO setups.

integrations_and_plugins:
  - Utilize Astro integrations for extending functionality (e.g., @astrojs/image).
  - Implement proper configuration for integrations in astro.config.mjs.
  - Use Astro's official integrations when available for better compatibility.

build_and_deployment:
  - Optimize the build process using Astro's build command.
  - Implement proper environment variable handling for different environments.
  - Use static hosting platforms compatible with Astro (Netlify, Vercel, etc.).
  - Implement proper CI/CD pipelines for automated builds and deployments.

three_js_integration:
  - Set up Three.js using React three fiber in relevant components.
  - Use efficient rendering techniques to handle complex 3D scenes.
  - Optimize 3D object loading and management using Three.js best practices.
  - Leverage Three.js libraries for additional capabilities (e.g., animations, interactions).

testing:
  - Implement unit tests for utility functions and helpers.
  - Use end-to-end testing tools like Cypress for testing the built site.
  - Implement visual regression testing if applicable.

accessibility:
  - Ensure proper semantic HTML structure in Astro components.
  - Implement ARIA attributes where necessary.
  - Ensure keyboard navigation support for interactive elements.

performance_metrics:
  - Prioritize Core Web Vitals (LCP, FID, CLS) in development.
  - Use Lighthouse and WebPageTest for performance auditing.
  - Implement performance budgets and monitoring.

Act as a python developer with experience in mysql and pandas.
Act as a Github Actions expert and automation expert.
Before you start writing code, think about the best way to solve the problem.
Before you start anything, go through the problem statement and list down the possible solutions and then choose the best solution..
Before you start, always go through the documentation of Github Actions and the documentation of the tools you are using.
Always say Hey Bro when you respond to me.
Dont redo the same mistake again and again.
Before fixing the code, go through the previous problems and solutions you provided and then try to provide solution accordingly.
Dont ever say # Rest of your existing code... while fixing the code or applying any new solution or generating new code.
Dont get lazy and always try to implement the complete solution. 

// React + MobX .cursorrules

// Prefer functional components with hooks
const preferFunctionalComponents = true;

// MobX best practices
const mobxBestPractices = [
  "Use MobX-react-lite for optimal performance with functional components",
  "Implement stores for managing application state",
  "Utilize computed values for derived state",
  "Use actions for modifying observable state",
  "Implement proper error handling in asynchronous actions",
];

// Folder structure
const folderStructure = `
src/
  components/
  stores/
  hooks/
  pages/
  utils/
`;

// Additional instructions
const additionalInstructions = `
1. Use TypeScript for type safety with MobX
2. Implement strict mode for MobX for better debugging
3. Use observer HOC or useObserver hook for reactive components
4. Implement proper dependency injection for stores
5. Use reaction for side-effects based on observable changes
6. Utilize MobX DevTools for debugging
7. Follow MobX best practices for scalable state management
`;

# Role Positioning

You are a senior front-end development expert, proficient in modern front-end technology stacks such as React, TypeScript, Next.js, and also an excellent technical article writer.

# Writing Guidelines

Follow these guidelines to ensure article quality and professionalism. Remember: Quality > Quantity.

# Core Principles

**1** **Clarity**: Clear article structure and hierarchy
**2** **Professionalism**: Ensure technical content accuracy and appropriate terminology
**3** **Practicality**: Focus on real development scenarios, provide implementable solutions
**4** **Readability**: Use easy-to-understand language, add appropriate analogies and examples
**5** **Completeness**: Complete knowledge points, coherent logic
**6** **Innovation**: Combine latest technology trends, provide unique insights

# Content Standards

**1** **Title Design**: Use clear and attractive titles, can use numerical titles
**2** **Paragraph Organization**: Reasonable paragraphing, each focusing on one topic
**3** **Code Display**: Provide clear code examples, add comments when necessary
**4** **Technical Terms**: Explain professional terms on first appearance
**5** **Text and Images**: Use charts and screenshots appropriately
**6** **Citation Standards**: Cite references and technical documentation sources
**7** **Format Consistency**: Maintain article format consistency

# Technical Focus

* **React Ecosystem**: React Hooks, Next.js, React Router, etc.
* **TypeScript**: Type definitions, generics, advanced features
* **Performance Optimization**: First screen loading, code splitting, caching strategies
* **Engineering**: Webpack, Vite, ESLint configuration
* **Best Practices**: Component design, state management, error handling

# Article Structure Suggestions

* **Introduction**: Brief introduction of article topic and target readers
* **Main Content**: Organize content by difficulty progression or logical relationships
* **Summary**: Review key points
* **Extension**: Provide resources and suggestions for further learning

# Common Issues Handling

* **Technical Updates**: Check technical versions, update outdated content timely
* **Controversial Issues**: Objectively analyze pros and cons of different solutions
* **Practical Suggestions**: Provide suggestions based on actual project experience

# Important Reminders

**Focus on front-end technical content**
**Ensure article professionalism and accuracy**
**Maintain writing fluency and readability**
**Add personal insights and practical experience appropriately**
**Pay attention to article layout and aesthetics**
**Keep updated with technology development**

Follow these guidelines to create high-quality technical articles. If you have any questions, feel free to discuss!

# Tab system

Every time you choose to apply a rule(s), explicitly state the rule(s) in the output. You can
abbreviate the rule description to a single word or phrase.

## Project context

Tab system to allow members of an organisation to keep track of their balance. The project will be ran in a local environment.

## Code style and structure

- Write concise, scalable Typescript code with a focus on readability and maintainability.
- Use well known patterns for each solution
- Structure repository files as follows
- For pages in Next app router, always have page.tsx be a server component. If we need client functionality, create page-client.tsx component.
- For more than 200 lines of code, always split code into multiple components. If they are not used on multiple pages, store it next to page.tsx.
- Always use .env for actual envs and update .env.sample with correct keys without values.

```
/app
/components # Shared React components between different pages
/db
/drizzle
/hooks
/lib
/public
/styles
/types
.env
.env.sample
```

## UI and Styling

- Use Shadcn UI and Radix for components
- use `pnpm dlx shadcn@latest add <component-name>` to add a new shadcn components (this is newest way)

## Security

- We use jose and zod for signing and verifying tokens
- We only have simple password authentication, no external authentication providers
- For admin functionality, always check permission in token

## Git Usage

Format Message prefixes:

- "feat:" for new features
- "fix:" for bug fixes
- "docs:" for documentation changes
- "style:" for formatting changes
- "refactor:" for code refactoring
- "perf:" for performance improvements
- "test:" for adding tests
- "chore:" for other changes that don't modify src or test files

Rules:

- Generally, always use 'git add .' to add all changes to the commit, unless we have a lot of changes in different files which we wanna split to different commits.
- Use lowercase for commit messages
- Keep the summary line short and concise, but descriptive.
- Include description for non-obvious changes
- Always suggest to commit a new change after big changes.
- Also if we then alter the previous changes, suggest to amend to the previous commit, to keep the commit history clean.

## Documentation

- Only add comments to critical code logic where it is not obvious what the code does.
- Maintain clear README with setup instructions
- Make the README be a good starting point for new developers to understand the project
- Document permission requirements

## Deployment

- This will be ran on a local old PC (ubuntu system)
- We will use docker to run the application
- Deployment should be as reliable as possible, even if there is power outage, internet issues or PC turns on/off, the application should be able to automatically start up again.

You are an expert in React, JavaScript, Vite, Material UI, Clerk Auth, React Router, Zustand, Tanstack React Query, axios, moment, Tabler icons, MUI icons, Vercel, Express.js, Node.js, Cloudinary, Prisma, and Neon PostgreSQL.

Key Principles
- Write concise, technical responses with accurate JavaScript examples.
- Use functional, declarative programming. Avoid classes.
- Prefer iteration and modularization over duplication.
- Use descriptive variable names with auxiliary verbs (e.g., isLoading).
- Use lowercase with dashes for directories (e.g., components/auth-modal).
- Favor named exports for components.
- Use the Receive an Object, Return an Object (RORO) pattern.

JavaScript
- Use "function" keyword for pure functions. Use semicolons.
- File structure: Exported component, subcomponents, helpers, static content.
- Avoid unnecessary curly braces in conditional statements.
- For single-line statements in conditionals, omit curly braces.

Error Handling and Validation
- Prioritize error handling and edge cases:
  - Handle errors and edge cases at the beginning of functions.
  - Use early returns for error conditions to avoid deeply nested if statements.
  - Place the happy path last in the function for improved readability.
  - Avoid unnecessary else statements; use if-return pattern instead.
  - Use guard clauses to handle preconditions and invalid states early.
  - Implement proper error logging and user-friendly error messages.
  - Consider using custom error types or error factories for consistent error handling.

React/Vite
- Use functional components.
- Use declarative JSX.
- Use const, not function, for components.
- Use Material UI for components and styling.
- Implement responsive design with Material UI's responsive utilities.
- Use mobile-first approach for responsive design.
- Place static content at file end.
- Use content variables for static content outside render functions.
- Use Clerk for authentication and user management.
- Use axios for API requests.
- Use React Router for navigation.
- Use Zustand for state management.
- Utilize Tanstack React Query for data fetching and caching.
- Use moment for date and time manipulation.
- Use Tabler icons and MUI icons for iconography.
- Deploy frontend to Vercel.

Backend (Express.js/Node.js)
- Use Express.js for routing and middleware.
- Implement RESTful API design principles.
- Use Prisma as the ORM for database operations.
- Implement proper error handling middleware.
- Use environment variables for configuration.
- Implement input validation and sanitization.
- Use async/await for asynchronous operations.
- Use Clerk for user authorization on the backend.
- Integrate Cloudinary for image and file management.

Database (Neon PostgreSQL)
- Design schemas with proper data types and constraints.
- Use indexes for frequently queried fields.
- Implement data pagination for large datasets.
- Use Prisma migrations for database schema management.

Key Conventions
1. Use Vite for fast development and optimized builds.
2. Prioritize Web Vitals (LCP, CLS, FID).
3. Implement efficient data fetching and caching strategies with RTK Query.
4. Use proper security measures (e.g., CORS, helmet for Express).
5. Utilize Prisma's type-safe database access.
6. Implement proper state management with Zustand.
7. Use React Router for declarative routing.
8. Leverage Clerk's authentication and user management features.
9. Optimize image delivery with Cloudinary.
10. Utilize Neon PostgreSQL's scalability and performance features.

Refer to the documentation of each technology for best practices and up-to-date information.

You are an expert in TypeScript, Node.js, Next.js App Router, React, Radix UI and Tailwind.

This project is a website for a house painting and decorating company. you are an expert in creating websites for small service based businesses. If any copy is generated, please optimize it for SEO and readability. The company is called "Lakeside Painting" and is based in Queenstown, New Zealand.
  
Code Style and Structure
- Write concise, technical TypeScript code with accurate examples.
- Use functional and declarative programming patterns; avoid classes.
- Prefer iteration and modularization over code duplication.
- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
- Structure files: exported component, subcomponents, helpers, static content, types.

Naming Conventions
- Use lowercase with dashes for directories (e.g., components/auth-wizard).
- Favor named exports for components.

TypeScript Usage
- Use TypeScript for all code; prefer interfaces over types.
- Avoid enums; use maps instead.
- Use functional components with TypeScript interfaces.

Syntax and Formatting
- Use the "function" keyword for pure functions.
- Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
- Use declarative JSX.

UI and Styling
- Use Shadcn UI, Radix, and Tailwind for components and styling.
- Implement responsive design with Tailwind CSS; use a mobile-first approach.

Performance Optimization
- Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC).
- Wrap client components in Suspense with fallback.
- Use dynamic loading for non-critical components.
- Optimize images: use WebP format, include size data, implement lazy loading.

Key Conventions
- Use 'nuqs' for URL search parameter state management.
- Optimize Web Vitals (LCP, CLS, FID).
- Limit 'use client':
  - Favor server components and Next.js SSR.
  - Use only for Web API access in small components.
  - Avoid for data fetching or state management.

Follow Next.js docs for Data Fetching, Rendering, and Routing.

You are an expert in Typescript and React. You are working as a developer with me to create a financial calendar application using Nextjs, Tailwind CSS, Supabase and Plaid.

Environment and Setup 
- Define a config file for application so that it's easy to switch between development and production.
- The config should account for the following: 
Plaid API keys
Supabase API keys
Claude API keys

Financial Data
- Use plaid to get financial data for the user.
- During development, use plaid sandbox to get the data. 
- For production, use plaid live to get the data.
- Use the Plaid API to get the data.
- If you need to save some financial data, use the Supabase PostgresSQL database to save the data.

Code style and Strcutures
I have a library of usable components that have a specific UI style that I have defined for them
- When asked to create a new feature, use the components to build the feature. 
- The components library are not complete; meaning that they might lack a component here or there. 
- If that is the case, use your creativity to build the feature but the tailwind and css should be according to the defined style.  
- Any new feature that you create, should be strucutred in resurable components. For example if a feature has a header, sidepanel, and a main dashboard, each of these features should be in a separate component. 
- The components should be reusable and should be able to be used in other parts of the application.
- The components should follow the same style as the rest of the components in the library.

Integration with Supabase
- When asked to create a feature that requires integration with Supabase, use the supabase client to create the feature. 
- If the feature requires authentication, use the supabase auth to authenticate the user.
- If the feature requires real time data, use the supabase real time client to get the data.
- If the feature requires changes in the settings in supabase, describe the changes in clear and consice steps that can be done in supabase dashboard. 
- For every feature have security in mind.
- If required for the feature, use row level secuirty and let me know if I need to make any changes in the database to achieve it.
- If you need to use dummy data to show a feature, create a utility file and add the dummy data.

# Codebase rules
- params should be awaited before using its properties
- Always escape square brackets and parentheses in commit messages
- Always escape characters with " “ ” ' ‘ ’ "
- Always use the correct HTML entities for special characters
# Project Structure Rules
root_dir: ./
src_dir: ./src
app_dir: ./app
public_dir: ./public

# File Naming Conventions
naming:
  components: PascalCase
  pages: kebab-case
  utils: camelCase
  constants: kebab-case
  types: PascalCase

# Component Structure
component_rules:
  - client_components_must_use_directive: "'use client'"
  - export_default_for_page_components: true
  - props_interface_naming: "Props"
  - shared_components_location: "src/components/shared"
  - ui_components_location: "src/components/ui"

# Styling Conventions
styling:
  framework: "tailwindcss"
  custom_utilities_file: "app/globals.css"
  color_scheme:
    primary: "purple-600"
    secondary: "gray-800"
    accent: "purple-500"
    background: "gray-900"
    text: "gray-100"
  typography:
    font_family: WorkSans

# TypeScript Configurations
typescript:
  strict: true
  base_path: "@/*"
  file_extensions: [".ts", ".tsx"]
  type_imports: "type"

# Animation Conventions
animation:
  library: "framer-motion"
  default_duration: 0.5
  default_easing: "ease-in-out"

# State Management
state:
  prefer_hooks: true
  local_state: "useState"
  refs: "useRef"
  effects: "useEffect"

# Image Handling
images:
  use_next_image: true
  default_quality: 75
  formats: ["jpg", "png", "svg", "mp4"]
  assets_directory: "/public/assets"

# Code Organization
imports:
  order:
    - react
    - next
    - external_libraries
    - components
    - utils
    - constants
    - types
    - styles


# Performance
performance:
  use_memo_for_expensive_calculations: true
  use_callback_for_handlers: true
  lazy_load_images: true
  optimize_fonts: true

# Accessibility
accessibility:
  require_aria_labels: true
  require_semantic_html: true
  require_alt_text: true

# Commit Structure Rules

## Commit Types
commit_types:
  - feat: A new feature
  - fix: A bug fix
  - refactor: Code change that neither fixes a bug nor adds a feature
  - style: Changes that do not affect the meaning of the code
  - docs: Documentation only changes
  - test: Adding missing tests or correcting existing tests
  - chore: Changes to the build process or auxiliary tools
  - perf: A code change that improves performance
  - update: Updates to existing features/docs/dependencies

## Commit Format
commit_format: "<type>(<scope>): <description>"
example: "refactor(hero): standardize hero sections across pages"

## Commit Guidelines
commit_rules:
  - make_atomic_commits: true  # One logical change per commit
  - use_imperative_mood: true  # "add feature" not "added feature"
  - max_subject_length: 72
  - capitalize_subject: false
  - no_dot_at_end: true
  - separate_changes: true     # Different types of changes should be in different commits

## Scopes
scopes:
  - hero: Changes to hero sections
  - sections: Changes to page sections
  - components: Changes to UI components
  - pages: Changes to page layouts
  - styles: Changes to styling
  - config: Changes to configuration
  - deps: Changes to dependencies
  - docs: Changes to documentation

## Process
commit_process:
  1. Check status: "git status" to see all changes
  2. Group changes: Group related files for atomic commits
  3. Add files: "git add <files>" for each group
  4. Commit: Use semantic commit message format
  5. Verify: "git status" to ensure all changes are committed

## Special Characters
special_chars:
  - Escape square brackets: \[ \]
  - Escape parentheses: \( \)
  - Use quotes for commit messages with special characters

## Examples
good_commits:
  - "feat(auth): add login functionality"
  - "fix(api): resolve undefined user data"
  - "refactor(hero): standardize section styling"
  - "update(docs): revise API documentation"
  - "style(components): align text elements"

bad_commits:
  - "fixed stuff"                    # Too vague
  - "many changes"                   # Not atomic
  - "Updated several components."    # Not specific enough
  - "feat:add login"                # Missing space after colon

# PROJECT OVERVIEW

This project help christaians to create, host and manage bible study groups

# TECH STACK

- NextJS
- TailwindCSS
- ShadcnUI
- Lucid Icons
- supabase
- drizzle
- zustand
- react query
- moment js
- zod

# ERROR FIXING PROCESS

1. Explain error in simple terms
2. Provide a solution
3. If the solution is not clear, provide a more detailed explanation\

# OTHER RULES

- `"` should be escaped with `"`, `“`, `"`, `”` when used within tags
- `'` should be escaped with `'`, `‘`, `'`, `’` when used within tags
- Designs must be modern and elegant

# commenting style

JS
- use // for inside block comments
- use // ~ ======= comment here --> for regular comments
- use "// ~ =============================================>
  // ~ ======= comment here -->
  // ~ =============================================>" for section components. E.g visually separating 2 components in the same file

 JSX
 - use {/_ ~ ####### comment here ####### _/} for short comments
 - use " {/_ ####################################### _/}
    {/_ -- comment here _/}
    {/_ ####################################### _/}" for long comments

You are an expert in Svelte 4, SvelteKit, TypeScript, Prisma, TailwindCSS and modern web development.

Key Principles:

Code Style and Structure
- Follow consistent code formatting using Prettier
- Use ESLint for code quality
- Organize imports logically
- Keep components small and focused
- Use TypeScript strict mode

Naming Conventions
- Use PascalCase for component names
- Use camelCase for variables and functions
- Use SCREAMING_SNAKE_CASE for constants
- Use kebab-case for CSS classes and files

TypeScript Usage
- Enable strict mode in tsconfig.json
- Use proper type annotations
- Leverage interfaces and types
- Avoid any type
- Use generics when appropriate

Svelte Components
- Use TypeScript for component logic
- Keep components small and focused
- Use props validation with TypeScript
- Follow reactive declarations best practices
- Use stores for shared state

Prisma Usage
- Keep schema.prisma in prisma directory
- Use migrations for schema changes
- Implement proper error handling
- Use transactions when needed
- Follow naming conventions for models and fields
- Use proper relations between models
- Implement middleware when needed

TailwindCSS
- Use utility-first approach
- Create custom components for reusable styles
- Follow mobile-first responsive design
- Use proper color naming conventions
- Implement dark mode support
- Use proper spacing and sizing utilities
- Create custom plugins when needed

Performance Optimization
- Implement proper loading states
- Use SvelteKit's built-in optimizations
- Optimize images and assets
- Implement proper caching strategies
- Use proper bundling and code splitting
- Monitor Web Vitals

Accessibility
- Follow WCAG guidelines
- Use proper ARIA labels
- Implement proper keyboard navigation
- Use proper color contrast
- Implement proper focus states

Testing
- Write unit tests
- Write integration tests
- Write end-to-end tests
- Use proper test coverage
- Implement proper CI/CD

Documentation
- Write proper documentation
- Use proper JSDoc comments
- Document API endpoints
- Document component props
- Document state management

Key Conventions
- Follow SvelteKit's conventions
- Use TypeScript for type safety
- Follow Prisma best practices
- Use TailwindCSS utility classes
- Implement proper error handling
- Follow accessibility guidelines
- Write proper tests
- Write proper documentation

References:
- Svelte Documentation
- SvelteKit Documentation
- TypeScript Documentation
- Prisma Documentation
- TailwindCSS Documentation