Agent skill

json-render-ui

View SKILL.md on GitHub Repository
Stars 113
Forks 4

Install this agent skill to your Project

npx add-skill https://github.com/oaustegard/claude-skills/tree/main/json-render-ui

SKILL.md

JSON Render UI

Overview

Transform natural language UI requests into working dashboards and applications. Claude acts as the translation layer (prompt → JSON), the skill provides the rendering runtime (JSON → UI).

Architecture:

User prompt → Claude (constrained by catalog) → UITree JSON → Preact renderer → UI

Output Format

Claude emits a UITree structure:

json
{
  "root": "main",
  "elements": {
    "main": {
      "key": "main",
      "type": "Grid",
      "props": { "columns": 2, "gap": "md" },
      "children": ["metric1", "metric2"]
    },
    "metric1": {
      "key": "metric1",
      "type": "Metric",
      "props": {
        "label": "Revenue",
        "valuePath": "/revenue",
        "format": "currency"
      }
    },
    "metric2": {
      "key": "metric2",
      "type": "Metric",
      "props": {
        "label": "Growth",
        "valuePath": "/growth",
        "format": "percent"
      }
    }
  },
  "data": {
    "revenue": 125000,
    "growth": 0.15
  }
}

Component Catalog

Claude can ONLY use these components. This is the guardrail.

Layout Components

Component Props Children Description
Card title?, description?, padding?: sm|md|lg Yes Container with optional header
Grid columns?: 1-4, gap?: sm|md|lg Yes CSS grid layout
Stack direction?: horizontal|vertical, gap?: sm|md|lg, align?: start|center|end|stretch Yes Flexbox stack

Data Display

Component Props Children Description
Metric label, valuePath, format?: number|currency|percent, trend?: up|down|neutral, trendValue? No Single KPI display
Chart type: bar|line|pie|area, dataPath, title?, height? No Data visualization
Table dataPath, columns: [{key, label, format?: text|currency|date|badge}] No Tabular data
List dataPath, emptyMessage? Yes Rendered list from array

Interactive

Component Props Children Description
Button label, action, variant?: primary|secondary|danger|ghost, size?: sm|md|lg, disabled? No Clickable action
Select label?, bindPath, options: [{value, label}], placeholder? No Dropdown select
DatePicker label?, bindPath, placeholder? No Date input

Typography

Component Props Children Description
Heading text, level?: h1|h2|h3|h4 No Section heading
Text content, variant?: body|caption|label, color?: default|muted|success|warning|danger No Text paragraph

Status

Component Props Children Description
Badge text, variant?: default|success|warning|danger|info No Status indicator
Alert type: info|success|warning|error, title, message?, dismissible? No Notification banner

Special

Component Props Children Description
Divider label? No Visual separator
Empty title, description?, action?, actionLabel? No Empty state

Data Binding

Props ending in Path (e.g., valuePath, dataPath, bindPath) reference the data model using JSON Pointer syntax:

  • /revenue → data.revenue
  • /users/0/name → data.users[0].name
  • /filters/dateRange → data.filters.dateRange

Visibility Conditions

Any element can have a visible property:

json
{
  "type": "Alert",
  "props": { "type": "error", "title": "Error" },
  "visible": { "path": "/hasError" }
}

Visibility expressions:

  • true / false — Static
  • { "path": "/some/path" } — Truthy check
  • { "and": [...] } — All conditions true
  • { "or": [...] } — Any condition true
  • { "not": {...} } — Negation
  • { "eq": [a, b] } — Equality

Generating Output

Step 1: Emit UITree JSON

Analyze the user's request and emit a UITree structure. Include sample data that matches the schema.

Step 2: Create Artifact

Create an HTML artifact that:

  1. Embeds the UITree JSON
  2. Imports the renderer from assets/renderer.js (inline it)
  3. Renders the UI

Use the template in assets/template.html.

Constraints

DO:

  • Use only catalog components
  • Provide realistic sample data
  • Use semantic component choices (Metric for KPIs, Table for tabular data)
  • Keep trees flat (no deep nesting beyond 3 levels)

DO NOT:

  • Invent new component types
  • Use arbitrary HTML/CSS
  • Omit required props
  • Create deeply nested structures

Example

User: "Create a sales dashboard with revenue, orders, and a chart showing monthly trends"

Claude outputs:

