healthy_oil/AGENTS.md

AGENTS.md

Project

React + TypeScript + Vite landing page for a healthy-oil product. Uses Chakra UI v3 and TanStack Router. No test suite.

Commands

• npm run dev — Dev server on port 3000
• npm run build — tsc -b && vite build
• npm run lint — ESLint only, no typecheck script
• npm run preview — Preview production build on port 3000

Architecture

• Entry: src/main.tsx → src/router.tsx → src/pages/*
• Old UI (root /): src/App.tsx with components in src/components/*
• New UI (/40plus): src/pages/main.tsx with components in src/components/new_ui/*
• Layout wrapper: src/components/layout.tsx switches footer based on route
• Router: Hash-based routing for FTP server compatibility
• Path alias: @/* maps to ./src/*

Style Conventions

• Component filenames: lowercase (hero1.tsx, oil_info.tsx)
• Use function declarations for components, not arrow functions
• Chakra UI props for responsive design (base, sm, md, lg, xl)
• Framer Motion for animations
• colors.tsx exports color tokens; colors.css and fonts.css for global styles

TypeScript

• Strict mode with noUnusedLocals and noUnusedParameters — unused vars will error
• tsconfig.json uses project references (tsconfig.app.json + tsconfig.node.json)

Important Constraints

• No tests — there is no test, vitest, or jest config. Do not try to run tests.
• No typecheck script — run npx tsc --noEmit if you need a standalone typecheck.
• Build order matters: build runs tsc -b first, then vite build.
• Images live in public/images/; reference them with absolute paths like /images/new/...