Budget slider, built from one sentence

{"steps":[{"user":"Create a screen flow where the user sets a project budget with an Avonni Slider, then sees the amount on a summary screen."},{"ai":"I'll use the Avonni flow components skill for this."},{"tool":{"src":"Skill","k":"avonni-flow-components"}},{"more":2},{"tool":{"src":"Avonni MCP","k":"list_components","arg":"flow"}},{"more":1},{"tool":{"src":"Avonni MCP","k":"get_component_docs","arg":"slider"}},{"tool":{"src":"Avonni MCP","k":"get_component_docs","arg":"metric"}},{"ai":"Both components confirmed via MCP. Does this look right, or would you like changes (different range/step, a different currency, extra detail on the summary screen)?","files":[]},{"user":"Looks good, go ahead."},{"ai":"Now I'll add the second screen and the two Avonni component fields."},{"tool":{"src":"Skill script","k":"create-flow"}},{"more":2},{"tool":{"src":"Skill script","k":"create-flow"}},{"more":2},{"tool":{"src":"Skill script","k":"fix-flow"}},{"ai":"Done: force-app/main/default/flows/Project_Budget.flow-meta.xml.","files":["Project_Budget.flow-meta.xml"]}],"result":{"label":"Salesforce · Project Budget flow","video":"https://cdn.prod.website-files.com/655e59288ce041f5fc52373b/6ab5600557a7d8a9dfb7130b_uc-ai-project-budget-clip.mp4"}}

top

The scenario

Screen one is a single slider, Project Budget, from US$0 to US$500,000. The user drags it or nudges it with the arrow keys in steps of 5,000, and a pin above the handle shows the amount as it moves. Next, and screen two shows the budget as a large figure, US$280,000, with Previous to change it.

How it was built

The prompt

Create a screen flow where the user sets a project budget with an Avonni Slider, then sees the amount on a summary screen.

1. Claude Code with the Avonni Agent Skills and the Avonni MCP server, in an empty folder set up with the public guide. It chose the Flow Screen Components skill on its own.

2. It looked up slider and metric in the Avonni catalog, then showed its plan and waited:

Looks good, go ahead.

3. It wrote the flow, checked it with the skill's validation script (2 Avonni fields, no errors) and deployed nothing.

4. We deployed the file unchanged and activated the flow. The clip above is that flow, used in the org.

Set up the Agent Skills

The configuration

slider with max: 500000 and step: 5000: round amounts, no typing.
unit: currency with unitAttributes USD, symbol, no decimals, and showPin: true: the amount reads as money while the handle moves.
metric with formatStyle: currency and a description: the summary is one big number with a line of context.
value: budgetSlider.value: screen two shows what screen one set, no variable to create.

Step by step

The settings above are the ones that matter. The tutorial has the whole build: the objects and sample data behind the screen, every step in order, and what to check once it runs.

Open the tutorial

Runs on

Flow Screen Components Dynamic Components Experience Site Components LWC Components

Build it in your org.