Local UI State Conventions
Settle where each kind of interface state lives before it ends up everywhere.
What it adds
A written rule for which state belongs to a component, to the URL, to storage, or to the account.
What your agent is told to do
5
What your agent is told to do
5-
1
Classify the app's existing interface state into four homes and write the rule down: ephemeral and component-local, shareable and therefore in the URL, device-specific and therefore in storage, or account-level and therefore on the server.
-
2
Put anything a user would expect to survive being sent as a link into the URL — the active tab, the open record, filters, sort, the search term — and read it from there rather than mirroring it into a second copy that can drift.
-
3
Keep the rest as close to the component that owns it as it will go. A menu's open state, a hovered row, a tooltip, and a half-typed inline edit have no business above the element they belong to.
-
4
Promote a piece of state only when a second consumer genuinely needs it, and record why. Lifting state in anticipation of a future need is how a global store fills with things one component reads.
-
5
Persistence of sort, columns, filters, and layout across sessions belongs to the app's existing view preferences feature; this entry decides where transient state lives while a screen is open. Do not build a second persistence path here.
Edge cases it handles
7
Edge cases it handles
7- State declared far above its only consumer re-renders everything in between for no reason, and makes the component impossible to reuse or test on its own. Move it down until it sits with the thing that owns it.
- Promotion should be the exception and needs a stated reason. Once a value is global, every component may read it, and the cost of removing it later is proportional to how many did.
- A route change, a workspace switch, or a change of signed-in user must clear the state that belonged to the old context — an open menu, a filter, a draft comment, a selected row. Carrying a previous workspace's selection into a new one is a data leak, not a convenience.
- Ephemeral state must not be persisted. A restored scroll position, a reopened dropdown, or a resurrected half-typed search on the next visit is confusing rather than helpful.
- Two tabs open on the same account share device storage, so anything written there must tolerate the other tab writing it too, or the tabs will overwrite each other.
- Anything held in the URL becomes part of a link the user may paste into a chat, so it must not carry record contents, tokens, or personal data.
- Drafts are the genuine exception to the persistence rule, and they need an explicit owner, a scope, and a point at which they expire — not a blanket permission to persist everything.
Definition of done
9
Definition of done
9- Every category of interface state has a documented home: component, URL, device storage, or account.
- Shareable state is read from the URL, with no duplicate copy held elsewhere.
- Component-local state sits at the element that owns it, not above it.
- Each promoted piece of state has a second consumer and a recorded reason.
- Route, workspace, and identity changes reset the state belonging to the previous context.
- No ephemeral state survives a reload, apart from drafts, which have a defined scope and expiry.
- Cross-session persistence of view settings is delegated to the existing view preferences feature.
- 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.