a2ui-templates_skill

Overview

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.

How this skill works

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.

When to use it

• You need a visual representation for a multi-entity summary (flow, checklist, or process).
• You want a compact interactive form for onboarding, feedback, or quick data capture.
• You need a lightweight operations dashboard with key metrics and recent activity.
• You want a grid of info cards for KPIs, status, or summaries.
• You need a horizontal gallery to preview images with captions.

Best practices

• Pick the closest template and avoid mixing unrelated templates in one payload to keep surfaces simple.
• Provide concise labels and short strings for titles, captions, and metric values to ensure visual clarity.
• Supply structured arrays (steps, cards, recent, gallery.items) rather than free text to enable list templates and data binding.
• Initialize sensible default values in the data model so the UI renders even when data is partially missing.
• Keep action names and bindings minimal (e.g., submit_form) and handle side effects in your runtime/backend.

Example use cases

• Release flowchart: map design → build → deploy steps for a runbook or handoff note.
• Onboarding form: collect name, email, role, and acceptance and wire a submit action to your API.
• Product dashboard: show active users, conversion, revenue and a recent activity feed for ops checks.
• Summary cards: display latency, error rate, capacity or any short KPI set for a team status view.
• Design gallery: horizontal card gallery with images and captions for quick visual review or feedback.