Brand Logo Uploader
Let a customer upload their logo once and have it appear correctly everywhere.
What it adds
A per-workspace logo upload with light and dark variants, normalised sizes, and consistent rendering across app, email, and exports.
What your agent is told to do
5
What your agent is told to do
5-
1
Treat the logo as a workspace setting with a preview, not a one-off file field. Show the customer exactly how it will look in the app header, on an email, and on an exported document before they save.
-
2
Accept both vector and raster sources and derive a fixed set of normalised renditions from whichever arrives — a small mark for navigation, a larger one for documents, and a raster fallback for email clients that will not render vector.
-
3
Support a light and a dark variant, and fall back sensibly when only one is supplied rather than showing a black logo on a black header. Make it obvious in the UI which variant is missing.
-
4
Reuse the app's existing file upload, storage, and image processing — the same path used by Avatar Upload or File Upload — including its type checks, size ceiling, and malware scanning. Do not add a second uploader with its own rules.
-
5
Do not render the customer's original file directly wherever a logo is needed. An unbounded original blows out email layouts and export margins; always serve a generated rendition at a known size.
Edge cases it handles
8
Edge cases it handles
8- Vector and raster sources behave completely differently and both arrive. Normalise each into the same set of renditions so downstream surfaces never have to care which was uploaded.
- A logo designed for a white page disappears on a dark header. Store separate light and dark variants and pick per surface, rather than inverting the image and hoping.
- Exported files often carry generous transparent or white margins. Trim the surrounding empty space on ingest, or the logo will sit visibly off-centre next to every other element.
- A tiny upload scaled up looks broken on a document header. Enforce a minimum pixel dimension at upload time and explain the requirement in the error, instead of accepting it and rendering mush.
- A replaced logo must appear immediately everywhere. Serve renditions under a URL that changes with the file, or customers will keep seeing the old mark from cache and report it as a bug.
- Vector files can contain scripts and external references. Sanitise them on the server before they are ever served back to a browser.
- The logo appears in contexts that are read aloud or blocked. Give it alt text derived from the workspace name, and reserve its box so headers do not jump while it loads.
- Email clients frequently block remote images. The layout must still read correctly with the logo absent, not collapse around a missing block.
Definition of done
9
Definition of done
9- A workspace can upload a logo once and it renders in the app, in outgoing email, and in exports.
- Vector and raster uploads both produce the same set of normalised renditions.
- Light and dark variants are supported, with a defined fallback when only one exists.
- Uploads below the minimum dimensions are rejected with an explanatory message.
- Surrounding whitespace is trimmed so the logo aligns with adjacent elements.
- Replacing a logo updates every surface immediately with no stale cached copy.
- The logo has alt text and a reserved box that prevents layout shift.
- 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.