Visual Asset Optimization Pipeline
Turn source artwork into small, correct derivatives without losing the detail that matters.
What it adds
A repeatable processing step that derives sized and compressed variants for every image, icon, and illustration the app ships.
What your agent is told to do
5
What your agent is told to do
5-
1
Locate every visual asset the app serves — bundled artwork, icons, illustrations, and user uploads — and bring them all through one processing path instead of optimising some by hand.
-
2
Keep the untouched original of every asset in a place the pipeline can reach, so a change in format or quality target can be applied by reprocessing rather than by re-sourcing artwork nobody can find.
-
3
Set the compression target per kind of asset. A photograph tolerates aggressive compression; a screenshot containing text and a flat illustration with hard edges show artefacts at the same setting.
-
4
Emit a manifest describing every derivative produced — its dimensions, format, and the original it came from — and let the Adaptive Media Source Component read that manifest rather than construct URLs for files the pipeline may never have made.
-
5
Do not reprocess everything on every build. Key derivatives by the content of the source so an unchanged asset is reused, or the pipeline becomes slow enough that someone disables it.
Edge cases it handles
7
Edge cases it handles
7- Originals must survive. Once the pipeline overwrites its own input, the next change of format or quality has nothing to work from and the artwork has to be recovered from a designer's machine.
- One quality setting cannot serve every kind of asset. Verify a photograph, a text-bearing screenshot, and a flat vector-style illustration side by side before fixing the defaults.
- Transparency and animation must survive conversion. An alpha channel flattened to white and an animated file reduced to its first frame are both silent failures that only show up on the page.
- Every derivative must be checked before it is published — that it opens, that its dimensions are right, and that it is genuinely smaller than the source. A conversion that produced a larger file should be discarded in favour of the original.
- Orientation metadata must be applied and then stripped, so a photograph does not publish sideways, and location and camera metadata never reach a public URL.
- Colour profiles must be converted rather than dropped, or brand colours will shift between the source file and the rendered page.
- User uploads have to travel the same path at runtime, with a size and dimension limit and a defined behaviour for a file the pipeline cannot process.
Definition of done
9
Definition of done
9- Every visual asset the app serves is produced by the pipeline rather than optimised by hand.
- Untouched originals are retained and reprocessing regenerates all derivatives from them.
- Compression targets differ by asset type and were validated against a photograph, a screenshot, and an illustration.
- Transparency and animation are preserved in every derivative that claims to support them.
- Each derivative is verified for openability, dimensions, and size before publication, and a larger-than-source result is rejected.
- Published files carry no camera or location metadata.
- An unchanged asset is not reprocessed on a rebuild.
- The feature matches the existing design system.
- No existing functionality is broken.
Related features
Font Subsetting
Font Subsetting
Load only the glyphs a page needs, without breaking the alphabets it did not expect.
What it does
Per-script font subsets with declared character ranges and a fallback order for characters no subset covers.
How it works
- 1 Inventory the weights, styles, and families the app genuinely renders. Most projects ship two or three weights they never use, and dropping those is a larger win than any subsetting.
- 2 Split each family by writing system and declare the character ranges each file covers, so a page that renders only Latin text never fetches the Cyrillic or Greek file.
- 3 Choose subsets from the locales the product supports and the languages its users actually write in, not from the words currently on the page.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/font-subsetting
Layout Shift Guard
Layout Shift Guard
Stop content jumping as a page loads, and catch it when it starts happening again.
What it does
Reserved space for everything that arrives late, plus measurement that reports unexpected movement on the app's main screens.
How it works
- 1 Walk the app's main screens with the network throttled and note everything that moves after first paint. Images, avatars, embeds, banners, ad slots, and asynchronously loaded panels are the usual sources.
- 2 Give every image, video, iframe, and embed explicit dimensions or a fixed aspect ratio so its box exists before its content arrives, including the ones whose size comes from data.
- 3 Control the swap from fallback to web font so the two have compatible metrics, and accept a slightly imperfect fallback over a page that reflows once the real font lands.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/layout-shift-guard
Render Stability Guardrails
Render Stability Guardrails
Make render optimisation provable, so it removes work instead of introducing stale UI.
What it does
A set of rules and checks governing memoisation, keys, and render boundaries on the app's busiest views.
How it works
- 1 Profile a real interaction on a real view before changing anything, and write down the cost being removed. An optimisation with no measured baseline cannot be shown to have worked and cannot be safely reverted.
- 2 Require every cached callback and derived value to declare each value it reads, and treat a missing declaration as a defect — a handler holding last render's values will act on data the user can no longer see.
- 3 Derive list keys from the stable identity of the record. A position-based key silently reuses the wrong element as soon as the list is sorted, filtered, or has an item removed from the middle.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/render-stability-guardrails
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.