Baseline Grid Overlay
Check vertical rhythm against a real baseline grid instead of judging it by eye.
What it adds
A configurable baseline and column grid drawn over the interface for typography and vertical-rhythm review.
What your agent is told to do
5
What your agent is told to do
5-
1
Derive the default baseline interval from the app's existing type scale and line heights rather than picking a round number, so the grid describes the system the app already claims to follow.
-
2
Let the reviewer change the interval, offset, colour, and opacity from the tool itself, and remember the last settings, because a grid that has to be reconfigured on every reload does not get used twice.
-
3
Anchor the grid to the document origin and keep it registered to the content as the page scrolls, so a heading four screens down can be checked against the same rhythm as the first one.
-
4
Offer a column grid alongside the baseline, matched to the app's real container widths and gutters, and let each be toggled independently.
-
5
Do not treat this as a linter. This feature owns drawing the reference; deciding that an element is off-grid and reporting it as a defect belongs to UI Lint Rules, and measuring the actual gap between two boxes belongs to Spacing Overlay.
Edge cases it handles
7
Edge cases it handles
7- Browser zoom and fractional device pixel ratios make hairlines drift or disappear; recompute line positions from the real rendered scale rather than assuming one CSS pixel equals one device pixel.
- If the app supports more than one density or compact mode, the baseline interval changes with it — the overlay must follow the active mode rather than always drawing the comfortable-mode grid.
- The grid must stay fixed to the content, not to the viewport, or every scroll appears to shift the rhythm and the review is worthless.
- Some elements are deliberately off-grid for optical reasons — icon alignment, cap-height corrections, badges. Provide a way to mark and remember those exceptions so they stop being re-reported at every review.
- Baselines sit at the text baseline, not the top of the line box; aligning the grid to line-box tops will make correctly set type look wrong.
- The overlay must sit above the interface but below modals and toasts, or it becomes impossible to review a dialog against the grid.
- The grid must be absent from production builds, and its toggle must not be reachable by a signed-in customer who guesses a URL parameter.
Definition of done
9
Definition of done
9- A baseline grid can be toggled on any screen, with configurable interval, offset, and opacity.
- Grid settings persist between reloads.
- Lines remain crisp and correctly spaced at every zoom level and device pixel ratio.
- The grid follows the active density mode's baseline interval.
- The grid stays registered to the content while scrolling rather than to the viewport.
- Deliberate optical exceptions can be marked and are not re-flagged.
- The overlay is unavailable in production builds.
- 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.