Appointment date, built from one sentence

{"steps":[{"user":"Create a screen flow where the user picks an appointment date on an Avonni Date Picker, then confirms on a summary screen."},{"ai":"I'll use the Avonni flow components skill for this."},{"tool":{"src":"Skill","k":"avonni-flow-components"}},{"more":3},{"tool":{"src":"Avonni MCP","k":"list_components","arg":"flow"}},{"tool":{"src":"Avonni MCP","k":"get_component_docs","arg":"calendar"}},{"tool":{"src":"Avonni MCP","k":"get_component_docs","arg":"formattedValue"}},{"tool":{"src":"Avonni MCP","k":"get_component_docs","arg":"scopedNotification"}},{"tool":{"src":"Avonni MCP","k":"list_interactions","arg":"flow"}},{"ai":"Plan: Screen flow \"Appointment Booking\". Does this look right?","files":[]},{"user":"Looks good, go ahead."},{"ai":"Now I'll add the second screen and the 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":"Validation passes: 4 Avonni fields, no errors.","files":["Appointment_Booking.flow-meta.xml"]}],"result":{"label":"Salesforce · Appointment Booking flow","video":"https://cdn.prod.website-files.com/655e59288ce041f5fc52373b/6ab5441f0bc0a2b5dcd0f03f_uc-ai-appointment-flow-clip.mp4"}}

top

The scenario

Screen one opens on a banner, Choose your appointment date, and a calendar of the current month with today marked. The user taps a day and presses Next. Screen two repeats the choice in full, Tuesday, September 29, 2026, with Previous to change it and Finish to confirm.

How it was built

The prompt

Create a screen flow where the user picks an appointment date on an Avonni Date Picker, then confirms 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 calendar, formattedValue and scopedNotification 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 (4 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

calendar with selectionMode: single: one day, one appointment.
scopedNotification with title and iconName: utility:events: the instruction sits above the calendar, not in a help text.
formattedValue with type: date and typeAttributes weekday, month, day and year all long: the summary reads the date back as a sentence.
valueDate: appointmentDatePicker.value: screen two shows what screen one picked, 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.