json-render-templates_skill

Overview

This skill provides a set of JSON-render protocol templates for common visual layouts: flowchart, form, dashboard, info cards, gallery, table, kanban, and diagram. It lets you produce UI-ready JSON payloads that can be emitted to a renderer or UI pipeline to produce consistent visual outputs. Use it to convert structured answers into visual components instead of long prose.

How this skill works

Choose the template that best matches the layout you need and replace the sample values with your data. Serialize the resulting payload to JSON and emit it with the platform's emit function (for example, via a2ui_emit using the content string). The templates are intentionally minimal so they can be extended or combined in your runtime before rendering.

When to use it

• When the user requests a visual representation (flowchart, diagram, gallery, or cards).
• When a multi-entity summary benefits from layout instead of paragraph text.
• When you need to return a form skeleton for onboarding or data capture.
• When you want to present metrics and items in a dashboard view.
• When you need a quick UI mock or proof-of-concept payload for the frontend.

Best practices

• Pick the closest template and only change the data values; keep structural keys intact.
• Keep labels and ids concise to avoid rendering truncation in compact UIs.
• Use consistent id and label naming for nodes and edges to make maps and diagrams readable.
• Prefer numeric types for metric values and strings for captions to preserve formatting.
• Emit the payload as a single JSON string via the platform emit function so viewers receive a complete message.

Example use cases

• Build a release flowchart: map design → build → deploy nodes and edges for deployment docs.
• Return an onboarding form payload when requesting new-user data collection fields.
• Produce a product dashboard payload with active users, conversion, and revenue metrics.
• Send info cards to summarize health checks like latency and error rate for a monitoring UI.
• Generate a gallery payload to preview visual design mockups or marketing assets.