mainasara.dev/CRUSH.md

CRUSH.md

Commands

• Install dependencies: pnpm install
• Development server: pnpm dev (runs next dev --turbopack)
• Build: pnpm build (runs next build --turbopack)
• Start production: pnpm start (runs next start)
• Lint: pnpm lint (runs eslint)
• Typecheck: pnpm tsc --noEmit (TypeScript compiler without emitting files)
• Tests: No test script defined. Add Jest or Vitest via pnpm add -D vitest and configure.
• Run single test: Once tests are set up, e.g., pnpm vitest src/app/page.test.tsx (example; adjust based on setup).

Code Style Guidelines

• Language: TypeScript with strict mode enabled (strict: true in tsconfig.json).
• Framework: Next.js 15 (App Router). Use server components by default; mark client components with 'use client'.
• Styling: Tailwind CSS (via globals.css). Use utility classes; avoid custom CSS unless necessary.
• Fonts: Geist Sans for body (--font-geist-sans), Geist Mono for code (--font-geist-mono).
• Imports:
  • Use absolute paths with @/* alias (e.g., import { Component } from '@/components').
  • Prefer named imports over default where possible.
  • Import types explicitly: import type { Metadata } from 'next';.
  • Group imports: Next.js/React, then third-party, then local.
• Formatting: Follow ESLint rules from eslint.config.mjs (extends next/core-web-vitals, next/typescript). Use Prettier if added.
• Types: Always type props (e.g., Readonly<{ children: React.ReactNode }>). Use React.FC sparingly; prefer function signatures.
• Naming Conventions:
  • Components: PascalCase (e.g., HomePage).
  • Variables/functions: camelCase.
  • Files: kebab-case for pages (e.g., page.tsx), PascalCase for components.
• Error Handling: Use Next.js error boundaries or try-catch in async functions. Log errors to console in development.
• Components: Functional components with hooks. Colocate styles and logic.
• Paths: Use next/image for images with priority for above-fold. Optimize with width/height.
• Ignores: ESLint ignores node_modules/**, .next/**, etc. Respect .gitignore.