# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Development Commands

**Development server:**
```bash
npm run dev        # Start development server on http://localhost:3000
```

**Build and deployment:**
```bash
npm run build      # Build production application
npm run start      # Start production server
npm run lint       # Run ESLint for code quality checks
```

**Database operations:**
```bash
npx prisma generate    # Generate Prisma client after schema changes
npx prisma db push     # Push schema changes to database
npx prisma studio      # Open Prisma Studio database GUI
```

## Architecture Overview

This is a **Next.js 15** application with **App Router** using:

- **Authentication**: Supabase Auth with custom UI components
- **Database**: PostgreSQL via Supabase with Prisma ORM
- **Styling**: TailwindCSS v4 with custom theme system
- **State Management**: React Context for auth and theme
- **File Storage**: Configured for Cloudflare R2 (images)
- **Deployment**: Configured for Vercel

### Key Architectural Decisions

1. **Authentication Flow**: Supabase handles auth, middleware manages sessions, useAuth hook provides client state
2. **Database Design**: Prisma schema defines relationships between Users, Prompts, Versions, Tags, Albums, and TestRuns
3. **Theme System**: Custom ThemeProvider with localStorage persistence and system preference detection
4. **Component Structure**: Reusable UI components in `/components/ui/`, layout components in `/components/layout/`

### Core Data Models

The application centers around these main entities:
- **User**: Profile information and authentication
- **Prompt**: AI prompts with versioning and organization features
- **PromptVersion**: Version control for prompt iterations
- **PromptTag**: Categorization system
- **PromptAlbum**: Collection/organization system
- **PromptTestRun**: Testing and validation results

### Environment Setup

Required environment variables:
- `NEXT_PUBLIC_SUPABASE_URL`
- `NEXT_PUBLIC_SUPABASE_ANON_KEY`
- `DATABASE_URL`

### Component Patterns

- Use `'use client'` directive for interactive components
- Theme-aware components should use TailwindCSS dark mode classes
- Authentication state accessed via `useAuth()` hook
- Navigation handled through the Header component with mobile responsiveness

## 项目概况
- Github: Prmbr
- Domain: prmbr.com
- Name: Prmbr - AI Prompt Studio
- Languages Support
  - Chinese
  - English

# 功能清单
- [ ] Homepage
- [ ] Sign in and Sign up
  - [ ] username and password
  - [ ] email and password
  - [ ] google sign in
- [ ] Person Profile Setting
  - [ ] Username
  - [ ] Password
  - [ ] Email
  - [ ] Avatar
  - [ ] Bio
  - [ ] Language
- [ ] AI Prompt Manager
  - [ ] Prompt Name
  - [ ] Prompt Content
  - [ ] Prompt Album
  - [ ] Prompt Tag
  - [ ] Prompt Version Controll
  - [ ] Prompt Test Run
- [ ] Price
  - [ ] Free
    - [ ] 20 Prompt Limit
    - [ ] 3 Version Each Prompt
    - [ ] 5 USD Credit Once Time
  - [ ] 19.9 USD Paid Monthly
    - [ ] 500 Prompt Limit
    - [ ] 10 Version Each Prompt
    - [ ] 20 USD Credit Every Month
- [ ] AI Prompt Showcase
- [ ] AI Prompt Share to Public Showcase

# Keyword
- prompt builder
- prompt master builder
- prompt manager builder
- ai prompt builder
- ai prompt studio

# Tech Stack
- Framework: Next.j
- CSS: Tailwind CSS
- DB: Prisma
- DB && Auth: Supabase
- i18n: next-intl
- S3: Cloudflare R2
- Stripe
- AI: OpenRoute

# Deployment
- Vercel/Cloudflare
- Cloudflare R2
- Supabase

#  整体要求
- SSR
- 移动设备友好
- SEO 友好
- 支持夜间模式，采用 Tailwindcss 最佳实践
- 避免采用强制样式，尽量采用全局定义样式，采用 TailwindCSS 最佳实践推荐的样式实现

# 代码生成原则

1. 暂停思考的习惯 - 在行动前先分析现有结构
2. 质量优先的价值观 - 宁可慢一点也要做对
3. 整体设计思维 - 考虑代码的可维护性和一致性
4. 优先按照最佳实践完成工作