Using the AI Assistant

Describe what you want in plain language, and the avonni-lwc-components skill activates and looks up the real component API through the MCP server.

🚧 Early access. Build with AI is rolling out gradually and improving with every release. Something unclear, missing, or broken? Tell us: your feedback directly shapes what we improve next.

You don't invoke skills or MCP tools yourself. Describe the outcome in plain language while working in your LWC, and the avonni-lwc-components skill activates and looks up the real component API through the MCP server.

The right skill activates for you

You're working on…	Skill that activates
Avonni components in LWC code (HTML/JS/CSS)	avonni-lwc-components
Avonni Flow Screen Components in a screen flow	avonni-flow-components
An Avonni Dynamic Component	avonni-dynamic-components
Avonni components on a Digital Experience site page	avonni-experience-components
A use case spanning flows, Dynamic Components, or Experience pages	avonni-architect

One difference from the other packages: avonni-lwc-components is a direct workflow. You invoke it on your own code, and it is not coordinated by avonni-architect. Mention avonni-* components or reference one in your markup, and it activates.

Prompt ideas

Copy any of these, adapt the objects and components to your project, and send.

🆕 Compose UI

Add an Avonni Data Table of Cases to my component, with sorting, inline editing, and a search bar.

Add an Avatar Group showing the account team members to my header.

Build the KPI row with an Avonni Metric per value, laid out with the Layout component.

What happens: the skill looks up each component's real attributes, events, and slots through the MCP server, then writes the avonni-* markup in your HTML template and the supporting code in your JavaScript.

⚡ Wire events

Handle the Data Table's row action event and navigate to the record.

When the Combobox selection changes, filter the List below it.

What happens: the skill checks the real event names and payloads, then writes the handlers in your JavaScript.

🎨 Style with hooks

Restyle the Card to match our brand: rounded corners and a light gray header.

Apply our primary color to the Badge using its styling hooks.

What happens: the skill fetches the component's styling hooks through the MCP server and writes them into your CSS file, instead of guessing class names.

🧬 Types and utilities

Show me the type definition for the Data Table columns attribute, and generate a valid columns array for Case records.

What utility functions ship with the library, and what do they do?

What happens: the skill uses the lwc toolset's exclusive tools (type definitions and utility function documentation) to produce code that matches the exact expected shapes.

What to expect

A typical session runs in three steps:

1

Lookup

The assistant queries the MCP server for the components involved, with their attributes, events, slots, styling hooks, and types.

2

Plan

It proposes an approach and may ask clarifying questions about your data and the behavior you want.

3

Generate

It edits your component's HTML, JavaScript, and CSS. Review the diff, then deploy with your usual process.

Nothing is deployed to your org: the skill edits local files and stops there. See Limitations & FAQ.