frontend-review

Frontend Review

Overview

Frontend-focused code review for HTML/CSS/image changes, emphasizing: (1) Image optimization and accessibility, (2) Responsive design across viewports, (3) Visual regression, (4) CSS best practices. Spawns general-purpose subagent.

When to Use

Use when:

• Converting image formats (JPEG → SVG, PNG → WebP, etc.)
• Changing CSS styles or layouts
• Updating HTML templates or components
• Making visual/UI changes

Don't use when:

• Pure backend code changes
• No visual/UI impact

Steps

1. Get Git SHAs

Check conversation context first. If not available:

git rev-parse origin/main
git rev-parse HEAD

2. Invoke Frontend-Focused Code Reviewer

Task(general-purpose):
  description: Frontend review of [feature]
  model: "sonnet"

  prompt:
    # Frontend Code Review Agent

    You are a frontend expert reviewing code for images, accessibility, responsive design, and CSS best practices.

    **Your task:**
    1. Review frontend code changes
    2. Apply systematic frontend checklist
    3. Verify accessibility (ARIA, semantic HTML)
    4. Check responsive design and visual quality
    5. Assess production readiness

    ## What to Review

    [Brief summary - e.g., "SVG logo conversion with CSS updates"]

    ## Requirements/Plan

    [Issue details or requirements]

    ## Git Range to Review

    ```bash
    git diff --stat BASE_SHA..HEAD_SHA
    git diff BASE_SHA..HEAD_SHA
    ```

    ## Frontend Review Checklist

    **CRITICAL: Check EVERY category systematically.**

    ### Images & Assets

    **SVG Optimization:**
    - SVG has proper structure (viewBox, no hard-coded width/height)?
    - SVG optimized (run through SVGO)?
    - SVG uses semantic elements (title, desc)?
    - SVG color strategy (currentColor vs hard-coded)?
    - File size improvement vs previous format?

    **Image Accessibility:**
    - Alt text descriptive and meaningful (not just "Logo" or "Image")?
    - Decorative images have `alt=""` or `aria-hidden="true"`?
    - Informative images have proper alt text?
    - SVGs used as images have `role="img"`?
    - Complex graphics have longer descriptions (aria-describedby)?

    **Image Performance:**
    - Appropriate format (SVG for logos/icons, WebP for photos)?
    - Images compressed/optimized?
    - Lazy loading for below-fold images?
    - Preload hints for critical images (hero, logo)?
    - Responsive images (srcset, picture) where needed?

    ### ARIA & Semantic HTML

    **ARIA Labeling Strategy:**
    - Is element decorative or informative?
    - If decorative: `aria-hidden="true"` and no alt text
    - If informative: meaningful alt text or aria-label
    - Redundant ARIA avoided (img alt + SVG title)?
    - Parent links/buttons have accessible names?

    **Example ARIA decisions:**
    ```html
    <!-- ❌ BAD: Redundant labels -->
    <a href="/" aria-label="Home">
      <img src="logo.svg" alt="My Company Logo">
    </a>