Skip to content

Generated UI Calculator

Shows interactive calculators, simulators and comparisons inside the chat so you can adjust inputs and see results.

Stars
28,880
Licence
Apache-2.0
Files
1 file

What it does

When you want to explore a question by changing numbers, such as splitting a bill, comparing plans or testing what-if scenarios, the agent builds a small interactive card directly in the conversation with sliders, inputs and live results. It prefers this over writing a separate HTML file unless you ask for a file or project code. The card runs local calculations only and cannot fetch data or take actions for you.

Great for

  • People comparing options with adjustable assumptions, such as subscription plans or loan terms
  • Anyone who wants to test what-if numbers without leaving the chat
  • Developers prototyping a quick calculator or simulator inside a conversation

Skip it if

  • Simple facts or one-off answers, where a text reply is faster and clearer (the skill itself says to answer with text).
  • Questions needing live data or network access, since the card cannot fetch anything and results may be stale or wrong.
  • Projects needing real web pages or code files, which the skill explicitly hands off to normal file writing.

Try asking

  • “Let me adjust the tip percentage and number of people to see how much each person pays for this dinner.”
  • “Compare these three phone plans with sliders for data usage and months so I can see which is cheapest.”
  • “Build a what-if simulator for my savings: vary monthly contribution and interest rate and show the balance.”
Step-by-step guide: how to use Generated UI CalculatorInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 1 original files, the Apache-2.0 licence and an attribution note.

    generated-ui.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip generated-ui.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip generated-ui.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give concrete starting numbers and units so the initial summary and calculation are meaningful.
  • Ask for assumptions to be labelled, and check any illustrative data the card uses before relying on it.
  • Use the Continue analysis button in the host app to send your applied parameters back to the chat for follow-up.

What's inside

  • SKILL.md

Redistributed unmodified from QwenLM/qwen-code under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.