skills.rest
epologee
epologeeCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

eye-of-the-beholder

Detect layout, color, and animation issues in visual designs and screenshots.

3|1|Updated Apr 4, 2026
Search Tags:#accessibility#layout#contrast#animation#tokens#visual-review#design-audit
One-click install
npx skills add https://github.com/epologee/leclause-skills --skill eye-of-the-beholder
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: eye-of-the-beholder
Source: https://github.com/epologee/leclause-skills/tree/main/packages/eye-of-the-beholder/skills/eye-of-the-beholder
Command: npx skills add https://github.com/epologee/leclause-skills --skill eye-of-the-beholder

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about eye-of-the-beholder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit visual design issues in a UI screenshot?▼

To check UI color contrast for accessibility, apply luminance math and WCAG ratio checks to your screenshots. The review process detects token vocabulary gaps and enforces surface-delta rules to ensure proper light and dark mode parity.

How do I diagnose layout and spacing problems from a rendered design?▼

Animate inspection involves frame sampling and slow-mo techniques to identify precise timing bugs. It guides you on whether to inspect compositor or layout properties and performs pixel-level sampling to sync animations correctly.

What is the best way to fix misaligned SVGs and clipped iconography?▼

The best way to fix misaligned SVGs and clipped iconography is through a structured visual review that checks glyph-level spacing and edge alignment. By diagnosing the likely CSS or token causes, you can recommend minimal, repeatable fixes with validation steps.

Do I need extracted frames to review animation timing bugs?▼

Yes, you need extracted frames or a GIF from the bug report to review animation timing bugs. The inspection workflow requires frame sampling and pixel-level analysis to accurately map visual timing issues to their underlying causes.

Related Skills

Explore More Design & Creative Skills→
tuantiensiutuantiensiu
1

visual-analysis

Extract colors, typography, and layout data from images and UI mockups.

Community
Intermediate
dz07dz07

Colors

Generate WCAG-compliant color palettes with semantic tokens and contrast calculations.

Community
Intermediate
saajunaidsaajunaid

design-system-tokens

Generate and validate design tokens as CSS variables across three-layer architectures.

Community
Intermediate
distribucionesfayosmoreno-sysdistribucionesfayosmoreno-sys

ui-visual-validator

Validate UI modifications for visual regression, compliance, and accessibility.

Community
Advanced