ui-capture
/ui-capture — Visual Capture & Comparison
Capture reference screenshots and transition videos, detect all transition types, generate comparison page.
Session rule
Always use --session <project-name> with every agent-browser command.
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
Never let large JSON print to stdout — it wastes tokens.
When to use
- Standalone:
/ui-capture <reference-url> [local-url]
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.
12visual-debug
Compare original site vs implementation with automated AE/SSIM diff — zero LLM vision tokens. Triggers on "it looks different", "doesn't match", "compare with original", "what's wrong". Only reads diff images when AE/SSIM reports a failure.
3