json
{
  "root": "dashboard",
  "elements": {
    "dashboard": {
      "key": "dashboard",
      "type": "Stack",
      "props": { "direction": "vertical", "gap": "lg" },
      "children": ["header", "metrics", "chartCard"]
    },
    "header": {
      "key": "header",
      "type": "Heading",
      "props": { "text": "Sales Dashboard", "level": "h1" }
    },
    "metrics": {
      "key": "metrics",
      "type": "Grid",
      "props": { "columns": 3, "gap": "md" },
      "children": ["revenue", "orders", "avgOrder"]
    },
    "revenue": {
      "key": "revenue",
      "type": "Card",
      "props": { "padding": "md" },
      "children": ["revenueMetric"]
    },
    "revenueMetric": {
      "key": "revenueMetric",
      "type": "Metric",
      "props": {
        "label": "Total Revenue",
        "valuePath": "/revenue",
        "format": "currency",
        "trend": "up",
        "trendValue": "12%"
      }
    },
    "orders": {
      "key": "orders",
      "type": "Card",
      "props": { "padding": "md" },
      "children": ["ordersMetric"]
    },
    "ordersMetric": {
      "key": "ordersMetric",
      "type": "Metric",
      "props": {
        "label": "Orders",
        "valuePath": "/orders",
        "format": "number"
      }
    },
    "avgOrder": {
      "key": "avgOrder",
      "type": "Card",
      "props": { "padding": "md" },
      "children": ["avgMetric"]
    },
    "avgMetric": {
      "key": "avgMetric",
      "type": "Metric",
      "props": {
        "label": "Avg Order Value",
        "valuePath": "/avgOrderValue",
        "format": "currency"
      }
    },
    "chartCard": {
      "key": "chartCard",
      "type": "Card",
      "props": { "title": "Monthly Trends", "padding": "md" },
      "children": ["chart"]
    },
    "chart": {
      "key": "chart",
      "type": "Chart",
      "props": {
        "type": "line",
        "dataPath": "/monthlyData",
        "height": 300
      }
    }
  },
  "data": {
    "revenue": 284500,
    "orders": 1247,
    "avgOrderValue": 228,
    "monthlyData": [
      { "month": "Jan", "value": 18000 },
      { "month": "Feb", "value": 22000 },
      { "month": "Mar", "value": 28000 },
      { "month": "Apr", "value": 24000 },
      { "month": "May", "value": 32000 }
    ]
  }
}

Then wrap in the artifact template from assets/template.html.

Files

  • assets/template.html — Complete artifact template with embedded renderer
  • assets/catalog.json — Machine-readable component schemas
  • references/uitree-format.md — Detailed UITree specification

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

oaustegard/claude-skills

hello-demo

Delivers a static Hello World HTML demo page with bookmarklet. Use when user requests the hello demo, hello world demo, or demo page.

113 4
Explore
oaustegard/claude-skills

installing-skills

Install skills from github.com/oaustegard/claude-skills into /mnt/skills/user. Use when user mentions "install skills", "load skills", "add skills", "update skills", "refresh skills", or references a skill not currently installed.

113 4
Explore
oaustegard/claude-skills

extracting-keywords

Extract keywords from documents using YAKE algorithm with support for 34 languages (Arabic to Chinese). Use when users request keyword extraction, key terms, topic identification, content summarization, or document analysis. Includes domain-specific stopwords for AI/ML and life sciences. Optional deeper extraction mode (n=2+n=3 combined) for comprehensive coverage.

113 4
Explore
oaustegard/claude-skills

remembering

Advanced memory operations reference. Basic patterns (profile loading, simple recall/remember) are in project instructions. Consult this skill for background writes, memory versioning, complex queries, edge cases, session scoping, retention management, type-safe results, proactive memory hints, GitHub access detection, autonomous curation, episodic scoring, and decision traces.

113 4
Explore
oaustegard/claude-skills

orchestrating-agents

Orchestrates parallel API instances, delegated sub-tasks, and multi-agent workflows with streaming and tool-enabled delegation patterns. Use for parallel analysis, multi-perspective reviews, or complex task decomposition.

113 4
Explore
oaustegard/claude-skills

check-tools

Validates development tool installations across Python, Node.js, Java, Go, Rust, C/C++, Git, and system utilities. Use when verifying environments or troubleshooting dependencies.

113 4
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results