Image Markup Comments
Let teammates pin a comment to an exact spot on an image and discuss it there.
What it adds
Positioned comment pins on an image, each opening a threaded discussion anchored to that point.
What your agent is told to do
5
What your agent is told to do
5-
1
Build the visible loop first: click a point on the image, type, post, and the pin appears with a thread behind it. Everything else is secondary to that being fast and obvious.
-
2
Extend the app's existing Comments and Mentions feature rather than creating a second commenting system. A pinned comment is an ordinary comment with a position attached, so it inherits the same threading, mentions, notifications, editing, and moderation.
-
3
Store each pin as a proportional position within the image, so it lands on the same detail regardless of the size the image is rendered at.
-
4
Anchor pins to a specific version of the image. When someone uploads a replacement, keep the old comments attached to the version they were made against instead of scattering them across new content.
-
5
Do not build a general drawing and shape editor. Pins and threads are the minimum coherent version; regions, arrows, and freehand markup can wait until people ask for them.
Edge cases it handles
8
Edge cases it handles
8- A pin recorded in screen pixels lands in the wrong place for every other viewer. Store positions relative to the image's own coordinate space and convert only at render time.
- Pins must stay glued to their detail while the image is resized, zoomed, or viewed on a phone. Reposition them on every layout change rather than placing them once on load.
- Several pins on the same detail overlap into an unclickable pile. Cluster them into a single marker with a count that expands, so every thread stays reachable.
- When an image is replaced, existing comments still refer to the old picture. Keep them bound to that version and make it clear in the UI which version a thread was written against.
- Notify the people mentioned and the thread participants, not everyone who has ever opened the image. Blanket notification is how a review tool becomes something people mute.
- Pinned comments on anything publicly visible need the same spam and abuse handling as the rest of the app's user-generated content, including reporting and removal.
- A pin placed while the image is still loading must not be recorded against a zero-sized element.
- Every pin needs a keyboard path: a list of comments beside the image, ordered and focusable, that highlights the corresponding point.
Definition of done
9
Definition of done
9- A user can place a pin on an image and start a thread at that point.
- Pins render at the same detail across screen sizes, zoom levels, and devices.
- Overlapping pins cluster into an expandable marker and remain individually reachable.
- Comments stay attached to the image version they were written against when the image is replaced.
- Notifications reach mentioned users and thread participants only.
- Pinned comments use the app's existing comment storage, mentions, and moderation.
- All threads are reachable and navigable by keyboard.
- The feature matches the existing design system.
- No existing functionality is broken.
Related features
Picture-in-Picture Mode
Picture-in-Picture Mode
Let viewers pop a video into a floating window and keep using the rest of the app.
What it does
A control on the video player that hands the video to the browser's floating always-on-top window.
How it works
- 1 Add the control to the app's existing video player rather than building a separate popped-out player. Two players competing over the same element is the main way this feature goes wrong.
- 2 Keep the app in sync with the floating window in both directions. Pausing, seeking, or changing volume from the floating window must update the in-page player, and closing the floating window must return playback to the page at the same position.
- 3 Decide explicitly what happens when the user navigates away from the page that owns the video. Either keep the floating window alive and reconnect when they return, or end it cleanly, but do not leave a floating window playing a video the app has forgotten about.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/picture-in-picture-mode
Audio Waveform Scrubber
Audio Waveform Scrubber
Show the shape of a track so listeners can see the quiet and loud parts and click to them.
What it does
A waveform rendered from precomputed amplitude data, doubling as the seek control on the audio player.
How it works
- 1 Compute the amplitude data on the server when the file is first stored, and serve it as a small dataset the page can draw. Do not decode the audio in the browser to build the waveform.
- 2 Replace the plain scrub bar in the app's existing Audio Player with this surface rather than adding a second seek control beside it.
- 3 Draw played and unplayed regions distinctly, and keep the playhead position exact under click, drag, and keyboard seeking on the same surface.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/audio-waveform-scrubber
Hover Video Preview
Hover Video Preview
Hovering a video card plays a short silent clip so people see what it is before clicking.
What it does
A silent, short-loop preview that plays inside a video card on deliberate hover and returns to the poster on exit.
How it works
- 1 Generate a short, low-resolution, silent preview clip during video processing and store it alongside the poster frame. Do not play the full source file behind the card.
- 2 Require a deliberate hover before doing anything. Wait several hundred milliseconds after the pointer settles, then load, so a cursor crossing a grid does not fire a dozen requests.
- 3 Give touch devices an explicit preview control on the card, since hover does not exist there. A long-press or a small preview button is fine; silently doing nothing on mobile is not.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/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.