Document visual work with real screenshots captured before a change, during key interactions, and after completion. Inspect each image and share captioned files throughout the task so users can review progress and redirect the work early.
Show the user real screenshots of the work as it progresses, without being asked. Capture the start, the key moment and the result of every visual change, send them as files with captions as soon as each is ready, and look at every image before sending it. Use on any task with a visible result (UI, pages, games, 3D, charts, motion), when the user says "show me", "screenshots", "keep giving me screenshots" or "where are the screenshots?", and before any report that claims a visual change works.
Review the instructions the agent will receive before you install.
The user judges visual work by looking at it, and asks for screenshots in almost every thread:
Describing a change is not showing it. A screenshot mentioned but not sent doesn't count.
Send, don't describe. Use the host's file-sending tool (SendUserFile, or an inline image in the report) so the picture is in front of the user. A path in a sentence is not enough.
Unasked, and as you go. Send a picture after each meaningful pass, so the user can redirect early:
Don't hold them all for the final report. Don't flood them either: one small batch per pass, not every save.
Start, key moment, result. For any change with a before and after, capture all three with the same framing: the state before, the interaction (hovering, aiming, mid-animation, the panel opening), and the outcome. For fixes, show the bug, then the fix.
Real renders only. Capture the actual page, game or app, not a mockup or an idea of it. Set up the state with a review fixture, a URL flag or a debug hook, rather than describing it.
Look at every image before sending. Things that mean recapture:
If the picture doesn't show what the caption claims, it isn't evidence.
Caption what it proves. One line per picture: what changed and what it verifies. For example, "Before: the hint reads 'out of range'. After: '90% hit · 5 damage'."
Label honestly. Say "headless browser capture" or "browser viewport". A 390×844 viewport is a phone-sized browser check, not a device test. Scripted or staged moments are named as staged.
Same framing for comparisons. Use the same viewport, camera and state for before and after. Put them side by side with compare.py.
requestAnimationFrame and returns stale or black frames, so use headless capture then.scripts/capture.mjs <url> <out.png>, with WIDTH/HEIGHT, MOBILE=1, WAIT_FOR="<ready expression>", SETTLE=<ms>, and JS steps to click, open or scroll. It prints page errors, so a broken page gets caught instead of photographed.
MOBILE=1 for a 390×844 phone viewport.SETTLE=3000–5000 for WebGL or 3D scenes; they render slowly headless, and an early shot misses models, fonts and icons.scripts/compare.py out.jpg before.png "Before" after.png "After", or three panels for start, key moment and result.qa/captures/), not a scratchpad the app wipes on restart.No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Build woven fabric in Three.js with visible threads, realistic sheen, seams, and thick hems. The skill covers folds that preserve texture proportions, light passing through thin cloth, and variations in dye and wear.
Build falling leaves in Three.js and similar 3D scenes, with visible front, edge, and back views as they tumble and drift. Coordinate wind, scene depth, camera-aware recycling, and performance checks for a convincing autumn effect.
Add coordinated seasonal transitions to an existing 3D scene. Blend foliage, lighting, sky, ground, snow, and particles from one shared state while preserving camera controls and interactions, so the same place remains recognizable throughout spring, summer, fall, and winter.
Create or integrate detailed 3D models with smooth outlines and believable edges for close-up views. Prepare lower-detail versions for distant viewing, prioritize loading, and measure rendering costs in the actual scene.
Prepare detailed 3D materials that remain clear in close-up views. The skill guides texture resolution, physically based material maps, surface mapping, filtering, and progressive loading while checking download size and GPU memory use.
Create realistic metal surfaces in Three.js by combining structured reflections, studio lighting, scratches, fingerprints, and beveled edges. Includes polished, brushed, and aged finishes for objects such as tools, rings, and metal product parts.