Screenshot Capture Tool

Let people capture what they are looking at, mark it up, and attach it to a report.

involved Media & Video

What it adds

An in-app capture control that produces an annotated image of the current screen and attaches it to a report or message.

What your agent is told to do

1
Lead with the flow the user sees: a capture control, a still image they can draw on, and a send. Offer a small fixed set of markup tools — rectangle, arrow, freehand, and a solid block for hiding something — and nothing more.
2
Redact before you store. Password fields, payment inputs, and any element the app already marks as sensitive must be painted over in the captured bitmap itself, not merely hidden by a layer the recipient can peel back.
3
Attach the context an image cannot carry on its own: the page URL, the viewport size, the browser and platform, and the identifier of the signed-in user. A screenshot without those is a support ticket that needs three follow-up questions.
4
Reuse the app's existing file upload and attachment handling — including its size limits, storage location, access rules, and malware scanning — rather than adding a second upload path for images. If an Attachment Gallery already exists, captures appear there like any other attachment.
5
Do not attempt a pixel-perfect capture of arbitrary third-party embeds and cross-origin frames. Capture what you can, mark the area that could not be read, and say so in the UI instead of shipping a silently blank rectangle.

Edge cases it handles

Password, card number, and other sensitive fields must be masked in the stored image before it leaves the browser. A capture that reveals a customer's card details is worse than no capture at all.
Screen capture permission can be refused at the start or revoked mid-session by the operating system. Detect both, keep the report form and everything already typed into it, and let the user continue without an image.
Content below the fold and inside scrolling panes is routinely the part that matters. Either stitch the full scrollable region or state plainly that only the visible viewport was captured, so nobody assumes the missing part was fine.
A raw capture from a high-density display is enormous. Downscale and compress on the client before upload, enforce the size ceiling on the server as well, and reject rather than truncate anything over it.
Record the page URL and viewport dimensions alongside the image, since the same screen looks different at different widths and the report is useless without knowing which one was seen.
A capture interrupted part way — the tab closed, the network dropped, the user cancelled — must leave no orphaned half-written file in storage.
Markup must be undoable step by step, and the user must be able to start the annotation over without recapturing the screen.
Screenshots often contain other people's personal data. Apply the same retention window and read permissions as the report they are attached to, and delete them when the report is deleted.

Definition of done

A user can capture the current screen, annotate it, and attach it to a report without leaving the page.
Sensitive fields are painted out of the stored bitmap and cannot be recovered from the file.
Every capture carries the page URL, viewport size, and client details.
Denied or revoked capture permission leaves the report usable and the typed content intact.
Captures land in the attachment surface users already know, under the same access rules as files they attached by hand.
Oversized captures are compressed client-side and rejected server-side above the limit.
Deleting a report deletes its captures.
The feature matches the existing design system.
No existing functionality is broken.

Related features

Picture-in-Picture Mode

Audio Waveform Scrubber

Hover Video Preview

How it works

1

Copy the link

Grab the Markdown instruction URL for this feature.
2

Give it to your AI

Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.
3

It inspects, then implements

Your agent reads your existing app first, then adds the feature to fit it.

Works with your stack

These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.

Need it tighter than that? Customize the feature and tell it exactly what you're running.