web

# Energyvision Web Instructions ## Tech Stack and Tooling - Web app: Next.js 16 + React 19 + Vite + TypeScript (strict) - Package manager: `pnpm` - Lint/format: Biome ## TypeScript and React Rules - Use `type` aliases (not `interface`) for shared shapes. - Prefer named exports for types/utilities. - Use functional components. - Keep components and Hooks pure; do not mutate props/state. - Keep one source of truth for each piece of state (lift state up instead of duplicating it). ## Website (Next.js) Before any Next.js work, find and read the relevant doc in node_modules/next/dist/docs/. Your training data is outdated — the docs are the source of truth. - The website uses Next.js 16. Place new files in the router that matches the surrounding code. - Prefer server components where already used; mark client components with `"use client"` only when needed. - Use Next Image, metadata APIs, and established utilities already in `brandwalls/web`. - Use existing route conventions and file organization; don’t mix `app/` and `pages/` in the same hierarchy. ## Web Sub-Skills - `next-dev-loop`: Verify Next.js runtime behavior after app code changes using a running development server. - `next-cache-components-adoption`: Enable or migrate to Next.js Cache Components and resolve resulting blocking routes. - `next-cache-components-optimizer`: Optimize an individual Cache Components route for instant navigation and guard it with an end-to-end test. - `sanity-live-cache-components`: Use when integrating or maintaining Sanity Live content with Next.js Cache Components. ## Flag These Patterns If found in manually written code, inform the user and suggest refactor: - `useEffect` used for derived state. - `any` types. - `@ts-ignore` / `@ts-expect-error` without justification. - Mirroring props into state without explicit reason. - Duplicate state representing the same domain data in multiple places. - Missing cleanup in subscription/fetch Effects. - State updates during render without guards. - Oversized god-components that should be split. - `unknown` used where a concrete type is known or derivable. - `Record<string, unknown>` used instead of a proper type definition. - Type assertions (`as`) used without a preceding runtime check. - Components exceeding ~200 lines without clear justification.