> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/lwc-components/build-with-ai/prompt-library.md). # Prompt Library {% hint style="warning" %} 🚧 **Early access.** Build with AI is rolling out gradually and improving with every release. Something unclear, missing, or broken? [Tell us](/dynamic-components/resources/contact-support.md): your feedback directly shapes what we improve next. {% endhint %} 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. {% hint style="info" %} **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. {% endhint %} ## 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. {% hint style="success" %} Not set up yet? The whole thing takes a few minutes: Setup. {% endhint %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/lwc-components/build-with-ai/prompt-library.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.