json-render

name	json-render
description	Generate rich interactive UI specs that render as React components in the chat interface. Use when the user asks for charts, tables, dashboards, metrics, comparisons, timelines, or any structured data visualization. Output a ```spec block after your text response.
metadata	{"agent-player":{"emoji":"🎨","version":"1.0.0","author":"Agent Player Team","category":"utilities","tags":["ui","charts","dashboard","visualization","components","spec"],"triggers":["chart","table","dashboard","graph","metrics","visualization","show data","spec","ui components"],"settings":[],"requires":{"llm":true}}}

json-render Skill

Generate rich interactive UI specs rendered as React components in the chat.

How to Use

After your text response, output a ```spec block with JSON Patch lines.

Format

{"op":"add","path":"/root","value":"ROOT_ID"}
{"op":"add","path":"/elements/ROOT_ID","value":{"type":"COMPONENT","props":{...},"children":["CHILD_ID"]}}
{"op":"add","path":"/elements/CHILD_ID","value":{"type":"COMPONENT","props":{...},"children":[]}}

Quick Component Reference

Layout: Card {title?, description?} | Stack {gap:"sm|md|lg", direction:"vertical|horizontal"} | Grid {columns:2|3|4, gap}

Text: Heading {text, level:"h1|h2|h3|h4"} | Text {content, muted:bool} | Badge {text, variant:"default|secondary|success|warning|destructive"}

Data: Metric {label, value, detail?, trend:"up|down|neutral"} | Table {data:[{...}], columns:[{key,label}]} | Callout {type:"info|tip|warning|important", title, content}

Rich: Timeline {items:[{title,description?,date?,status:"completed|current|upcoming"}]} | Accordion {items:[{title,content}]}

Charts: BarChart {title?, data:[{...}], xKey, yKey} | LineChart {title?, data:[{...}], xKey, yKey} | PieChart {title?, data:[{...}], nameKey, valueKey}

Interactive: Tabs {tabs:[{value,label}]} + TabContent {value} | Button {label, variant} | Link {text, href}

See components.md for full props and examples.

Example — 4 Metrics Grid

{"op":"add","path":"/root","value":"g"}
{"op":"add","path":"/elements/g","value":{"type":"Grid","props":{"columns":4,"gap":"md"},"children":["c1","c2","c3","c4"]}}
{"op":"add","path":"/elements/c1","value":{"type":"Card","props":{"title":"Revenue"},"children":["m1"]}}
{"op":"add","path":"/elements/m1","value":{"type":"Metric","props":{"label":"Total","value":"$42K","trend":"up"},"children":[]}}
{"op":"add","path":"/elements/c2","value":{"type":"Card","props":{"title":"Users"},"children":["m2"]}}
{"op":"add","path":"/elements/m2","value":{"type":"Metric","props":{"label":"Active","value":"1,234","trend":"up"},"children":[]}}
{"op":"add","path":"/elements/c3","value":{"type":"Card","props":{"title":"Tasks"},"children":["m3"]}}
{"op":"add","path":"/elements/m3","value":{"type":"Metric","props":{"label":"Done","value":"89%","trend":"neutral"},"children":[]}}
{"op":"add","path":"/elements/c4","value":{"type":"Card","props":{"title":"Errors"},"children":["m4"]}}
{"op":"add","path":"/elements/m4","value":{"type":"Metric","props":{"label":"Today","value":"3","trend":"down"},"children":[]}}