データ分析
#image
dynamic-ui
Render tables, charts, stats, cards, and dashboards as images using HTML templates and wkhtmltoimage.
DeepseekModel
キュレーション済みスキル
品質 良好 · 64
v1.0.0
取得
https://deepseekmodel.com/api/download.php?id=modbender-skill-library-mcp-data-dynamic-ui-skill-md&format=skill
ダウンロード .skill
標準形式。system_prompt と model_config を収録し、任意の Agent で利用可能
.skill ファイルの system_prompt フィールドの実際の内容。
name dynamic-ui description Render tables, charts, stats, cards, and dashboards as images using HTML templates and wkhtmltoimage. metadata {"openclaw":{"requires":{"bins":"[Truncated]"},"install":["[Truncated]","[Truncated]"],"installHint":"This skill requires wkhtmltoimage and jq. Install with:\nUbuntu/Debian: sudo apt-get install -y wkhtmltopdf jq fonts-noto-color-emoji\nmacOS: brew install wkhtmltopdf jq\n"}} 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
このスキルを起動するキーワード。クリックでコピーできます。
このスキルにはトリガーワードがありません。
ダウンロードした .skill に含まれるフィールド。
| フィールド | 説明 |
|---|---|
| format | フォーマット識別子（skill/v1） |
| skill_id | スキル固有 ID |
| name | スキル名 |
| version | バージョン |
| description | 説明 |
| category | カテゴリ（配列） |
| trigger_words | トリガーワード |
| tags | タグ |
| source | ソース |
| source_url | ソース URL（本ページ） |
| exported_at | エクスポート日時（ダウンロード毎） |
| system_prompt | システムプロンプト本文 |
| model_config | モデル設定：provider / model / temperature / max_tokens / top_p |
| examples | サンプル |
| install_guide | 各プラットフォームの導入説明（Coze / Dify / Claude / カスタム） |
