CSS Debug Outlines
Outline every box on the page from one switch, without touching component code.
What it adds
A single development-only stylesheet that outlines and labels elements across the whole interface from one toggle.
What your agent is told to do
5
What your agent is told to do
5-
1
Implement the whole thing as one stylesheet activated by an attribute or class on the document root, so nothing has to be added to individual components and the switch can be flipped anywhere in the app.
-
2
Use outlines, which are painted outside the box and take no space, rather than borders. Confirm the change by measuring a known element with the mode on and off.
-
3
Vary the outline treatment by nesting depth so a deeply nested tree remains readable rather than collapsing into one grey mass of coincident lines.
-
4
Allow the set of outlined elements to be narrowed by selector, so a developer chasing one region is not shown the entire document.
-
5
Do not use this as the app's structural debugging tool. Labelled grid tracks, scroll containers, and component-level filtering belong to Layout Debug Mode; this feature is deliberately the crude, zero-dependency switch, and the two must not be active at once.
Edge cases it handles
7
Edge cases it handles
7- Borders and any change to padding or box sizing move the layout and manufacture new bugs; only outlines, box shadows, or an overlay layer are acceptable.
- Deeply nested markup produces overlapping outlines that read as a single thick line — cycle colour or opacity by depth so structure remains visible ten levels down.
- Selector filtering must be genuinely scoped, so restricting to one region does not still paint its ancestors and every sibling on the way down.
- The stylesheet must be excluded from production bundles entirely, not merely left inert behind an unset class. Verify against a built artefact.
- Elements with their own outline or focus ring must not have it overwritten, or keyboard focus becomes invisible while the mode is on.
- Replaced content such as images, canvases, and embedded frames will not show inner structure; outline the element itself and do not imply there is nothing inside.
- The toggle state should survive a reload during a debugging session rather than being lost on every refresh.
Definition of done
8
Definition of done
8- One toggle outlines elements across the entire app with no per-component changes.
- Measured element dimensions are identical with the mode on and off.
- Nesting depth is distinguishable in the outline treatment.
- Outlining can be narrowed to a selector or region.
- Focus indicators remain visible while the mode is active.
- The stylesheet is absent from the production bundle, verified in the built output.
- The feature matches the existing design system.
- No existing functionality is broken.
Related features
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
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
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.