Project Overview

---
trigger: always_on
---

# Project Overview

This project is built using components generated by a design tool called Subframe. The files for these components are located in the `ui` directory. NEVER EDIT THE FILES IN THE `ui` DIRECTORY. Instead, whem implementing business logic, wrap them in your own components. The `ui` directory may be in different places, so check the codebase first to make sure you find it. If you can't find it on the first try, look harder. It could be in the `src/ui` directory. If you can't find it, ask the user where it is.

# General Guidelines

Check if this project uses Next.js by looking for a `next.config.(js|mjs|cjs|ts|cts|mts)` file. If so, adhere to the guidelines in @nextjs.mdc. Check if this project uses vite by looking for a `vite.config.(js|mjs|cjs|ts|cts|mts)` file. If so, adhere to the guidelines in @vite.mdc. Check if this project uses astro by looking for a `astro.config.(js|mjs|cjs|ts|cts|mts)` file. If so, adhere to the guidelines in @astro.mdc.

Check `ui/tailwind.config.js` for the fonts used in the project. Import them using Google Fonts adhering the to following structure: 

<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous"/>
<link href="https://fonts.googleapis.com/css2?family=[FONT_NAME]:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"/>

When the user wants to sync their Subframe components, run `[PACKAGE_MANAGER_COMMAND] exec @subframe/cli@latest sync -all`.

# Development Guidelines

- When building UI, try using the Subframe components in the `ui` directory first, wrapping them in your own components to implement business logic.
- When creating a page layout, try using the layouts in `ui/layouts` first. If you implement your own layout, don't use one from `ui/layouts`.
- Respect the user's choice for a package manager. Use `npm` if you find a `package-lock.json` file in the project, `yarn` if you find a `yarn.lock` file, `pnpm` if you find a `pnpm.lock` file and `bun` if you find a `bun.lock` or `bun.lockb` file. If the desired command fails, fall back to `npm`.
- Use TypeScript for type safety.
- Follow the coding standards defined in the ESLint configuration.
- Ensure all components are responsive and accessible.
- Make sure the project uses TailwindCSS v3. Subframe is not compatible with TailwindCSS v4 yet.
- Use Tailwind CSS for styling, adhering to the defined color palette. You can use all tokens defined in `tailwind.config.js` and `ui/tailwind.config.js`.
- Prefer using the libraries already installed within the project instead of installing new ones. Only if necessary, install your own.
- If you're not sure how to implement something, use the links provided in additional resources.
- Build production ready code. If you have to store data, use a database ORM. Handle user inputs with extreme care, validating and sanitizing any inputs before saving them. For example, use prepared statements in SQL before saving inputs and Zod for validating inputs.
- When building business logic, create test files first and run them using the testing library most applicable for the framework the project is using. Iterate until all tests pass and we get no linter errors from TypeScript or ESLint.
- After implementing anything, run the project's `build` and `test` (if applicable) commands and iterate until there are no more errors.

# AI Interaction Guidelines

- When generating code, prioritize TypeScript and React best practices.
- Ensure that any new components are reusable and follow the existing design patterns.
- Minimize the use of AI generated comments, instead use clearly named variables and functions.
- Always validate user inputs and handle errors gracefully.
- Use the existing components and pages as a reference for the new components and pages.

# Additional Resources 

- TypeScript Handbook: https://www.typescriptlang.org/docs/handbook/intro.html
- TailwindCSS Documentation: https://v3.tailwindcss.com/docs/installation/using-postcss
- React Documentation: https://react.dev/reference/react
- Supabase Documentation: https://supabase.com/docs
- Subframe Help: https://help.subframe.com/en/collections/9444971-developing-with-subframe
- Subfame Documentation: https://docs.subframe.com