47 lines
1.3 KiB
Markdown
47 lines
1.3 KiB
Markdown
# 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
|
|
```typescript
|
|
// Chakra UI imports (named, grouped)
|
|
import { Box, Flex, Image } from '@chakra-ui/react';
|
|
|
|
// Local imports (default preferred)
|
|
import Header from './components/header';
|
|
```
|
|
|
|
### Component Pattern
|
|
```typescript
|
|
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 |