home / skills / cklxx / elephant.ai / a2ui-templates
This skill helps you generate on-demand A2UI templates for flowcharts, forms, dashboards, and galleries to visualize structured data.
npx playbooks add skill cklxx/elephant.ai --skill a2ui-templatesReview the files below or copy the command above to add this skill to your agents.
---
name: a2ui_templates
description: On-demand A2UI templates for flowchart, form, dashboard, info cards, and gallery.
---
# A2UI Templates (Flowchart, Form, Dashboard, Cards, Gallery)
## When to use this skill
- The user asks for a visual UI, diagram, or layout (flowchart, form, dashboard, card grid, gallery, UI mock).
- The answer is a structured multi-entity summary that benefits from layout rather than long prose.
## Required inputs
- A short title for the UI.
- Structured data for the chosen template (steps, fields, metrics, cards, images).
## How to apply
1. Pick the closest template below.
2. Replace the data model values and labels.
3. Emit with `a2ui_emit` using the `messages` payload (keep args minimal).
## Template: Flowchart (linear steps)
```yaml
messages:
- surfaceUpdate:
surfaceId: main
components:
- id: root
component:
Column:
children:
- title
- stepsRow
- id: title
component:
Text:
text: { literalString: "Release Flow" }
usageHint: h2
- id: stepsRow
component:
Row:
alignment: center
children:
- step1Card
- arrow1
- step2Card
- arrow2
- step3Card
- id: step1Card
component:
Card:
child: step1Text
- id: step1Text
component:
Text:
text: { literalString: "Design" }
- id: arrow1
component:
Text:
text: { literalString: "->" }
- id: step2Card
component:
Card:
child: step2Text
- id: step2Text
component:
Text:
text: { literalString: "Build" }
- id: arrow2
component:
Text:
text: { literalString: "->" }
- id: step3Card
component:
Card:
child: step3Text
- id: step3Text
component:
Text:
text: { literalString: "Deploy" }
- beginRendering:
surfaceId: main
root: root
```
## Template: Form (fields + submit)
```yaml
messages:
- surfaceUpdate:
surfaceId: main
components:
- id: root
component:
Column:
children:
- title
- nameField
- emailField
- roleChoices
- agreeCheck
- submitButton
- id: title
component:
Text:
text: { literalString: "Onboarding Form" }
usageHint: h2
- id: nameField
component:
TextField:
label: { literalString: "Full name" }
text: { path: "form.name" }
- id: emailField
component:
TextField:
label: { literalString: "Email" }
text: { path: "form.email" }
- id: roleChoices
component:
MultipleChoice:
options:
- label: { literalString: "Engineer" }
value: engineer
- label: { literalString: "Designer" }
value: designer
selections: { path: "form.role" }
maxAllowedSelections: 1
- id: agreeCheck
component:
CheckBox:
label: { literalString: "I agree to the terms" }
value: { path: "form.accepted" }
- id: submitButton
component:
Button:
primary: true
child: submitLabel
action:
name: submit_form
- id: submitLabel
component:
Text:
text: { literalString: "Submit" }
- dataModelUpdate:
surfaceId: main
contents:
form:
name: ""
email: ""
role: engineer
accepted: false
- beginRendering:
surfaceId: main
root: root
```
## Template: Dashboard (metrics + recent list)
```yaml
messages:
- surfaceUpdate:
surfaceId: main
components:
- id: root
component:
Column:
children:
- title
- statsRow
- divider
- recentTitle
- recentList
- id: title
component:
Text:
text: { literalString: "Product Dashboard" }
usageHint: h2
- id: statsRow
component:
Row:
children:
- statCard1
- statCard2
- statCard3
- id: statCard1
component:
Card:
child: stat1Body
- id: stat1Body
component:
Column:
children:
- stat1Label
- stat1Value
- id: stat1Label
component:
Text:
text: { literalString: "Active users" }
usageHint: caption
- id: stat1Value
component:
Text:
text: { path: "dashboard.metrics.active_users" }
usageHint: h3
- id: statCard2
component:
Card:
child: stat2Body
- id: stat2Body
component:
Column:
children:
- stat2Label
- stat2Value
- id: stat2Label
component:
Text:
text: { literalString: "Conversion" }
usageHint: caption
- id: stat2Value
component:
Text:
text: { path: "dashboard.metrics.conversion" }
usageHint: h3
- id: statCard3
component:
Card:
child: stat3Body
- id: stat3Body
component:
Column:
children:
- stat3Label
- stat3Value
- id: stat3Label
component:
Text:
text: { literalString: "Revenue" }
usageHint: caption
- id: stat3Value
component:
Text:
text: { path: "dashboard.metrics.revenue" }
usageHint: h3
- id: divider
component:
Divider: {}
- id: recentTitle
component:
Text:
text: { literalString: "Recent activity" }
usageHint: h4
- id: recentList
component:
List:
children:
template:
componentId: recentItem
dataBinding:
path: "dashboard.recent"
- id: recentItem
component:
Card:
child: recentItemBody
- id: recentItemBody
component:
Column:
children:
- recentItemTitle
- recentItemCaption
- id: recentItemTitle
component:
Text:
text: { path: "title" }
- id: recentItemCaption
component:
Text:
text: { path: "meta" }
usageHint: caption
- dataModelUpdate:
surfaceId: main
contents:
dashboard:
metrics:
active_users: 12450
conversion: "3.8%"
revenue: "$128k"
recent:
- title: "Trial signup"
meta: "+120 in last 24h"
- title: "Churn risk"
meta: "3 accounts flagged"
- beginRendering:
surfaceId: main
root: root
```
## Template: Info cards (list)
```yaml
messages:
- surfaceUpdate:
surfaceId: main
components:
- id: root
component:
Column:
children:
- title
- cardsList
- id: title
component:
Text:
text: { literalString: "Summary Cards" }
usageHint: h2
- id: cardsList
component:
List:
children:
template:
componentId: infoCard
dataBinding:
path: "cards"
- id: infoCard
component:
Card:
child: infoCardBody
- id: infoCardBody
component:
Column:
children:
- infoTitle
- infoSubtitle
- infoBody
- id: infoTitle
component:
Text:
text: { path: "title" }
usageHint: h4
- id: infoSubtitle
component:
Text:
text: { path: "subtitle" }
usageHint: caption
- id: infoBody
component:
Text:
text: { path: "body" }
- dataModelUpdate:
surfaceId: main
contents:
cards:
- title: "Latency"
subtitle: "p95"
body: "210 ms"
- title: "Error rate"
subtitle: "last 7 days"
body: "0.12%"
- beginRendering:
surfaceId: main
root: root
```
## Template: Gallery (images + captions)
```yaml
messages:
- surfaceUpdate:
surfaceId: main
components:
- id: root
component:
Column:
children:
- title
- galleryList
- id: title
component:
Text:
text: { literalString: "Design Gallery" }
usageHint: h2
- id: galleryList
component:
List:
direction: horizontal
children:
template:
componentId: galleryItem
dataBinding:
path: "gallery.items"
- id: galleryItem
component:
Card:
child: galleryItemBody
- id: galleryItemBody
component:
Column:
children:
- galleryImage
- galleryCaption
- id: galleryImage
component:
Image:
url: { path: "url" }
usageHint: medium
fit: cover
- id: galleryCaption
component:
Text:
text: { path: "caption" }
usageHint: caption
- dataModelUpdate:
surfaceId: main
contents:
gallery:
items:
- url: "https://example.com/image-1.jpg"
caption: "Homepage hero"
- url: "https://example.com/image-2.jpg"
caption: "Pricing layout"
- beginRendering:
surfaceId: main
root: root
```
This skill provides on-demand A2UI templates for common UI layouts: flowchart, form, dashboard, info cards, and gallery. It emits ready-to-render message payloads that plug into the A2UI runtime so you can generate interactive surfaces quickly. Use minimal structured inputs (title and data model) to produce a complete UI surface.
Choose the template that matches your need, supply a short title and the structured data model (steps, fields, metrics, cards, or images). The skill fills a predefined component tree and emits an a2ui_emit-compatible messages payload containing surfaceUpdate, optional dataModelUpdate, and beginRendering items. The result is a renderable A2UI surface that the runtime can display or update dynamically.
What inputs are required to generate a template?
A short title and a structured data model matching the chosen template (e.g., steps for flowchart, form fields, dashboard.metrics, cards array, or gallery.items).
Can I customize component labels or add actions?
Yes. Replace literal strings and paths in the template with your labels and include action names (like submit_form). Keep changes focused to preserve the component tree shape.