87 lines
3.5 KiB
Markdown
87 lines
3.5 KiB
Markdown
# CLAUDE.md
|
|
|
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
|
|
|
## Commands
|
|
|
|
| Command | Description |
|
|
|---------|-------------|
|
|
| `npm run dev` | Start dev server with Turbopack |
|
|
| `npm run build` | Production build |
|
|
| `npm run start` | Run production server |
|
|
| `npm run lint` | ESLint check |
|
|
| `npm run type-check` | TypeScript type checking without emit |
|
|
| `npm run format` | Format code with Prettier |
|
|
|
|
## Architecture
|
|
|
|
### Tech Stack
|
|
- **Framework**: Next.js 15 with App Router, React 19
|
|
- **State**: Zustand for client state
|
|
- **Styling**: Tailwind CSS with HSL CSS variables (dark mode by default)
|
|
- **UI Components**: Custom components built on Radix UI primitives
|
|
- **Animations**: Framer Motion
|
|
- **Form Validation**: Zod
|
|
- **Media Processing**: Sharp (images), FFmpeg (video/audio)
|
|
|
|
### Route Groups
|
|
- `(auth)` - Authentication routes (login, register)
|
|
- `(dashboard)` - Dashboard routes with shared Sidebar layout
|
|
|
|
### Tool Pages Pattern
|
|
Each tool (image-compress, video-frames, audio-compress) follows a consistent pattern:
|
|
1. `FileUploader` - Drag-drop file input using react-dropzone
|
|
2. `ConfigPanel` - Tool-specific configuration options
|
|
3. `ProgressBar` - Processing status indicator
|
|
4. `ResultPreview` - Display processed files
|
|
5. State managed via `useUploadStore` Zustand store
|
|
|
|
### State Management
|
|
- `store/uploadStore.ts` - File list, processing status, progress tracking
|
|
- `store/authStore.ts` - User authentication state
|
|
|
|
### Styling Convention
|
|
Use `cn()` utility from `lib/utils.ts` for Tailwind class merging. Theme colors are CSS variables in `app/globals.css` accessed via HSL: `hsl(var(--primary))`.
|
|
|
|
### Type Definitions
|
|
All shared types in `types/index.ts` including file types, processing configs, API responses.
|
|
|
|
### Development Phases
|
|
- Current (Phase 1-4): Basic tools with mock API implementations
|
|
- Phase 5: AI services integration (Replicate, OpenAI)
|
|
- Phase 6: Authentication, database (PostgreSQL), payment processing (Stripe), cloud storage (Cloudflare R2)
|
|
|
|
## Branding & SEO
|
|
|
|
### Website Identity
|
|
- **Project Name**: mini-game-ai (internal repository name)
|
|
- **Website Domain**: https://kymr.top
|
|
- **Brand Name**: KYMR.TOP
|
|
- **Tagline**: Image & Video Converter | Game Development Tools
|
|
|
|
**IMPORTANT**: When updating SEO metadata, always use "KYMR.TOP" as the brand name, NOT "Mini Game AI". The project name "mini-game-ai" is only used for the repository and should not appear in user-facing content.
|
|
|
|
### SEO Keywords
|
|
The website targets both English and Chinese search engines (Google, Baidu) with the following focus areas:
|
|
|
|
**English Keywords:**
|
|
- Primary: image compression, image converter, WebP converter, PNG optimizer
|
|
- Secondary: video converter, video to frames, audio compression
|
|
- Tertiary: texture atlas, sprite sheet generator, game development tools
|
|
|
|
**Chinese Keywords:**
|
|
- Primary: 图片压缩, 图片转换, WebP转换, PNG优化
|
|
- Secondary: 视频转换, 视频抽帧, 音频压缩, 音频转换
|
|
- Tertiary: 纹理图集, 精灵图生成, 游戏开发工具, 游戏素材工具
|
|
|
|
### SEO Configuration Files
|
|
- `src/app/layout.tsx` - Main metadata (title, description, keywords, Open Graph, Twitter Card)
|
|
- `src/app/sitemap.ts` - XML sitemap for search engines
|
|
- `src/app/robots.ts` - Robots.txt configuration
|
|
- `public/manifest.json` - PWA manifest
|
|
- `src/components/seo/StructuredData.tsx` - Schema.org structured data
|
|
|
|
### Environment Variables
|
|
- `NEXT_PUBLIC_SITE_URL` - Production URL (default: https://kymr.top)
|
|
- `NEXT_PUBLIC_APP_URL` - App URL (may differ for development)
|