visual-debug
Visual Debug
Automated visual comparison — original vs implementation. Zero vision tokens via AE/SSIM CLI tools.
When to use
- After implementing a section, before declaring "done"
- When user says "it's different", "doesn't match"
- During ui-reverse-engineering Phase C
- Instead of
Read-ing screenshots for comparison
HARD RULE: Never Read ref/impl images for comparison. Only read DIFF images for FAIL positions. Exception: Phase E reads ref+impl pairs.
Token rule
Pipe large eval output to a file, then Read only what you need:
agent-browser --session <s> eval "<script>" > tmp/ref/<name>.json
More from dididy/ui-skills
ui-reverse-engineering
Clone or replicate a live website URL as React + Tailwind. Triggers on "clone <URL>", "copy the hero from <URL>", "make it look like <URL>", "reverse-engineer this layout", "extract the animation from <URL>". Key signal — the user has a reference URL. Outputs React components with real extracted values (getComputedStyle, DOM, JS bundle analysis). Accepts screenshot/video as fallback (Claude Vision approximation). Does NOT apply to general CSS help or building UIs from scratch without a reference.
38transition-reverse-engineering
Replicate a visual effect from a reference site — CSS transitions, hover, page-load animations, scroll-driven effects, canvas/WebGL, Three.js, shaders. Triggers on "copy this transition", "replicate this animation", "clone this effect", "make it work like <site>". Also triggers for existing clone projects where effects don't match the reference. Combines agent-browser automation with bundle analysis for both CSS and JS-driven effects.
12ui-capture
Capture or record visual behavior from a website — scroll transitions, hover, mousemove/parallax, auto-timers. Also for side-by-side comparison between a reference site and a local clone. Triggers on "take baseline screenshots of <URL>", "record the hover effects", "capture scroll animations", "compare <ref> vs <localhost>". Works standalone or from ui-reverse-engineering / ralph workflows.
2