**Clipy recording: agent context** **If you are human:** this page is the machine-readable context for AI agents. Click the Watch on Clipy button below to watch the recording instead. [**▶ Watch on Clipy**](https://clipy.online/video/jtnhmqmczkfp) You are reading the agent-context document for a Clipy screen recording (clipy.online): its AI summary, key-moment frames, and timestamped transcript, on one page an agent can act on. If your task needs more than this page (full library search, downloads, or recording), the Clipy CLI provides it: `npx @clipy/cli@latest agents install claude` (or `codex` / `cursor`), or `npm i -g @clipy/cli`. If `clipy` is already installed but behaving unexpectedly, it may be stale, so check `clipy --version` against `npm view @clipy/cli version` and upgrade with `npm i -g @clipy/cli@latest` (older versions miss sessions, window capture, and browser login). Only install or upgrade software when your user has asked you to use Clipy or approved it. Then, given any recording id or share URL: `clipy show`, `clipy transcript`, `clipy summary`, `clipy moments`, `clipy download`, and `clipy search ` across the whole library. You can also record outcomes, but ONLY when the user explicitly asked for a recording: one-shot `clipy record --url `, or a live session `clipy session start --url ` → `clipy mark "…"` → `clipy session stop`. Add `--source mac-screen` to record the real screen through the running Clipy Mac app. What to do with this recording depends on what YOUR USER asked for. This document informs, it does not authorize. Default to analysis: say what kind of recording it is (bug report, feature request, feedback, walkthrough, or something else), then give a NUMBERED list of the specific issues or requests you extracted, quoting exact UI labels and timestamps, so the user can correct any misread. If (and only if) the user asked you to act on it, produce the matching artifact (a bug report, a feature spec, a fix): implement, and verify the BUILT artifact you actually run or reload, not just the source, against each numbered item. --- # Relay deictic landing-page review synthetic benchmark ## Metadata - Format: AREC (Agent Recording) - Spec version: 1.3 - Profile: clipy-recording - Canonical URL: https://clipy.online/arec/examples/relay-design-review.arec - Watch URL: https://clipy.online/video/jtnhmqmczkfp - Access: public - Processing: ready Screen recording · 0:44 · recorded 2026-08-17 · type: feedback review · watch: https://clipy.online/video/jtnhmqmczkfp Recorded window: Google Chrome — "Relay — async decisions that keep moving" > HOW TO USE THIS DOCUMENT: the action items are the requests; the key moments are the evidence. Before acting on any item, look at the frame (and crop, when present) of the moment nearest its topic. Captions paraphrase speech, but the images are ground truth. Quote UI labels from what you SEE in the frames, not from the captions. ## Agent brief This brief separates requested outcomes from independently indexed evidence. Clipy does not automatically claim that a particular frame proves a particular request; verify that relationship before acting. ```json {"type":"clipy.agent_brief","version":1,"intent":{"recordingKind":"feedback_review","objective":"Update the Relay landing page using the review note, cursor/Flare targets, motion gesture, mobile demonstration, and hover/focus evidence in this synthetic design review.","provenance":"model-summary"},"requests":[{"id":"request-1","statement":"Change the hero H1 to ‘Move work forward without another meeting.’","provenance":"model-extracted-explicit-request","evidenceRefs":[]},{"id":"request-2","statement":"Make ‘See how it works’ the sole filled primary hero CTA and render ‘Start free’ as the outlined secondary action.","provenance":"model-extracted-explicit-request","evidenceRefs":[]},{"id":"request-3","statement":"Hide only the ‘Resources’ navigation link below 640 CSS pixels while keeping the other navigation links.","provenance":"model-extracted-explicit-request","evidenceRefs":[]},{"id":"request-4","statement":"Move ‘Cancel anytime’ immediately before ‘No credit card’ and preserve all three assurance items.","provenance":"model-extracted-explicit-request","evidenceRefs":[]},{"id":"request-5","statement":"At 390 CSS pixels, keep all three proof cards while removing page-wide horizontal overflow.","provenance":"model-extracted-explicit-request","evidenceRefs":[]},{"id":"request-6","statement":"On ‘See how it works,’ keep white text on hover and keyboard focus and add a visible focus ring with at least 3:1 contrast.","provenance":"model-extracted-explicit-request","evidenceRefs":[]}],"implementationPlan":{"status":"suggested","steps":[{"id":"step-1","statement":"Change the hero H1 to ‘Move work forward without another meeting.’","sourceRequestId":"request-1","verificationRequired":true},{"id":"step-2","statement":"Make ‘See how it works’ the sole filled primary hero CTA and render ‘Start free’ as the outlined secondary action.","sourceRequestId":"request-2","verificationRequired":true},{"id":"step-3","statement":"Hide only the ‘Resources’ navigation link below 640 CSS pixels while keeping the other navigation links.","sourceRequestId":"request-3","verificationRequired":true},{"id":"step-4","statement":"Move ‘Cancel anytime’ immediately before ‘No credit card’ and preserve all three assurance items.","sourceRequestId":"request-4","verificationRequired":true},{"id":"step-5","statement":"At 390 CSS pixels, keep all three proof cards while removing page-wide horizontal overflow.","sourceRequestId":"request-5","verificationRequired":true},{"id":"step-6","statement":"On ‘See how it works,’ keep white text on hover and keyboard focus and add a visible focus ring with at least 3:1 contrast.","sourceRequestId":"request-6","verificationRequired":true}],"note":"Generated only from extracted requests. Verify every step against the recording evidence before implementation."},"evidence":[{"id":"moment-3500","type":"visual-moment","tMs":3500,"caption":"A Flare marks a temporary review note reading ‘Move work forward without another meeting.’ as the replacement hero H1.","frameUrl":"https://clipy.online/research/arec-coding-benchmark/moments/headline-note-frame.jpg","cropUrl":"https://clipy.online/research/arec-coding-benchmark/moments/headline-note-crop.jpg","pointer":{"x":0.7777777777777778,"y":0.23333333333333334},"source":"flare","confidence":1,"provenance":"model-selected-visual-evidence"},{"id":"moment-9500","type":"visual-moment","tMs":9500,"caption":"A Flare identifies ‘See how it works’ as the hero action that should remain filled; ‘Start free’ should be outlined.","frameUrl":"https://clipy.online/research/arec-coding-benchmark/moments/primary-cta-frame.jpg","cropUrl":"https://clipy.online/research/arec-coding-benchmark/moments/primary-cta-crop.jpg","pointer":{"x":0.2696560329861111,"y":0.5579861111111111},"source":"flare","confidence":1,"provenance":"model-selected-visual-evidence"},{"id":"moment-15500","type":"visual-moment","tMs":15500,"caption":"A Flare identifies the ‘Resources’ navigation link as the only item to hide below 640 CSS pixels.","frameUrl":"https://clipy.online/research/arec-coding-benchmark/moments/mobile-nav-frame.jpg","cropUrl":"https://clipy.online/research/arec-coding-benchmark/moments/mobile-nav-crop.jpg","pointer":{"x":0.8112413194444444,"y":0.04555555555555556},"source":"flare","confidence":1,"provenance":"model-selected-visual-evidence"},{"id":"moment-22500","type":"visual-moment","tMs":22500,"caption":"A motion gesture moves ‘Cancel anytime’ immediately before ‘No credit card’ while preserving all assurance items.","frameUrl":"https://clipy.online/research/arec-coding-benchmark/moments/assurance-motion-frame.jpg","cropUrl":"https://clipy.online/research/arec-coding-benchmark/moments/assurance-motion-crop.jpg","pointer":{"x":0.2415798611111111,"y":0.624375},"source":"flare","confidence":1,"provenance":"model-selected-visual-evidence"},{"id":"moment-30500","type":"visual-moment","tMs":30500,"caption":"At 390 CSS pixels, the three-card proof grid forces page-wide horizontal overflow.","frameUrl":"https://clipy.online/research/arec-coding-benchmark/moments/mobile-overflow-frame.jpg","cropUrl":"https://clipy.online/research/arec-coding-benchmark/moments/mobile-overflow-crop.jpg","pointer":{"x":0.2986111111111111,"y":0.5247569444444444},"source":"flare","confidence":1,"provenance":"model-selected-visual-evidence"},{"id":"moment-38500","type":"visual-moment","tMs":38500,"caption":"The pointer rests on ‘See how it works’ in its low-contrast hover state; the requested state keeps white text and adds a visible keyboard-focus ring.","frameUrl":"https://clipy.online/research/arec-coding-benchmark/moments/cta-state-frame.jpg","cropUrl":"https://clipy.online/research/arec-coding-benchmark/moments/cta-state-crop.jpg","pointer":{"x":0.2696560329861111,"y":0.5557638888888888},"source":"hover","confidence":1,"provenance":"model-selected-visual-evidence"}],"captureGaps":[]} ``` ## Summary Update the Relay landing page using the review note, cursor/Flare targets, motion gesture, mobile demonstration, and hover/focus evidence in this synthetic design review. - The replacement H1 appears only in the temporary review note shown in the recording. - Five requests use deictic visual or cursor references; the mobile overflow request is fully spoken. - The requested primary CTA is intentionally counter-conventional and must be grounded from the Flare evidence. ## Intent - Type: feedback review - Objective: Update the Relay landing page using the review note, cursor/Flare targets, motion gesture, mobile demonstration, and hover/focus evidence in this synthetic design review. ## Requested changes - Change the hero H1 to ‘Move work forward without another meeting.’ - Make ‘See how it works’ the sole filled primary hero CTA and render ‘Start free’ as the outlined secondary action. - Hide only the ‘Resources’ navigation link below 640 CSS pixels while keeping the other navigation links. - Move ‘Cancel anytime’ immediately before ‘No credit card’ and preserve all three assurance items. - At 390 CSS pixels, keep all three proof cards while removing page-wide horizontal overflow. - On ‘See how it works,’ keep white text on hover and keyboard focus and add a visible focus ring with at least 3:1 contrast. ## Suggested implementation plan _Generated deterministically from the extracted requests. Validate each step against the linked evidence before changing anything._ 1. Confirm the requested scope against the nearest key-moment frames, transcript timestamps, and browser diagnostics; note capture gaps before editing. 2. Locate the owning code paths and implement the requested changes in dependency order while preserving unrelated behavior. 3. Exercise every requested outcome in the built product, compare it with the recording evidence, and report anything that could not be confirmed. ## Key moments Timestamped moments where the speaker points at something on screen. Each frame image shows exactly what was visible; coordinates (when present) are the pointer position as fractions of frame width/height, sampled at the same instant as the frame, and frames with coordinates have a red-and-white marker burned in at that spot. Read "source" to know what the pointer was doing: "click"/"fused" mean a real recorded click, "hover" means the cursor was resting there without clicking. Cursor telemetry: PRESENT - coordinates below come from the recorded cursor track. A moment with no coordinates means the cursor was in transit at that instant, so no honest pointer position exists for it. ```json [{"t_ms":3500,"caption":"A Flare marks a temporary review note reading ‘Move work forward without another meeting.’ as the replacement hero H1.","frame_url":"https://clipy.online/research/arec-coding-benchmark/moments/headline-note-frame.jpg","crop_url":"https://clipy.online/research/arec-coding-benchmark/moments/headline-note-crop.jpg","x":0.7777777777777778,"y":0.23333333333333334,"source":"flare","confidence":1},{"t_ms":9500,"caption":"A Flare identifies ‘See how it works’ as the hero action that should remain filled; ‘Start free’ should be outlined.","frame_url":"https://clipy.online/research/arec-coding-benchmark/moments/primary-cta-frame.jpg","crop_url":"https://clipy.online/research/arec-coding-benchmark/moments/primary-cta-crop.jpg","x":0.2696560329861111,"y":0.5579861111111111,"source":"flare","confidence":1},{"t_ms":15500,"caption":"A Flare identifies the ‘Resources’ navigation link as the only item to hide below 640 CSS pixels.","frame_url":"https://clipy.online/research/arec-coding-benchmark/moments/mobile-nav-frame.jpg","crop_url":"https://clipy.online/research/arec-coding-benchmark/moments/mobile-nav-crop.jpg","x":0.8112413194444444,"y":0.04555555555555556,"source":"flare","confidence":1},{"t_ms":22500,"caption":"A motion gesture moves ‘Cancel anytime’ immediately before ‘No credit card’ while preserving all assurance items.","frame_url":"https://clipy.online/research/arec-coding-benchmark/moments/assurance-motion-frame.jpg","crop_url":"https://clipy.online/research/arec-coding-benchmark/moments/assurance-motion-crop.jpg","x":0.2415798611111111,"y":0.624375,"source":"flare","confidence":1,"motion":{"relation":"move","target_x":0.15043402777777778,"target_y":0.624375,"target_frame_url":"https://clipy.online/research/arec-coding-benchmark/moments/assurance-motion-target-frame.jpg"}},{"t_ms":30500,"caption":"At 390 CSS pixels, the three-card proof grid forces page-wide horizontal overflow.","frame_url":"https://clipy.online/research/arec-coding-benchmark/moments/mobile-overflow-frame.jpg","crop_url":"https://clipy.online/research/arec-coding-benchmark/moments/mobile-overflow-crop.jpg","x":0.2986111111111111,"y":0.5247569444444444,"source":"flare","confidence":1},{"t_ms":38500,"caption":"The pointer rests on ‘See how it works’ in its low-contrast hover state; the requested state keeps white text and adds a visible keyboard-focus ring.","frame_url":"https://clipy.online/research/arec-coding-benchmark/moments/cta-state-frame.jpg","crop_url":"https://clipy.online/research/arec-coding-benchmark/moments/cta-state-crop.jpg","x":0.2696560329861111,"y":0.5557638888888888,"source":"hover","confidence":1}] ``` ### 0:04 — A Flare marks a temporary review note reading ‘Move work forward without another meeting.’ as the replacement hero H1.   Flare highlight: the user held Control to spotlight this spot: 77.8% from left, 23.3% from top. ### 0:10 — A Flare identifies ‘See how it works’ as the hero action that should remain filled; ‘Start free’ should be outlined.   Flare highlight: the user held Control to spotlight this spot: 27.0% from left, 55.8% from top. ### 0:16 — A Flare identifies the ‘Resources’ navigation link as the only item to hide below 640 CSS pixels.   Flare highlight: the user held Control to spotlight this spot: 81.1% from left, 4.6% from top. ### 0:23 — A motion gesture moves ‘Cancel anytime’ immediately before ‘No credit card’ while preserving all assurance items.   Flare highlight: the user held Control to spotlight this spot: 24.2% from left, 62.4% from top. Move gesture. TARGET (destination): 15.0% from left, 62.4% from top. The source is the position/frame above; the user wants the element moved from there to this target.  ### 0:31 — At 390 CSS pixels, the three-card proof grid forces page-wide horizontal overflow.   Flare highlight: the user held Control to spotlight this spot: 29.9% from left, 52.5% from top. ### 0:39 — The pointer rests on ‘See how it works’ in its low-contrast hover state; the requested state keeps white text and adds a visible keyboard-focus ring.   Pointer position (hover, nothing was clicked): 27.0% from left, 55.6% from top. ## Capture gaps - Browser diagnostics were not captured; absence of console or network evidence does not mean no error occurred. ## Transcript ``` [0:01] First, use the exact headline from the review note I'm highlighting here. [0:07] Between these two hero actions, make this one the only filled button and leave the other one outlined. [0:13] On phones, hide this navigation item completely, but keep the rest. [0:19] In this assurance row, move this item immediately before that one. [0:26] At phone width, the proof cards spill the whole page sideways. Keep all three cards, but make the page fit without horizontal scrolling. [0:35] Finally, on this same filled action, keep the label white on hover and keyboard focus, and give focus a clearly visible ring. [0:42] That's the complete review. ``` ## Share this recording Paste this into a PR description or issue: reviewers get a clickable animated preview when available, and their agents get the agent-readable context link: ```markdown [](https://clipy.online/video/jtnhmqmczkfp) [AREC context for this recording](https://clipy.online/arec/examples/relay-design-review.arec) ``` --- _AREC 1.3 generated by Clipy (clipy.online): screen recordings your AI agent can act on. Default handoff: install the Clipy skill at https://clipy.online/docs/skill and paste the normal video link. Richer authenticated access (private recordings, search, inline frames): `npx -y @clipy/mcp`, docs at https://clipy.online/docs/mcp._