Media Library
Give every uploaded file one browsable home instead of scattering them across the app.
What it adds
A single browsable store of every uploaded image, video, and document, with folders, search, and reuse from any upload field in the app.
What your agent is told to do
5
What your agent is told to do
5-
1
Build this on top of the app's existing upload path rather than beside it. If File Upload, Avatar Upload, Attachment Gallery, or a hosted media upload already exist, they must all write into the library and read back from it, so a file uploaded in one place is findable in another.
-
2
Give every upload field a second route: choose an existing file from the library. That is the whole point of the feature, and a library nothing can select from is just a storage report.
-
3
Record where each file is used. When someone deletes a file that is still referenced, name the pages or records that will break and make them confirm.
-
4
Deduplicate by hashing file contents on upload. If the same bytes are already stored for that workspace, link to the existing record instead of storing a second copy, but keep the new filename and the new uploader on the reference.
-
5
Do not load the whole library at once. Paginate or lazily page the grid and defer thumbnail loading until a tile is near the viewport, or the first visit from a workspace with ten thousand files will hang the browser.
Edge cases it handles
8
Edge cases it handles
8- Deleting a file that is still referenced by a page, message, or product breaks it silently. Show the usage list before deletion and offer to detach rather than destroy.
- Two people uploading the same file must not produce two stored copies. Hash the content, match against existing records in the same workspace, and reuse the stored object while still logging the second upload.
- The browser cannot preview PDFs, design files, archives, or many video formats inline. Generate a thumbnail server-side for those, and fall back to a typed placeholder icon when generation fails rather than showing a broken image.
- A library with tens of thousands of assets must not fetch every thumbnail on first paint. Page the results and load thumbnails only as tiles approach the viewport, with reserved tile dimensions so the grid does not reflow.
- Storage is finite and someone will fill it. Enforce a per-workspace quota server-side, show consumption before it is reached, and give the over-limit state a clear action: delete files or upgrade, not a generic upload failure.
- Every file in the library must inherit the app's existing access rules. A private attachment must not become readable to the whole workspace merely because it is now listed in a shared browser.
- An upload cancelled or interrupted halfway must not leave a half-written file listed as usable. Mark uploads incomplete until they finish and sweep the abandoned ones.
- Files must carry alt text or a description where the app renders them publicly. Reuse any existing alt text generation rather than leaving the field blank.
Definition of done
9
Definition of done
9- Every upload surface in the app writes into the library and can select from it.
- Each file shows where it is used, and deleting a referenced file requires confirmation.
- Identical uploads are stored once and linked, not duplicated.
- Formats the browser cannot render inline have server-generated thumbnails or a typed placeholder.
- The grid pages and lazily loads thumbnails without layout shift on large libraries.
- Per-workspace storage quotas are enforced server-side with a clear over-limit state.
- Library access respects the app's existing per-file permissions.
- 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.