Contact cards, built from one sentence

{"steps":[{"user":"Show the account's contacts on the Account page as cards with their title, email and phone."},{"ai":"This is a single Avonni Dynamic Component on the Account record page."},{"more":2},{"tool":{"src":"Skill","k":"avonni-dynamic-components"}},{"more":2},{"tool":{"src":"Avonni MCP","k":"list_components","arg":"dynamic"}},{"more":1},{"tool":{"src":"Avonni MCP","k":"get_component_docs","arg":"dcList"}},{"more":1},{"tool":{"src":"Salesforce CLI","k":"sf sobject list","arg":""}},{"tool":{"src":"Salesforce CLI","k":"sf sobject describe","arg":"Contact"}},{"ai":"Plan: Account Contacts cards. Does this look right, or would you like changes before I build it?","files":[]},{"user":"Looks good, go ahead."},{"ai":"Plan approved."},{"more":3},{"tool":{"src":"Skill script","k":"query-versions"}},{"tool":{"src":"Skill script","k":"create-component"}},{"more":1},{"tool":{"src":"Skill script","k":"create-component"}},{"ai":"Done: Account Contacts cards.","files":["avdynamic__AvonniDynamicComponent.Account_Contact_Cards_1.md-meta.xml"]}],"result":{"label":"Salesforce · Lakeshore Cold Chain","video":"https://cdn.prod.website-files.com/655e59288ce041f5fc52373b/6ab5442097e30bcb6f94684e_uc-ai-contact-cards-clip.mp4"}}

top

The scenario

Open Lakeshore Cold Chain and the contacts sit under the highlights panel, five cards, three across. Each card carries the initials, the name as a link to the contact, then title, email and phone. The count is in the header, and an account with no contacts says so instead of showing an empty grid.

How it was built

The prompt

Show the account's contacts on the Account page as cards with their title, email and phone.

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 Contact 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 and deployed nothing.

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

Set up the Agent Skills

The configuration

query on Contact with filter: AccountId = :accountId bound to {!$Component.RecordId}: only this account's people.
divider: card, largeContainerCols: 3, equalHeights: true: a grid of cards the same height.
itemsSObjectMapping.fields Title, Email and Phone, fieldAttributes.variant: label-stacked: each fact with its label above it.
avatar.initials from the name, linkify: true, noResultsMessage: a face, a link, 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.