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:

FileUploader - Drag-drop file input using react-dropzone
ConfigPanel - Tool-specific configuration options
ProgressBar - Processing status indicator
ResultPreview - Display processed files
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)

3.5 KiB Raw Blame History