Agent Skills: Build Salesforce UI with AI

Claude ⌄Avonni MCP server connected

Add a Kanban of open Cases to the Account page, grouped by Status.

✦

I'll check the real Avonni catalog before building anything.

Avonni MCPlist_componentsdynamic✓

Avonni MCPget_component_docsdcKanban✓

Skillavonni-dynamic-components✓

✦

Done. A Kanban of open Cases in four columns, drag and drop updates the status.

Account_Cases_Kanban.jsonforce-app/main/default/avonni

Nothing has been deployed. Review the file, then deploy it or open it in the Component Builder.

Reply to Claude…

2 "component": {

3 "name": "dcKanban",

4 "title": "Open Cases",

5 "groupFieldName": "{{Record.Status}}",

6 "cardAttributes": {

7 "title": "{{Record.Subject}}",

8 "dueDate": "{{Record.CreatedDate}}"

9 }

10 },

11 "query": { "objectApiName": "Case", "filter": "IsClosed = false" }

12}

2 "component": {

3 "name": "dcKanban",

4 "title": "Open Cases",

5 "groupFieldName": "{{Record.Status}}",

6 "cardAttributes": {

7 "title": "{{Record.Subject}}",

8 "dueDate": "{{Record.CreatedDate}}"

9 }

10 },

11 "query": { "objectApiName": "Case", "filter": "IsClosed = false" }

12}

2 "component": {

3 "name": "dcKanban",

4 "title": "Open Cases",

5 "groupFieldName": "{{Record.Status}}",

6 "cardAttributes": {

7 "title": "{{Record.Subject}}",

8 "dueDate": "{{Record.CreatedDate}}"

9 }

10 },

11 "query": { "objectApiName": "Case", "filter": "IsClosed = false" }

12}

Real components, not a guess at them

✓

It builds from the real Avonni catalog

Before it writes anything, your assistant checks which Avonni components exist and how they are configured. No made-up settings, no components that only look right.

✓

Interactions and branding included

Open a flow, navigate to a record, show a toast: the same interactions you pick in the builder are available to your AI, and so are your colors and styles.

✓

You can open and tweak what it builds

What your AI produces is a normal Avonni component. Open it in the Component Builder, adjust the columns or the colors, and save. No developer needed.

Set up once, in about 10 minutes

Pick your assistant

Claude desktop app if you are not a developer. Cursor, VS Code or Copilot if you already use them.

Connect Avonni

One setup command installs the five skills and connects the hosted server. In Claude, paste it in the chat and Claude runs it for you.

Describe what you want

Review the result, then deploy it your usual way. Nothing reaches your org without you.

“Add an Avonni Kanban of Cases grouped by status to my customer portal page.”

You need Node.js and the Salesforce CLI connected to your org. The guide walks you through both. Full setup guide →

Questions, answered

Describe what you need. Your AI builds it with real components.

Works in the AI tools your team already uses

Claude desktop app

Claude Code

Cursor

EXPLORER

Agent ⌘I

GitHub Copilot and VS Code

EXPLORER

GitHub Copilot

Agentforce Vibes

Agentforce VibesAgent

Gemini CLI

Real components, not a guess at them

It builds from the real Avonni catalog

Interactions and branding included

You can open and tweak what it builds

Every place you build, covered

Lightning pages

Screen flows

Experience sites

Your developers’ code

Set up once, in about 10 minutes

Pick your assistant

Connect Avonni

Describe what you want

Ready to build with your AI?

Questions, answered