# Style.md

This file provides guidance when working with code in this
repository. This is applicable to both developers and agents.

- Analyze the feature requirements carefully.
- Ask clarifying questions and be sure that you understand the full scope of the feature before implementing.
- Clarify anything that is ambiguous or unclear.
- Application design is specified in `DESIGN.md`. Keep this file up to date if changes are needed.
- List and update items in `TODO.md`.

## Commands

- Build: `npm run build`
- Dev server: `npm run dev`
- Start server: `npm run start`
- Test: `npm test` or `npm run test`

## Code Style & Conventions

- **Framework**
  - React
  - TanStack Router
  - Pocketbase
  - Tailwind CSS
- **TypeScript**: Use strict mode and explicit types
- **Accessibility**: All UI should follow general accessibility guidelines
- **SEO**: Implement proper metadata for SEO

- ## **Database**

- **Code Style**
  - **Imports**
    - Remove any unnecessary imports
    - Use absolute imports with `@/` prefix (e.g., `import { Component } from "@/components/Component"`)
  - **Naming**: Use PascalCase for components, camelCase for functions/variables
  - **Backend**: Project uses Appwrite for backend services
  - **Error Handling**: Use try/catch blocks for async operations
  - **File Structure**: Group files by feature in the `src` directory
  - **Types**: All top-level declarations should have type annotations, as should any location where types are ambiguous.
- **Dependencies**
  - Use third-party dependencies only for non-trivial behavior
  - Minimize the number of third-party dependencies
  - Avoid dependence redundancy
- **Testing**
  - Do not bother with unit tests.
- **Comments**
  - All non-trivial top-level declarations should contain a documentation comment
  - The comment can be a single sentence in most cases.
  - Documentation should include any behavior that is not obvious from the name.
  - This could include but is not limited to input requirements, unusual
    outputs, exceptions thrown.
  - Any non-trivial code should be commented, particularly where a statement
    may be related to code not in the immediate vicinity.
- **Documentation**
  - The design document is in `design.md`
  - This document should describe the architecture of the code, it's major data structures and any major features.
  - Design should be added _first_, before any code is written.
  - Approve design changes before writing any code.
  - No code should be written that does not contribute to a feature in the design.
- **React**
  - Implement proper error boundaries
  - Use functional components with named exports
  - Follow Next.js naming conventions for special files
- **Bash**
  - Quote all paths in arguments

## Project Style

- The app should be light-on-dark
- Use the following tailwind palettes
  - Slate for basic colors
  - Violet for highlights and actions
  - Emerald for success messages and call-outs
  - Red for errors and dangerous actions