Design Token Linter
Find the hardcoded colours, spacings, and radii that drifted away from the token set.
What it adds
A check over the app's styles and markup that reports raw colour, spacing, typography, radius, and shadow values where an approved token exists.
What your agent is told to do
5
What your agent is told to do
5-
1
Read the app's existing token definitions as the source of truth for the check, so adding a token to the design system automatically widens what the linter recognises without a second list to maintain.
-
2
Scan every place a value can be written: stylesheets, style objects, inline style attributes, utility class strings, and component props that take a raw value.
-
3
Report the nearest matching token alongside each finding, with the difference, so a developer sees that a 15px gap is one pixel from an existing step and can decide rather than re-derive.
-
4
Carve out the categories where raw values are legitimate — data visualisation series colours, media queries, third-party embed styling — and express those as documented, reviewable exceptions rather than blanket directory-wide silence.
-
5
Do not fail the build on the first run. Record the existing violations as an accepted baseline, block only new ones, and reduce the baseline deliberately; a check that turns the whole codebase red on day one gets removed on day two.
Edge cases it handles
7
Edge cases it handles
7- Values built from expressions or arithmetic will not match a token literally. Resolve what can be resolved statically and report the rest as unverifiable rather than as violations.
- Every finding must name the nearest token and the delta. A report that only says a value is untokenised leaves the developer to search the scale by hand, and most will not.
- Charts, illustrations, and third-party media legitimately need values outside the scale; these exceptions must be documented and reviewable, not achieved by excluding whole directories from the scan.
- Inline styles and dynamically composed class strings are where raw values hide most often — a scan of stylesheets alone will report a clean codebase that is nothing of the sort.
- Colours must be compared after normalisation, so the same colour written in different notations is recognised as one value and not reported twice or missed entirely.
- Reporting untokenised values is this feature's job; showing which token produced a rendered value at runtime belongs to Design Token Inspector, and general markup and accessibility rules belong to UI Lint Rules.
- A token that has been deprecated should be flagged in use as well, or the linter enforces conformance to a scale the design system has already moved on from.
Definition of done
9
Definition of done
9- The check reads token definitions from the design system rather than a separate hardcoded list.
- Stylesheets, style objects, inline styles, utility class strings, and raw-value props are all scanned.
- Each finding names the nearest approved token and the difference from it.
- Computed and dynamic values are reported as unverifiable rather than as false violations.
- Legitimate exceptions are documented per case and visible in review.
- Existing violations are recorded as a baseline and only new violations fail the check.
- Uses of deprecated tokens are reported alongside untokenised values.
- 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
Model Selection
Model Selection
Let each AI task run on the model that suits its quality, speed, and cost needs.
What it does
A per-task model choice, drawn from the models the app already has configured, with capability filtering and safe defaults.
How it works
- 1 Enumerate the models the app already has access to and record what each one can actually do: context capacity, whether it can return the structured output the task requires, whether it supports the tools the task calls, and its relative cost and speed.
- 2 Offer only the models that satisfy the task's requirements. A task that needs structured output must not list a model that cannot reliably produce it, because the failure appears later as malformed responses rather than as an unavailable option.
- 3 Store the choice against the specific task, not as one global setting. A single default forces a summarisation task and a classification task onto the same tier when they have opposite needs.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/model-selection
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.