img-converter: Instructions file for Claude Code

CLAUDE.md

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

Commands

npm run dev       # Start dev server at http://localhost:3000
npm run build     # Production build (also runs TypeScript type-check)
npm run lint      # ESLint

There is no test suite yet. Always run npm run build to verify TypeScript compiles before finishing changes.

Architecture

Stack: Next.js 16 (App Router) + TypeScript + Tailwind CSS + Sharp

Image processing pipeline:

1. User drops/selects a file in the browser (DropZone)
2. ImageConverter (client component, holds all state) sends a multipart/form-data POST to /api/convert
3. app/api/convert/route.ts validates the request, calls lib/imageProcessor.ts, and streams the result back as binary with Content-Disposition: attachment
4. The client creates a blob URL and presents a download link in ConvertResult

Key files:

• types/index.ts — shared types and constants (formats, MIME types, extensions)
• types/client.ts — re-exports types/index.ts plus the client-side detectFormatFromMime helper (keep server-safe code in index.ts)
• lib/imageProcessor.ts — all Sharp logic: format conversion, resize, metadata stripping
• app/api/convert/route.ts — single POST endpoint; validates input, calls processor, returns binary
• components/ImageConverter.tsx — top-level stateful component, orchestrates the full UX flow
• components/DropZone.tsx — drag-and-drop / file input
• components/ConvertOptions.tsx — format selector, quality slider, resize inputs, metadata toggle
• components/ConvertResult.tsx — download link + size comparison stats
• components/ImagePreview.tsx — previews the source image before conversion

Supported formats: JPEG, PNG, WebP, AVIF, GIF, TIFF — all directions.

Quality slider only applies to lossy formats (QUALITY_FORMATS in types/index.ts). PNG uses compression level derived from quality. GIF ignores quality.