Component Playground
Render every component in isolation, in every state, with its props adjustable.
What it adds
A development surface that renders each component on its own with controls for its props, themes, and states.
What your agent is told to do
5
What your agent is told to do
5-
1
Render playground examples inside the same providers, theme, reset, and global styles the real application uses. A component that only looks right in the playground is a component whose playground is lying.
-
2
Give each component controls for its documented props, and derive the control list from the component's own definition so a new variant appears without anyone remembering to add it.
-
3
Cover the states that are hard to reach in the product: loading, empty, error, disabled, no-permission, and content far longer than the design assumed. Those are the states the playground exists for; the happy path is already visible in the app.
-
4
Include the theme and viewport switches in the playground itself, so light, dark, and narrow layouts can be checked without a build change.
-
5
Do not add branches to component code for the playground's benefit. A condition that changes behaviour when rendered outside the app means the thing being reviewed is not the thing that ships.
Edge cases it handles
7
Edge cases it handles
7- Examples must render through the application's real providers and styles. A playground with its own stripped-down wrapper hides exactly the theme, layout, and context problems it was built to catch.
- Loading, error, empty, and overlong-content states must each have an example. Those states reach users through paths that are awkward to reproduce in the running app, so they go unreviewed unless the playground forces them.
- No component may contain a code path that exists only for the playground. Test hooks, mocked data injected inside the component, and conditions keyed on the environment all mean the reviewed rendering is not the shipped one.
- Examples must stay aligned with the component's current props, and a renamed or removed prop must break the example loudly rather than silently rendering a default.
- Every component in the inventory should have at least one example, and the gap between the two lists should be visible, since the components without examples are usually the ones that need them.
- The playground must not become a route in the production build, and it must not require the production data sources to load.
- Fixture content should include text in a language with long compound words and a right-to-left script, because layouts break there first and never in the sample copy.
Definition of done
9
Definition of done
9- Examples render inside the application's real providers, theme, and global styles.
- Prop controls are derived from each component's definition rather than maintained by hand.
- Loading, error, empty, disabled, no-permission, and overlong-content states each have an example.
- No component contains a branch that exists only for the playground.
- Theme and viewport can be switched from within the playground.
- Components lacking an example are reported against the component inventory.
- The playground is absent from the production build and needs no production data source.
- 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.