Menü
On-demand A2UI templates for flowchart, form, dashboard, info cards, and gallery.
| name | a2ui_templates |
| description | On-demand A2UI templates for flowchart, form, dashboard, info cards, and gallery. |
a2ui_emit using the messages payload (keep args minimal).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
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
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
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
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
Guidelines for applying Disney's 12 principles of animation to web interfaces. Use when implementing motion, reviewing animation quality, or designing micro-interactions. Triggers on tasks involving CSS animations, transitions, motion libraries, or UX feedback.
Plan, validate, and use 1Password CLI setup for secret injection and auth. Use when tasks need 1Password CLI usage, secret references, op run/read/inject, or provisioning secrets via env vars/.env files and scripts.
Apply 37signals/DHH Rails conventions when writing Ruby on Rails code. Use when building Rails applications, reviewing Rails code, or making architectural decisions. Covers various aspects of Rails application architecture, design and dependencies.
Implement 3D elements and effects using Three.js and React Three Fiber
Expert 4PL and supply chain guidance for logistics operations. Use when discussing supply chain strategy, warehouse management, transportation planning, inventory optimization, 3PL partner management, logistics KPIs, or business strategy for logistics companies. Tailored for the eddication.io platform including DriverConnect driver tracking, job dispatch, and CRM operations.
Apply timeless programming wisdom from "97 Things Every Programmer Should Know" when writing, reviewing, or refactoring code. Use for design decisions, code quality checks, professional development guidance, testing strategies, and workflow optimization.