Case list, built from one sentence

{"steps":[{"user":"Show this account's cases on the Account page as a list with the subject, status and priority, newest first."},{"ai":"I'll start by exploring the project to understand what we're working with."},{"more":2},{"tool":{"src":"Skill","k":"avonni-dynamic-components"}},{"more":3},{"tool":{"src":"Avonni MCP","k":"list_components","arg":"dynamic"}},{"tool":{"src":"Avonni MCP","k":"get_component_docs","arg":"dcList"}},{"more":1},{"tool":{"src":"Salesforce CLI","k":"sf sobject list","arg":"","n":2}},{"tool":{"src":"Salesforce CLI","k":"sf sobject describe","arg":"Case"}},{"more":1},{"ai":"Plan: \"Account Cases\" Dynamic Component. Does this look right?","files":[]},{"user":"Looks good, go ahead."},{"ai":"Plan confirmed."},{"more":2},{"tool":{"src":"Skill script","k":"query-versions"}},{"tool":{"src":"Skill script","k":"create-component"}},{"more":1},{"tool":{"src":"Skill script","k":"create-component"}},{"more":1},{"ai":"Done: validation passed and the component was saved.","files":["avdynamic__AvonniDynamicComponent.Account_Cases_1.md-meta.xml"]}],"result":{"label":"Salesforce · Lakeshore Cold Chain","video":"https://cdn.prod.website-files.com/655e59288ce041f5fc52373b/6ab560057a0645c8d51662d0_uc-ai-case-list-clip.mp4"}}

top

The scenario

Open Lakeshore Cold Chain and the support history reads top down: the newest case first, its subject as a link, then status and priority side by side. Whether a case is escalated, and how urgent it is, reads without opening it. The list shows ten cases at a time, and the header says 10+ when the account has more.

How it was built

The prompt

Show this account's cases on the Account page as a list with the subject, status and priority, newest first.

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 Dynamic Components skill on its own.

2. It looked up dcList in the Avonni catalog, read the Case fields in the org, then showed its plan and waited:

Looks good, go ahead.

3. It wrote the component with the skill's save script, which validated it, and deployed nothing.

4. We deployed the file unchanged, activated it in the Component Builder and dropped it on the Account page. The twelve cases are sample data we added to the account.

Set up the Agent Skills

The configuration

query on Case with filter: AccountId = :accountId bound to {!$Component.RecordId}, orderBy: CreatedDate DESC: this account only, newest first.
itemsSObjectMapping.label {{Record.Subject}} with linkify: true: the subject is the title and opens the case.
fields Status and Priority, fieldAttributes.smallContainerCols: 2: two facts side by side on a wide page, stacked on a narrow one.
showNbItems, nbItemsPerPage: 10, divider: top, noResultsMessage: a count, ten at a time, and an honest empty state.

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.