How to use the Generated UI Calculator agent skill

What the generated-ui skill makes the agent do

An agent skill is a folder of instructions that an AI agent loads when a request matches what the skill is for. The generated-ui skill covers requests where you want to change numbers and see the effect, such as splitting a bill, comparing subscription plans, or testing a what-if scenario.

When it applies, the agent shows an interactive card in the conversation with inputs, sliders and live results. The skill tells the agent to prefer this card over writing a separate HTML file, unless you ask for a file, web page, component or project code.

• Good fit: comparing options under adjustable assumptions, such as plans, prices, weights or capacities.
• Good fit: testing what-if numbers without leaving the chat.
• Not a fit: a single fact or simple result, where the skill itself says to answer with text.
• Not a fit: anything needing live data or network access, because the card cannot fetch data.

Install the generated-ui skill in Claude or Qwen Code

Download the ZIP file for the generated-ui skill from this page. The skill is a folder that contains a single file named SKILL.md, so unzip the download and keep that folder intact.

To use it across all your projects, unzip it into your user skills folder at ~/.claude/skills/. To use it only in one project, unzip it into that project's .claude/skills/ folder instead.

In the Claude apps you can instead upload the skill under Settings, then Capabilities, then Skills.

• Personal install: ~/.claude/skills/
• Single project install: the .claude/skills/ folder inside your project
• Claude apps: Settings, then Capabilities, then Skills, then upload

Check your host supports the card

The skill needs a host that supports the generated_ui_show tool. The source names Qwen Code with this extension enabled as an example of such a host. If your host does not provide that tool, the agent cannot show a card and will answer in text instead.

Because the card is created through this tool, a successful call only confirms the card was accepted for display. It does not guarantee the calculations are correct, so check important numbers yourself.

• Requirement: a host that supports generated_ui_show, such as Qwen Code with this extension enabled.
• Scripts: the skill runs scripts.
• Network: the skill does not use the network.

Trigger the skill with natural requests

You do not need a special command. Describe what you want to adjust and the agent will decide whether the card fits. Phrases that signal an interactive view include 'let me adjust', 'I want to try different numbers', 'a calculator', 'a simulator' and 'a what-if'.

Give the agent the numbers and assumptions you care about. The skill asks the agent to label illustrative data and uncertain inputs, so tell it which values are real and which are guesses.

• Try: 'Build a calculator I can use to split this 186 dollar dinner between five people with a tip I can adjust.'
• Try: 'Let me compare these three phone plans and change the monthly data usage to see which is cheapest.'
• Try: 'I want to try different loan terms and interest rates and see the monthly payment.'
• Avoid asking for a single fact, such as 'what is 15 percent of 80', since a text answer is faster.

Use the card and the continue button

Move the sliders or change the inputs and the results update in the card. Changing a value does not send a message or call the model. The card runs local calculations only.

In supported Qwen Code hosts, a button labelled Continue analysis with current parameters appears outside the card. Clicking it sends your applied values to the original session as one request. If you change values and then keep chatting, the latest applied values are attached to your next message as a reference. The agent does not see the source code or the first summary, so describe any assumption you want it to reconsider.

• Changing a slider does not submit a prompt.
• The continue button sends the applied parameters, not the derived results.
• Values can come from disabled or hidden controls, so use clear labels and check what you are sending.

Troubleshoot a card that does not appear

If the card cannot be displayed, the agent receives an error such as VIEW_ERROR. The error names the problem, for example a syntax error with its line and column, or an exception in the first calculation. Nothing is shown in that case.

The agent is allowed to correct a rejected card once. If the corrected card is still rejected, or the host cannot display it, the agent should finish with a plain text answer and explain the limit. Errors that only appear after you change an input are not caught before display, so report them in the chat if a result looks wrong.

• Expect at most one automatic correction attempt.
• If you get a text answer instead of a card, the host may not support the tool or the request may fit a text reply better.
• Ask the agent to make a file or page only if you actually want code files.