How do I install the Dynamic UI skill?

Run npx skillmds@latest add dvcrn/dynamic-ui in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Dynamic UI safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: executes scripts. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Dynamic UI?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Dynamic UI free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Dynamic UI?

dvcrn (@dvcrn) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Dynamic UI by dvcrn — Agent Skill

Name: Dynamic UI
Rating: 4.666666666666667 (3 reviews)
Author: dvcrn

File contents

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

---name: dynamic-uidescription: Render tables, charts, stats, cards, and dashboards as images using HTML templates and wkhtmltoimage.---# Dynamic UI SkillRender dynamic visual content (tables, charts, stats, cards, dashboards) as images using HTML templates and wkhtmltoimage.## Triggers- "render", "visualize", "chart", "dashboard", "dynamic-ui"## Usage```bash# 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 stdinecho '{"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```bash# 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 UsersAfter rendering an image, you'll typically want to send it to the user. Here's the recommended workflow:### Recommended Workflow:```bash# 1. Render to ~/.openclaw/media/ (recommended path)./scripts/render.sh table --data '...' -o ~/.openclaw/media/my-table.png# 2. Send inline via message toolmessage(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):```bash# Renderecho '{"title":"My Data","columns":["A","B"],"rows":[["1","2"]]}' | \ ./scripts/render.sh table -o ~/.openclaw/media/data.png# Sendmessage(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

Frequently asked questions

Dynamic UI