eye-of-the-beholder

What problem does it solve?

Helps practitioners and reviewers detect and diagnose visual issues in layouts, color systems, iconography, and animations by forcing an observation-first workflow that compares rendered results to intent and implementation. It reduces regressions caused by semantic token gaps, mismatched spacing, poor contrast, mis-synced animations, and clipped or misaligned SVGs.

Core Features & Use Cases

• Observation-first review: Structured checklist to describe what you see before inspecting CSS or tokens, avoiding confirmation bias.
• Layout and spacing diagnostics: Edge tracing, rhythm checks, and practical fixes for container, component, and glyph-level spacing problems.
• Color and accessibility audits: Luminance math, WCAG ratio checks, surface-delta rules for light/dark parity, and token-vocabulary detection.
• Animation inspection workflow: Frame sampling, slow‑mo techniques, compositor vs layout property guidance, and pixel-level sampling for precise timing bugs.
• Use case: Review a UI screenshot or GIF from a bug report, produce an observations-first diagnosis, cite the likely CSS/token causes, and propose minimal, repeatable fixes.

Quick Start

Analyze the provided screenshot or animation frames, list your observations in edge-order, diagnose the likely CSS or token causes, and recommend concrete fixes with validation steps.