Prompt Library

Copy-paste prompts for building with avonni-* components in your LWC code, organized by goal.

🚧 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.

Every prompt on this page is ready to paste into Claude Code, Cursor, or GitHub Copilot once your assistant is set up. Copy one, swap in your own objects and components, and send. The assistant verifies every attribute, event, and type against the MCP server before writing code, so you can be ambitious.

How to adapt a prompt: replace the objects (Case, Account, Opportunity) and components with yours, and describe the outcome you want. You don't need to name attributes: the assistant looks up the real API and uses it.

Data-driven views

Point a component at a query and let it do the rendering.

Add an Avonni Data Table of open Cases to my component in query mode, with sorting, inline editing, and pagination.

Add a Kanban of Opportunities grouped by stage, with drag and drop between columns.

Add a Timeline of the record's Tasks and Events, newest first.

Add a Map of my Accounts as markers with the list view below the map.

Building blocks

Core components for the rest of the interface.

Build my component's header with an Avonni Header, an Avatar Group of the account team, and an action button.

Add a Visual Picker so the user chooses a plan, and store the selection.

Add a Signature Pad and save the signature when the user confirms.

Replace my custom progress display with an Avonni Progress Indicator driven by the current step.

Events and behavior

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

When the Combobox selection changes, refresh the List below it with the selected account's contacts.

Open the record page when the user clicks a Kanban card.

Styling hooks

Restyle the Card to match our brand: rounded corners, light gray header, and our primary color on actions.

Make the Data Table denser and align the amount column to the right.

Types and utilities

Knowledge exclusive to this library's toolset.

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 how do I use them in my component?

---

Make these prompts yours

• Name real objects and fields. "A Data Table of Invoice__c records filtered on Status__c = 'Overdue'" beats "a table of invoices".
• Iterate in the same conversation. Follow up with "make the columns sortable" or "add a search bar": the assistant updates the same files.
• Ask for the type first when an attribute is complex. "Show me the type definition for X" before "generate X" produces the cleanest code.

Not set up yet? The whole thing takes a few minutes: Setup.