Bundle-Aware Component Imports
Stop a single icon or helper from dragging a whole library into the shipped bundle.
What it adds
Import rules and a check that keep component and icon libraries from arriving whole when only a fraction is used.
What your agent is told to do
5
What your agent is told to do
5-
1
Inspect what the app currently ships and identify the packages whose contribution is far larger than the number of things imported from them. Icon sets, chart libraries, and date utilities are where this usually starts.
-
2
Import from the narrowest entry point each package offers, and where a package cannot be reduced, wrap it behind a local module so the constraint is enforced in one place instead of at every call site.
-
3
Audit the app's own shared index files. A single index re-exporting every component means importing one thing can reach everything, including modules with side effects that defeat elimination entirely.
-
4
Keep code intended for the server out of what is sent to the browser, and check it rather than assuming — configuration objects, secrets-adjacent helpers, and heavy parsing libraries cross that line easily.
-
5
Do not solve this by lazily loading everything. Deferring a component that is on screen at first paint trades a smaller bundle for a visible delay, which is a worse outcome than the weight.
Edge cases it handles
7
Edge cases it handles
7- A package that only offers a single whole-library entry point cannot be reduced by import style alone; either use a narrower distribution or wrap it and load it on demand.
- The app's own shared index files are a common cause of accidental bloat, because one import through the index can pull in every module it re-exports.
- Server-only code that leaks into the browser bundle is both weight and a disclosure risk, and it must be verified rather than assumed from where the file sits.
- Bundle impact has to be visible while a change is being reviewed. A number discovered after release is a number nobody acts on.
- This entry prevents the regression at import time; UI Performance Budget owns the enforced ceiling and the failing check. Report into that budget rather than adding a second, separate threshold.
- A module with side effects at import time cannot be eliminated even when unused, so those must be identified and isolated.
- Duplicate copies of the same dependency at different versions are invisible in a per-package view and need checking separately.
Definition of done
9
Definition of done
9- No package contributes substantially more weight than the surface actually imported from it.
- Shared index files do not cause unrelated modules to be pulled into a bundle.
- Server-only code is verified absent from the browser bundle.
- Bundle size impact is reported on every proposed change during review.
- Modules with import-time side effects are identified and isolated.
- Content visible at first paint is not deferred behind lazy loading.
- The same dependency does not appear twice at different versions.
- The feature matches the existing design system.
- No existing functionality is broken.
Related features
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
UI Performance Budget
UI Performance Budget
Put a number on how heavy and how slow each screen is allowed to get.
What it does
Per-route limits on script, stylesheet, image and font weight, first render, and interaction delay, checked automatically before a change ships.
How it works
- 1 Measure the app's current numbers per route first and set the budget slightly under them. A budget invented from a best-practice article that the app already exceeds is ignored on the day it lands.
- 2 Budget each route separately. The marketing page, the sign-in screen, and the main editor have nothing in common, and one global number either strangles the editor or lets the landing page rot.
- 3 Cover both weight and behaviour: bytes shipped by category, time to first meaningful render, and the delay between a click and a visible response.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/ui-performance-budget
Visual Asset Optimization Pipeline
Visual Asset Optimization Pipeline
Turn source artwork into small, correct derivatives without losing the detail that matters.
What it does
A repeatable processing step that derives sized and compressed variants for every image, icon, and illustration the app ships.
How it works
- 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.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/visual-asset-optimization-pipeline
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.