purplemux: Instructions file for Claude Code

@AGENTS.md

CLAUDE.md

This document defines the rules and conventions Claude Code must follow when working on this project.

AI-generated code should look as if a senior engineer wrote it. Avoid excessive comments, unnecessary explanations, and AI-specific patterns.

Always respond in the same language the user wrote in. Project rules like "commit messages in English" apply only to the artifacts they describe — they do not change the conversation language.

Project Overview

• Framework: Next.js (Pages Router)
• Package manager: pnpm
• Styling: Tailwind CSS v4 + shadcn/ui
• Language: TypeScript

Port

The default port is 8022 (a portmanteau of web + ssh). It can be overridden via the PORT env var in server.ts.

Core Rules

1. Next.js Configuration

• Use the Pages Router (not the App Router)
• Do not use the "use client" directive
• Starting with Next.js 16, middleware.ts was renamed to proxy.ts. In this project, src/proxy.ts serves as the auth middleware

2. Package Management

pnpm add <package>        # install package
pnpm add -D <package>     # install dev dependency
pnpm dev / pnpm build / pnpm lint

Do not use npm or yarn. Always use pnpm.

3. File Naming Convention

All filenames use lowercase and dashes (-):

✅ header-navigation.tsx, use-auth.ts
❌ HeaderNavigation.tsx, useAuth.ts

4. TypeScript Conventions

Interface / Type

interface IUser {
  id: string;
  name: string;
} // I prefix
type TUserRole = 'admin' | 'user' | 'guest'; // T prefix, union type

Function Definition Style

Use arrow functions instead of the function keyword:

// ✅ preferred
const handleClick = () => {
  // ...
};

const fetchData = async () => {
  // ...
};

// ❌ avoid
function handleClick() {
  // ...
}

Import Path

Use the alias (@/) instead of relative paths (../):

import { Button } from '@/components/ui/button';
import { useAuth } from '@/hooks/use-auth';