Product Image Gallery
Show a product's photos as a browsable set that zooms, swipes, and never jumps the page.
What it adds
A gallery on the product page with a main image, thumbnails, zoom, and touch swipe, driven by an ordered set of product photos.
What your agent is told to do
5
What your agent is told to do
5-
1
Reserve the main image's space from its stored aspect ratio before anything loads, so the page never reflows when the photo arrives. Serve a small blurred or solid placeholder in that box rather than leaving it empty.
-
2
Extend the app's existing Image Lightbox for the full-screen zoomed view rather than building a second overlay. The gallery supplies the ordered image set and the current index; the lightbox handles the overlay, focus trapping, and escape.
-
3
Serve appropriately sized images for the thumbnail, the main view, and the zoomed view, using the app's existing Image Compression or media pipeline. Do not scale one large original down in the browser.
-
4
Store the display order and per-image alt text with the product, and require alt text at upload. If the app has AI Image Alt Text, use it to draft the text and let the merchant correct it.
-
5
Do not preload every image at full resolution. Load the first image and its neighbours eagerly and the rest as they are approached, because a product with fifty photos otherwise costs several megabytes before the page is usable.
Edge cases it handles
8
Edge cases it handles
8- The main image's box must be sized from its known aspect ratio before load, or the price and add-to-cart controls will jump down the page as each photo arrives and shoppers will click the wrong thing.
- Pinch zoom on touch must scale the image without hijacking the page scroll. Consume the gesture only while zoomed past the natural size, and release it back to the page at the edges so the shopper is never trapped inside the gallery.
- When the variant changes, the thumbnails and the main image must switch together and the selected index must reset to a valid position, rather than leaving a highlighted thumbnail that no longer matches what is shown.
- A product with one image must show no thumbnail strip, no arrows, and no swipe affordance, and a product with fifty must give the strip its own scroll with a clear indication of position rather than growing the page.
- Arrow keys must move between images when the gallery has focus, and every image needs alt text describing that specific photo. Repeating the product name on all fifty is the same as having none.
- A missing or failed image must render a labelled placeholder in the reserved box and stay in the sequence, so the count and the thumbnail positions do not shift.
- Swipe must not fire on a vertical scroll that drifts sideways. Require a dominant horizontal movement before taking over the gesture.
- Autoplaying carousels and animated transitions must respect a reduced-motion preference and must never advance on their own while the shopper is looking at a photo.
Definition of done
9
Definition of done
9- The layout does not shift when any gallery image loads.
- Thumbnails, the main image, and the zoomed view each receive an appropriately sized file.
- The full-screen view is the app's existing lightbox, not a second overlay implementation.
- Changing the variant updates thumbnails and main image together with a valid selected index.
- Galleries of one image and of fifty images both render sensibly without arrows or an overgrown strip.
- Arrow keys navigate the set and each image carries its own alt text.
- Pinch zoom works on touch without trapping the page scroll.
- 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.