SSR-Safe Browser APIs
Stop server-rendered pages breaking or flickering on browser-only APIs.
What it adds
Wrappers around storage, clipboard, media queries, and viewport measurement that behave predictably where no browser exists.
What your agent is told to do
5
What your agent is told to do
5-
1
Find every direct reach for a browser global in code that also runs on the server — stored preferences, clipboard writes, viewport width, dark-mode and reduced-motion queries, network status — and route them through a small set of shared accessors.
-
2
Give each accessor a deterministic value to return when there is no browser, and choose that value to match what the majority of users will resolve to, so the correction after mount is invisible for most and small for the rest.
-
3
Report availability explicitly alongside the value, so a caller can distinguish not yet known from genuinely unavailable and render a neutral state rather than guessing.
-
4
Return a refusal a caller can act on when an API exists but is blocked — storage disabled in a private window, clipboard denied, a permission never granted — instead of throwing from inside a render.
-
5
Do not solve the visible flash by rendering nothing until mount. A blank sidebar or a missing header is a worse first paint than a briefly imperfect one, and it costs the page its server-rendered content.
Edge cases it handles
7
Edge cases it handles
7- Every accessor needs one documented server-side default, and it must be the same on every request. A value that differs between the server render and the first client render produces a mismatch, and a value that differs between two server renders makes the page uncacheable.
- Reading a stored theme or a media query only after mount swaps the layout in front of the user. Reserve the space, keep the first paint stable, and apply the corrected value without moving anything around it.
- Storage throws rather than returning empty when it is disabled or the quota is full, and clipboard and notification permissions can be denied outright. Every wrapper must treat refusal as an ordinary outcome and let the caller fall back.
- The wrappers must be trivial to replace in tests, because assertions about a component's behaviour at a narrow viewport or with storage unavailable should not require driving a real browser.
- Media query and resize listeners registered by these wrappers must be removed when their caller goes away, or a long session accumulates listeners that fire against unmounted views.
- Viewport height on mobile changes as browser chrome and the on-screen keyboard appear, so a measurement taken once at mount is wrong within seconds.
- The same accessor may be called from many components at once, so it should share one underlying listener and one cached value rather than opening a subscription per caller.
Definition of done
8
Definition of done
8- No component reaches for a browser global directly on a path that also renders on the server.
- Each accessor returns one documented, deterministic value when no browser is present.
- Nothing on the page moves or is replaced when the real client value arrives after mount.
- Blocked storage, clipboard, and permission APIs return a handled refusal rather than throwing.
- Each accessor can be stubbed in a test without a browser environment.
- Listeners registered by the wrappers are removed with their callers and shared between concurrent ones.
- The feature matches the existing design system.
- No existing functionality is broken.
Related features
AI Cost Budgets
AI Cost Budgets
Cap what AI features are allowed to spend before the bill arrives.
What it does
Monetary spending limits on AI work, scoped by workspace, feature, and time period, enforced before a run starts.
How it works
- 1 Find every place the app calls a model and route all of them through one accounting point that records estimated and actual spend against a scope. A budget that only covers the chat feature is not a budget.
- 2 Estimate the cost of a run from the size of its input before dispatching it, and refuse anything that would exceed the remaining budget on its own.
- 3 Reserve the estimate against the budget when the run starts, then reconcile to the real usage figures when it finishes, releasing whatever was over-reserved.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/ai-cost-budgets
Multi-Model Routing
Multi-Model Routing
Send each AI request to the right model using rules you can read and test.
What it does
A deterministic routing layer that picks a model per request from task type, context size, latency budget, and data sensitivity.
How it works
- 1 Express routing as explicit, ordered rules over inputs the app can measure: task type, estimated context size, latency budget, and the sensitivity classification of the data involved. A rule set that can be read line by line can be reviewed and tested.
- 2 Make routing deterministic. The same inputs must always produce the same route, so a bad output can be reproduced and a rule change can be evaluated. Randomised or load-based selection turns every incident into guesswork.
- 3 Classify data before routing and refuse to route restricted content to any destination not approved for it. This check is a hard block, not a preference, and it must run before the request is assembled.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/multi-model-routing
SEO Setup
SEO Setup
Make your app findable — titles, meta, Open Graph, sitemap, robots.
What it does
The baseline SEO and social-preview setup every public app should have, and most skip.
How it works
- 1 Give every public page a unique, descriptive title and meta description. Find the app's layout and add a mechanism for each page to set them.
- 2 Add Open Graph and Twitter Card tags so shared links render a preview instead of a bare URL.
- 3 Generate a sitemap.xml covering every public, indexable page, and a robots.txt pointing at it.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/seo-setup
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.