home / skills / cklxx / elephant.ai / json-render-templates

json-render-templates skill

safe

This skill helps you generate UI templates like flowcharts, forms, dashboards, and galleries as ready-to-emit JSON payloads for rapid visualization.

npx playbooks add skill cklxx/elephant.ai --skill json-render-templates

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

3.5 KB

---
name: json-render-templates
description: Json-render protocol templates for flowchart, form, dashboard, info cards, and gallery.
---

# Json-Render 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.

## How to apply
1. Pick the closest template below.
2. Replace the data values.
3. Serialize the payload to JSON and emit via `a2ui_emit` using `content` (string).

## Template: Flowchart (message bundle)
```yaml
payload:
  type: ui
  version: "1.0"
  messages:
    - type: heading
      text: "Release Flow"
    - type: flow
      direction: horizontal
      nodes:
        - id: design
          label: "Design"
        - id: build
          label: "Build"
        - id: deploy
          label: "Deploy"
      edges:
        - from: design
          to: build
          label: ""
        - from: build
          to: deploy
          label: ""
```

## Template: Form
```yaml
payload:
  root:
    type: form
    props:
      title: "Onboarding Form"
      fields:
        - label: "Full name"
          type: input
          value: ""
        - label: "Email"
          type: input
          value: ""
        - label: "Role"
          type: input
          value: "Engineer"
        - label: "Notes"
          type: textarea
          value: ""
```

## Template: Dashboard
```yaml
payload:
  root:
    type: dashboard
    props:
      title: "Product Dashboard"
      metrics:
        - label: "Active users"
          value: 12450
        - label: "Conversion"
          value: "3.8%"
        - label: "Revenue"
          value: "$128k"
      items:
        - title: "Trial signup"
          meta: "+120 in last 24h"
        - title: "Churn risk"
          meta: "3 accounts flagged"
```

## Template: Info cards
```yaml
payload:
  root:
    type: cards
    props:
      items:
        - title: "Latency"
          subtitle: "p95"
          body: "210 ms"
        - title: "Error rate"
          subtitle: "last 7 days"
          body: "0.12%"
```

## Template: Gallery
```yaml
payload:
  root:
    type: gallery
    props:
      items:
        - url: "https://example.com/image-1.jpg"
          caption: "Homepage hero"
        - url: "https://example.com/image-2.jpg"
          caption: "Pricing layout"
```

## Template: Table
```yaml
payload:
  root:
    type: table
    props:
      headers: ["Service", "Latency(ms)", "Errors"]
      rows:
        - ["api-gateway", 120, "0.2%"]
        - ["recommendation", 180, "0.4%"]
```

## Template: Kanban
```yaml
payload:
  root:
    type: kanban
    props:
      columns:
        - title: "Todo"
          items:
            - title: "Collect requirements"
              meta: "Owner: PM"
        - title: "In Progress"
          items:
            - title: "Implement renderer"
              subtitle: "json-render"
        - title: "Done"
          items:
            - title: "Define templates"
              meta: "v1"
```

## Template: Diagram (nodes + edges)
```yaml
payload:
  root:
    type: diagram
    props:
      nodes:
        - id: service-a
          label: "Service A"
        - id: service-b
          label: "Service B"
        - id: service-c
          label: "Service C"
      edges:
        - from: service-a
          to: service-b
          label: "calls"
        - from: service-b
          to: service-c
          label: "writes"
```

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.

FAQ

Can I combine templates in one payload?

Yes — you can include multiple message blocks (e.g., heading plus flow) in a single payload as long as the renderer supports message bundles.

What format should metric values use?

Use numeric types for raw metrics and formatted strings (with % or $) for display-ready values so frontends can apply correct formatting if needed.

How do I emit the JSON to the UI?

Serialize the payload to a JSON string and send it using the platform emit method (for example, a2ui_emit with content set to the JSON string).