dm-companion/STYLE.md

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