Prmbr/CLAUDE.md

3.9 KiB

CLAUDE.md

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

Development Commands

Development server:

npm run dev        # Start development server on http://localhost:3000

Build and deployment:

npm run build      # Build production application
npm run start      # Start production server
npm run lint       # Run ESLint for code quality checks

Database operations:

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. 优先按照最佳实践完成工作