feat: Add visual regression testing

Description

Implement visual regression testing to catch unintended UI changes in components and pages.

Problem

• No automated visual testing
• CSS changes can break layouts unintentionally
• Component styling regressions go unnoticed until manual review
• Difficult to catch subtle visual bugs
• Animations and theme changes need visual verification

Benefits

• Catch visual regressions before production
• Ensure consistent UI across changes
• Build confidence in refactoring
• Document visual states of components
• Faster PR reviews

Tools to Consider

Option 1: Percy (Recommended)

• Visual testing platform
• GitHub integration
• Automatic PR comments
• Free for open source
• URL: https://percy.io

Option 2: Chromatic (Alternative)

• Built by Storybook team
• Great Storybook integration
• Visual testing + component review
• Free tier available
• URL: https://www.chromatic.com

Option 3: Playwright Screenshots

• Self-hosted solution
• Use Playwright to capture screenshots
• Compare with pixelmatch library
• More setup but free and self-contained

Implementation with Percy

# .github/workflows/visual-regression.yml
name: Visual Regression Tests

on:
  pull_request:

jobs:
  percy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '22'
          cache: 'pnpm'
      - run: pnpm install
      - run: pnpm build
      - name: Percy Test
        run: pnpm percy snapshot public/
        env:
          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}

Pages/Components to Test

• Homepage
• Quizzes page and individual quiz
• Games page and individual games
• Post detail page
• Guide detail page
• Search results
• Navigation header
• Footer
• Dark mode versions of all pages

Acceptance Criteria

• Choose visual testing tool (Percy/Chromatic/Playwright)
• Set up visual testing infrastructure
• Add baseline screenshots for key pages
• Add baseline screenshots for key components
• Configure GitHub Actions workflow
• Set up automatic PR comments
• Test with actual CSS change
• Document process in CONTRIBUTING.md
• Add both light and dark mode baselines
• Set appropriate diff thresholds

Success Metrics

• Visual tests run on every PR
• Catch at least 1 visual regression in first month
• Review process includes visual diff approval

Files to Create

• .github/workflows/visual-regression.yml - CI workflow
• visual-tests/ - Test configuration
• docs/visual-testing.md - Documentation

Start with the proposed .github/workflows/visual-regression.yml and run the issue's pnpm install and pnpm build steps. Decide between Percy, Chromatic, and Playwright, then use the listed pages and components as visual-test targets. Done means baselines, light and dark coverage, PR reporting, thresholds, a CSS-change check, and documentation in CONTRIBUTING.md and docs/visual-testing.md.