dsaster-front

Imported from DSaster-Error200-LLC/DSaster-Front (src/dsaster-front/AGENTS.md). Install upstream with npx skills add DSaster-Error200-LLC/DSaster-Front --skill dsaster-front. Copyright stays with the author.

This is NOT the Next.js you know

This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in node_modules/next/dist/docs/ (resolved from this file's directory; in monorepos the next package may not be visible from the repo root) before writing any code. Heed deprecation notices.

This block is written and re-added by next dev — verify at node_modules/next/dist/server/lib/generate-agent-files.js. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean.

Project Structure & Environment

• Working Directory: The git repository root is DSaster-Front, but the entire Next.js application, configs, and dependencies reside in src/dsaster-front/. Always run commands with src/dsaster-front/ as the working directory.

Essential Commands

• pnpm dev: Start Next.js development server with Turbopack.
• pnpm lint: Run ESLint.
• pnpm format:check: Check code formatting with Prettier.
• pnpm format: Auto-format codebase with Prettier.
• pnpm exec tsc --noEmit: Run TypeScript type-checker without building.
• pnpm build: Production build (Next.js 16 App Router + Turbopack + TypeScript check).
• pnpm api: Regenerate OpenAPI clients using Orval.

Pre-commit / CI Verification Order

Before committing or creating a PR, run the following checks and ensure all pass with zero errors:

1. pnpm lint
2. pnpm format
3. pnpm format:check
4. pnpm build

Code & Framework Conventions

• No Backwards Relative Imports: **/../** imports are forbidden by ESLint (@typescript-eslint/no-restricted-imports). Always use the @/* path alias mapping to the project root (e.g., @/app/..., @/api/...).
• Next.js 16 App Router:
  • Route parameters (params, searchParams) in page and layout components are asynchronous Promises and must be awaited.
  • Server components are the default; mark interactive components with "use client".
  • Next.js docs are available locally in node_modules/next/dist/docs/.
• React 19 & Component Typing:
  • Component props must be typed as Readonly<Props> with readonly properties to satisfy @eslint-react/eslint-plugin.
  • TODO comments are allowed and encouraged for incomplete work; sonarjs/todo-tag is configured to warn so they do not fail CI.
• Styling (Tailwind CSS v4):
  • Uses Tailwind CSS v4 via @import "tailwindcss"; in app/globals.css (no tailwind.config.js).
  • Brand colors and fonts are declared under @theme in app/globals.css:
    • Colors: brand-bg, brand-maroon, brand-maroon-dark, brand-rust, brand-rust-dark, brand-ink, brand-muted, brand-border.
    • Typography: font-display (Baloo 2), font-body (Inter).

Generated API Clients

• API client code under api/ is automatically generated by Orval (pnpm api) from backend OpenAPI schemas.
• Do not edit generated API clients manually.
• api/** is ignored by ESLint and Prettier, but tracked in git.

Git & PR Conventions

• Branch Naming: {type}/#n where n is the issue number:
  • Feature: feat/#n (e.g., feat/#123)
  • Bugfix: fix/#n
  • Task: task/#n
• Commit Messages: Follow Conventional Commits format (e.g., feat: ..., fix: ..., chore: ...).
• PR Target: Always target pull requests to main.