Dynamic UI

Render tables, charts, stats, cards, and dashboards as images using HTML templates and wkhtmltoimage.

Security Scan

The skill's code, install steps, and runtime instructions are consistent with its stated purpose (render HTML templates to images using wkhtmltoimage and jq).

Purpose & Capability

Name/description, required binaries (wkhtmltoimage, jq), templates, and a shell renderer script all align with a visual-rendering skill. No unrelated credentials, config paths, or binaries are requested.

Instruction Scope

SKILL.md instructs the agent to run scripts/render.sh with JSON input (stdin or --data), produce images, and optionally save to ~/.openclaw/media/ for messaging. The script reads only the provided JSON and internal templates. It does allow user-supplied image URLs (validated to block file:, javascript:, vbscript:, and non-image data:), which means wkhtmltoimage may fetch remote images — this is expected for image embedding but is the primary external-network behavior to be aware of.

Install Mechanism

Install spec uses standard package managers (apt/brew) to install wkhtmltopdf and jq. This is proportionate and expected for wkhtmltoimage usage; no downloads from arbitrary URLs or unusual extract steps are present.

Credentials

The skill declares no required environment variables or credentials. The runtime script does not reference hidden env vars or external credentials. It writes temporary files and (recommended) output under the user's home media directory, which is reasonable for generated images.

Persistence & Privilege

The skill is not always-on (always: false). It does not request elevated platform-wide privileges or modify other skills' configs. Autonomous invocation is permitted by default (disable-model-invocation: false) — this is the platform default and not by itself a red flag.

Assessment

This skill appears to do exactly what it says: it runs a local shell script that uses jq to parse JSON and wkhtmltoimage to convert HTML templates into PNGs. Before installing, note: (1) you must install wkhtmltoimage and jq; (2) the renderer may fetch user-supplied image URLs over the network (http/https or data:image/* are allowed), so only provide trusted image URLs if you are concerned about external network requests; (3) the skill recommends saving outputs to ~/.openclaw/media/ (a normal place for agent media); (4) if you want extra assurance, review scripts/render.sh locally (it's included) — the code is shell-based and readable. Overall the skill is internally coherent and proportionate to its purpose.

Dynamic UI Skill

Render dynamic visual content (tables, charts, stats, cards, dashboards) as images using HTML templates and wkhtmltoimage.

Triggers

• "render", "visualize", "chart", "dashboard", "dynamic-ui"

Usage

# Basic usage
./scripts/render.sh <template> --data '<json>'

# With options
./scripts/render.sh table --data '{"columns":["A","B"],"rows":[["1","2"]]}' --style dark --output out.png

# From stdin
echo '{"labels":["Q1","Q2"],"values":[100,200]}' | ./scripts/render.sh chart-bar --style modern

Templates

Template	Description	Input Schema
table	Data tables	{"columns": [...], "rows": [[...], ...]}
chart-bar	Bar charts	{"labels": [...], "values": [...], "title": "..."}
stats	KPI cards	{"stats": [{"label": "...", "value": "...", "change": "..."}]}
card	Info card	{"title": "...", "subtitle": "...", "body": "...", "status": "green|yellow|red"}
dashboard	Composite	{"title": "...", "widgets": [{"type": "stat|table|chart", ...}]}

Options

Option	Description	Default
--data, --input	JSON data (or use stdin)	-
--style	Theme: modern, dark, minimal	modern
--output, -o	Output path	stdout (base64)
--width	Image width in pixels	800

Themes

• modern — Purple/blue gradients, shadows, rounded corners
• dark — Dark background, light text, subtle borders
• minimal — Clean white, thin borders

Examples

# Render a table
./scripts/render.sh table --data '{"columns":["Name","Score"],"rows":[["Alice","95"],["Bob","87"]]}' -o table.png

# Render a bar chart
./scripts/render.sh chart-bar --data '{"labels":["Jan","Feb","Mar"],"values":[120,150,180],"title":"Monthly Sales"}' --style dark -o chart.png

# Render stats
./scripts/render.sh stats --data '{"stats":[{"label":"Users","value":"12.5K","change":"+12%"},{"label":"Revenue","value":"$45K","change":"+8%"}]}' -o stats.png

💡 Sending Images to Users

After rendering an image, you'll typically want to send it to the user. Here's the recommended workflow:

Recommended Workflow:

# 1. Render to ~/.openclaw/media/ (recommended path)
./scripts/render.sh table --data '...' -o ~/.openclaw/media/my-table.png

# 2. Send inline via message tool
message(action=send, filePath=/home/ubuntu/.openclaw/media/my-table.png, caption="Caption", channel=telegram, to=<user_id>)

Tips:

• Save to ~/.openclaw/media/ — this path works reliably for inline sending
• Use descriptive captions — helps users understand the visual
• Consider the context — sometimes saving to disk is fine if the user requested it

Example (complete flow):

# Render
echo '{"title":"My Data","columns":["A","B"],"rows":[["1","2"]]}' | \
  ./scripts/render.sh table -o ~/.openclaw/media/data.png

# Send
message(action=send, filePath=/home/ubuntu/.openclaw/media/data.png, caption="Here's your data", channel=telegram, to=USER_ID)

Dependencies

• /usr/bin/wkhtmltoimage — HTML to image conversion
• jq — JSON parsing