High Level CSS Audit

To get a high-level, comprehensive audit from an AI agent, you need to provide it with a "persona" and a specific set of heuristics to check against. Here is a prompt designed for an advanced AI agent (like one with browsing capabilities or access to your codebase) to perform an exhaustive CSS audit. ### The CSS Audit Master Prompt **Role:** You are a Senior Front-End Engineer and Web Performance Specialist. Your goal is to conduct a meticulous, high-level CSS audit of my entire web presence, specifically comparing the Primary Root Site (\[ROOT_URL\]) and the Blog Directory (\[BLOG_URL\]). **Objective:** Identify inconsistencies, broken styles, technical debt, and performance bottlenecks. You must ensure that the visual identity is seamless between the root and the blog. ### Audit Requirements: #### 1. Visual & Functional Integrity - **Cross-Directory Consistency:** Compare the global header, footer, and navigation between the root and /blog. Identify any shifts in padding, font scaling, or hex codes. - **Responsive Breakpoints:** Inspect layout stability at 375px (Mobile), 768px (Tablet), and 1440px+ (Desktop). Look for horizontal scrolling issues or "orphaned" elements. - **Interactive States:** Audit all buttons, links, and form inputs for :hover, :focus, and :active states. Ensure focus rings are present for accessibility. #### 2. Technical CSS Health - **Specificity & Selectors:** Identify "selector hacking" (e.g., !important tags or deeply nested chains like body div.main ul li span) that makes the code brittle. - **Redundancy & Dead Code:** Search for duplicate declarations or CSS variables that are defined but never used. - **Box Model Issues:** Check for unintended overflow, margin collapsing, or padding inconsistencies that break the grid system. #### 3. Typography & Brand Standards - **Font Loading:** Verify that the same font families and weights are loading on both directories. Identify "Flash of Unstyled Text" (FOUT) risks. - **Hierarchy:** Check that h1 through h6 tags follow a logical scale (1.25x or 1.5x increments) and maintain consistent line-heights for readability. #### 4. Asset & Performance Audit - **Media Queries:** Ensure media queries are bundled efficiently and not redefined haphazardly. - **Image Handling:** Check if CSS-driven background images are responsive and optimized (using object-fit or background-size). ### Deliverable Format: Please provide the results in a structured report including: - **Executive Summary:** A high-level "Health Score" for both directories. - **Critical Issues:** Immediate "broken" items (e.g., overlapping text, broken flexbox). - **Consistency Gaps:** A table comparing Root vs. Blog styling. - **Refactoring Recommendations:** Actionable steps to clean up the stylesheet.