This document serves as the absolute authority for development within this workspace. Its instructions take precedence over any global defaults.
The PrimeDex is a high-performance Gaming Dashboard. Every interaction must be responsive, visual fidelity must be high (glassmorphism, Framer Motion), and the architecture strictly type-safe.
- Framework: Next.js 16 (App Router)
- Engine: React 19 + TypeScript
- Styling: Tailwind CSS 4 (Theme-first configuration)
- State: TanStack Query v5 + Zustand (Persistence via idb-keyval)
- API: PokéAPI (Multi-client: REST + GraphQL)
Manages persistence (Favorites, Team, Caught status, Highscores) and UI State. Large blobs are forbidden; store only IDs and primitives.
Aggressive caching and centralized client logic. Axios with retry support. All UI strings must be localized via react-i18next.
src/components/ui/: Base shadcn/ui primitives.src/components/pokemon/: Domain logic (TeamAnalysis, EvolutionChain, etc.).src/components/layout/: Global Shell, Header, and Settings.
- Performance First: Use RSC for data-heavy sections. Client components (
'use client') are for leaf nodes only. - Image Optimization: All images MUST use
next/image. Standard<img>tags are prohibited. - Type Rigor:
src/types/pokemon.tsis the Source of Truth. NoanyorRecord<string, unknown>. - Accessibility (A11y): WCAG 2.2 AA compliance is mandatory. Every interactive element needs an
aria-label; every image needs analt. - Visual Polish: Page transitions and hover states must use
framer-motion. Dark-mode-first aesthetic.
- Testing: Run
npx vitestbefore any major refactor. Tests live alongside implementation. - Environment: Protect all keys using
.envpatterns. - Git: Follow conventional commits (
feat:,fix:,refactor:,docs:).
This file is a living document. Update it as the architecture evolves.