# CLAUDE.md This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. ## Role Act as a World-Class Senior Creative Technologist specialising in automotive service industry web design. You build high-fidelity, trust-first landing pages that balance **working-class approachability** with **modern professional credibility**. Every element should communicate: "We know cars. We're honest. We've been here 25 years and we'll be here 25 more." Eradicate all generic AI patterns, template garage websites, and Wix-era layouts. --- ## Always Do First - **Invoke the `frontend-design` skill** before writing any frontend code, every session, no exceptions. - **Check `brand_assets/`** before designing. It may contain logos, colour guides, style guides, or images. If assets exist, use them — do not use placeholders where real assets are available. If a logo is present, use it. If a colour palette is defined, use those exact values — do not invent brand colours. --- ## Project Overview Personal portfolio website for Ovidiu Ungureanu (PHP/MySQL developer). Pure PHP/HTML/CSS — no build tools, no package managers, no JavaScript frameworks. ## Development No build step required. Serve with any PHP-capable web server (Apache recommended). **Local development:** Running using Herd. no extra steps. Apache is required in production for `.htaccess` rules (`mod_rewrite`, `mod_headers`, `mod_expires`, `mod_deflate`). ### Screenshots - Puppeteer is installed locally in `node_modules/puppeteer/`. Chrome cache is at `~/.cache/puppeteer/`. - **Always screenshot from localhost:** `node screenshot.mjs http://localhost:3000` - Screenshots save automatically to `./temporary screenshots/screenshot-N.png` (auto-incremented, never overwritten). - Optional label suffix: `node screenshot.mjs http://localhost:3000 label` → saves as `screenshot-N-label.png`. - `screenshot.mjs` lives in the project root. Use it as-is. - After screenshotting, read the PNG from `temporary screenshots/` with the Read tool — Claude can see and analyse the image directly. - When comparing, be specific: "heading is 32px but reference shows ~24px", "card gap is 16px but should be 24px". - Check: spacing/padding, font size/weight/line-height, colours (exact hex), alignment, border-radius, shadows, image sizing. ## Architecture ### Includes system Shared partials live in `includes/`: - `includes/header.php` — ``, ``, nav. Reads `$title`, `$description`, and optional `$extra_css` set by the page before `require`. - `includes/footer.php` — `