healthy_oil/CRUSH.md

CRUSH.md - Healthy Oil Project Guide

Development Commands

• npm run dev - Start development server on port 3000
• npm run build - Build for production (tsc -b && vite build)
• npm run lint - Run ESLint on entire codebase
• npm run preview - Preview production build on port 3000

Code Style Guidelines

File Naming & Structure

• Components: lowercase filenames (header.tsx, hero1.tsx, oil_info.tsx)
• UI components: /src/components/ui/ directory
• Use function declarations for components, not arrow functions

Import Conventions

// Chakra UI imports (named, grouped)
import { Box, Flex, Image } from '@chakra-ui/react';

// Local imports (default preferred)
import Header from './components/header';

Component Pattern

function ComponentName() {
    return (
        <Box>
            {/* JSX content */}
        </Box>
    );
}

export default ComponentName;

TypeScript & Configuration

• Strict mode enabled with noUnusedLocals, noUnusedParameters
• Path aliases available: @/* → ./src/*
• Use Chakra UI props for responsive design
• Framer Motion for animations (motion() wrapper pattern)

Styling Approach

• Primary: Chakra UI props and components
• External: colors.tsx for color system, fonts.css for typography
• Responsive: useBreakpointValue() hook for breakpoints