A visualization engine for AI agents to render tables, charts, and dashboards as high-quality images using HTML templates.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install dynamic-ui
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install dynamic-ui using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Dynamic UI Skill?
The Dynamic UI skill is a specialized tool designed to bridge the gap between structured data and human-readable visual content. By leveraging the power of HTML templates and the wkhtmltoimage rendering engine, it allows AI agents to generate professional-grade images directly from JSON input. This skill is a core component for developers building with Openclaw Skills who need to present complex information—such as financial summaries, system metrics, or database outputs—in a clear, visual format that is easy for users to consume across messaging platforms.
Dynamic UI Skill Use Cases
- Creating automated performance reports with bar charts and KPI cards for business users.
- Visualizing tabular data from SQL queries or CSV files into clean, styled PNG images.
- Building real-time monitoring dashboards for DevOps teams to track system health via chat.
- Generating personalized information cards for users in automated customer support workflows.
- Converting raw analytical data into shareable visual assets for social media or internal presentations.
How Dynamic UI Skill Works
- The skill accepts JSON data through command-line arguments or standard input (stdin).
- A specific template is selected (e.g., table, chart-bar, or dashboard) to define the visual structure.
- The jq utility processes the JSON to ensure it matches the required schema for the chosen template.
- The script generates an intermediate HTML representation styled with CSS (Modern, Dark, or Minimal themes).
- The wkhtmltoimage binary renders the HTML into a static PNG image file.
- The resulting image is saved to a local path, such as the media folder used by Openclaw Skills, for immediate transmission.
Dynamic UI Skill Setup
To utilize this skill, you must install the required system dependencies for HTML rendering and JSON processing:
# For Ubuntu/Debian users
sudo apt-get update
sudo apt-get install -y wkhtmltopdf jq fonts-noto-color-emoji
# For macOS users
brew install wkhtmltopdf jq
After installation, ensure the wkhtmltoimage and jq binaries are available in your system PATH.
Dynamic UI Skill Data Schema & Taxonomy
The Dynamic UI skill uses specific JSON structures for each template type to ensure accurate rendering:
| Template | Input Requirements | Key Fields |
|---|---|---|
table |
Tabular data | columns (array), rows (nested array) |
chart-bar |
Graphical data | labels (array), values (array), title (string) |
stats |
KPI highlights | stats (array of objects with label, value, change) |
card |
Info summary | title, subtitle, body, status (color) |
dashboard |
Composite view | title, widgets (array of mixed types) |
Dynamic UI Skill Advanced Features
- Support for multiple professional themes including modern gradients, dark mode, and minimal aesthetics.
- Ability to customize image resolution and scaling via the --width parameter for optimized mobile viewing.
- Seamless integration with the Openclaw Skills media pipeline for reliable file delivery in agent workflows.
- Built-in emoji support for status indicators and visual flair in dashboards using Noto Color Emoji fonts.
- High-performance rendering pipeline capable of generating complex layouts from simple CLI triggers.
SKILL.md
Loading
Related Openclaw Skills
Workspace Audit
A zero-dependency audit suite for OpenClaw workspaces that prevents file drift, secret leaks, and configuration mismatches.
macOS Native Automation
A zero-dependency Python tool for hardware-level mouse and keyboard automation on macOS using CGEvent and AppleScript.
Fastmail JMAP Email Skill
Give your AI agent full email superpowers to read, search, and send messages using Fastmail JMAP.
Agent Rate Limiter
A zero-dependency Python utility that prevents AI agents from hitting API rate limits through proactive tier-based throttling and automatic exponential backoff.
PromptLayer
A comprehensive integration for managing prompt templates, logging LLM requests, and running evaluation pipelines using the PromptLayer API.
Skill Publisher
A comprehensive developer toolkit for scaffolding, validating, security-scanning, and publishing agent capabilities to the ClawHub registry.
METADATA
Featured*
