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
Prompt Versioning
Prompt Versioning
Tie every AI output to the exact prompt version that produced it.
What it does
Immutable, numbered versions of each prompt, with the run configuration recorded and every output stamped with the version used.
How it works
- 1 Make every publish create a new immutable version rather than overwriting the previous text. Editing history in place destroys the only record of what produced last month's outputs.
- 2 Capture the whole run configuration with each version, not just the wording: which model tier and parameters were used, which tools were available, and the expected output shape. A prompt that behaves differently under different settings is not one prompt.
- 3 Stamp every generated output with the version identifier that produced it, and keep that stamp with the record so an output found later can be traced back to its exact instructions.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/prompt-versioning
Retrieval Debugger
Retrieval Debugger
Show exactly which sources, chunks, and scores produced a given AI answer.
What it does
A per-answer inspector showing the query as issued, the filters applied, the candidate chunks with their scores, and what reached the model.
How it works
- 1 Capture for each answer the query as it was issued, the filters applied, the candidates returned with their scores, and which of those actually made it into the request after the context ceiling was applied.
- 2 Show results after permission filtering, with a count of how many candidates were excluded and why. Displaying the pre-filter set turns the debugger into a way to read content the viewer cannot open.
- 3 Present each scoring stage separately — keyword, semantic, and any reranking — because a chunk that ends up first overall may have been rescued by one stage after being buried by another, and a single blended number hides that.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/retrieval-debugger
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.