AI Development Guidelines for This Application

This document outlines the core technologies, coding principles, and structural guidelines for developing this application. Its purpose is to ensure consistency, maintainability, and adherence to best practices.

General Principles

Simplicity & Elegance: Prioritize straightforward and elegant solutions. Avoid over-engineering.
Modularity: Create small, focused files and components. New components or hooks must always reside in their own dedicated files.
Completeness: All implemented features must be fully functional with complete code; no placeholders or partial implementations.
Responsiveness: Always design and implement responsive UI layouts.
User Feedback: Utilize toast components to inform users about important events.

Core Technologies & Usage

React Native & Expo: The foundation for cross-platform mobile development.
TypeScript: Mandatory for type safety and improved code quality.
Expo Router: Use exclusively for file-based routing and navigation between screens.
React Navigation:
- For tab-based navigation:
```
@react-navigation/bottom-tabs
```
  .
- For stack navigation:
```
@react-navigation/native
```
  with
```
Stack
```
  from
```
expo-router
```
  .
Styling (Tailwind CSS):
- Primary styling method: All new components and modifications must use Tailwind CSS classes.
- Avoid
```
StyleSheet.create
```
  for new styles where Tailwind can be applied.
UI Components (shadcn/ui):
- Prioritize: Use components from the
```
shadcn/ui
```
  library for common UI elements. These components are pre-styled with Tailwind CSS.
- New Components: If a required component is not available in
```
shadcn/ui
```
  , create a new, small, and focused component in
```
src/components/
```
  .
Icons (IconSymbol): Use the
```
IconSymbol
```
component (which abstracts
```
expo-symbols
```
for iOS and
```
@expo/vector-icons
```
for Android/Web) for all icons.
Animations: Implement animations using
```
react-native-reanimated
```
for fluid performance.
Haptics: Use
```
expo-haptics
```
for tactile feedback.
External Links: Use
```
expo-web-browser
```
for opening external URLs.
Images: Use
```
expo-image
```
for optimized image loading and display.
Blur Effects: Use
```
expo-blur
```
when a blur effect is needed.
Supabase: Utilized for authentication, database interactions, and server-side edge functions.

Code Structure

Source Root: All application source code must reside in the
```
src/
```
directory.
Pages: Application screens should be placed in
```
src/pages/
```
.
Components: Reusable UI components should be placed in
```
src/components/
```
. Each new component must have its own file.
Supabase Client: The Supabase client instance is located at
```
src/integrations/supabase/client.ts
```
.
Directory Naming: All directory names (e.g.,
```
src/pages
```
,
```
src/components
```
) must be all lower-case. File names may use mixed-case.

Supabase Specifics

Row Level Security (RLS): RLS is mandatory and must be enabled on all database tables with appropriate policies for
```
SELECT
```
,
```
INSERT
```
,
```
UPDATE
```
, and
```
DELETE
```
operations to ensure data security.
Edge Functions: Server-side logic and API-to-API communications should be implemented as Edge Functions within the
```
supabase/functions
```
directory. Do not import code from other project files into Edge Functions.

General Principles

Simplicity & Elegance: Prioritize straightforward and elegant solutions. Avoid over-engineering.

Modularity: Create small, focused files and components. New components or hooks must always reside in their own dedicated files.

Completeness: All implemented features must be fully functional with complete code; no placeholders or partial implementations.

Responsiveness: Always design and implement responsive UI layouts.

User Feedback: Utilize toast components to inform users about important events.

Core Technologies & Usage

React Native & Expo: The foundation for cross-platform mobile development.

TypeScript: Mandatory for type safety and improved code quality.

Expo Router: Use exclusively for file-based routing and navigation between screens.

React Navigation:

For tab-based navigation:
```
@react-navigation/bottom-tabs
```
.

For stack navigation:

@react-navigation/native

with

Stack

from

expo-router

Styling (Tailwind CSS):

Primary styling method: All new components and modifications must use Tailwind CSS classes.
Avoid
```
StyleSheet.create
```
for new styles where Tailwind can be applied.

UI Components (shadcn/ui):

Prioritize: Use components from the
```
shadcn/ui
```
library for common UI elements. These components are pre-styled with Tailwind CSS.
New Components: If a required component is not available in
```
shadcn/ui
```
, create a new, small, and focused component in
```
src/components/
```
.

Icons (IconSymbol): Use the

IconSymbol

component (which abstracts

expo-symbols

for iOS and

@expo/vector-icons

for Android/Web) for all icons.

Animations: Implement animations using

react-native-reanimated

for fluid performance.

Haptics: Use

expo-haptics

for tactile feedback.

External Links: Use

expo-web-browser

for opening external URLs.

Images: Use

expo-image

for optimized image loading and display.

Blur Effects: Use

expo-blur

when a blur effect is needed.

Supabase: Utilized for authentication, database interactions, and server-side edge functions.

Code Structure

Source Root: All application source code must reside in the

src/

directory.

Pages: Application screens should be placed in

src/pages/

Components: Reusable UI components should be placed in

src/components/

. Each new component must have its own file.

Supabase Client: The Supabase client instance is located at

src/integrations/supabase/client.ts

Directory Naming: All directory names (e.g.,

src/pages

src/components

) must be all lower-case. File names may use mixed-case.

Supabase Specifics

Row Level Security (RLS): RLS is mandatory and must be enabled on all database tables with appropriate policies for

SELECT

INSERT

UPDATE

, and

DELETE

operations to ensure data security.

Edge Functions: Server-side logic and API-to-API communications should be implemented as Edge Functions within the

supabase/functions

directory. Do not import code from other project files into Edge Functions.

AI Development Guidelines for This Application

AI Development Guidelines for This Application

General Principles

Core Technologies & Usage

Code Structure

Supabase Specifics

Related Skills

Markdown Converter

Nano Banana Pro

1password

AI Development Guidelines for This Application

General Principles

Core Technologies & Usage

Code Structure

Supabase Specifics