把自然语言描述转为结构化 JSON，并由 mcp-diagram-generator MCP 服务生成 Draw.io、Mermaid 或 Excalidraw 图表文件。
作者 nssa.io1.0k 次安装47 星标
设计与多媒体
Visual Tables — TinkerClaw
试用Render comparison tables a human reads at a glance instead of parsing — colour and bar length carry the comparison, text only confirms it. Use when you are about to present several options with several attributes each (search results, product comparisons, model benchmarks, server health, candidates, quotes) in a chat that renders HTML, or when asked to turn such a comparison into a clearer table. Not for a single value, a plain list, or a channel that does not render HTML. Ships a five-tier colour vocabulary, chip, bar and number primitives, a renderer that escapes every value it is given, and the per-domain column-spec pattern.
它能做什么
One of dozens of skills and plugins in **TinkerClaw** — a self-improving OpenClaw fork that's been running 24/7 for months.
技能文档
Visual Tables — TinkerClaw
One of dozens of skills and plugins in TinkerClaw — a self-improving OpenClaw fork that's been running 24/7 for months.
You asked for the best option. You got a grid of forty numbers.
So you do what everyone does: read it twice, lose your place, and pick the first row that looks fine.
The comparison was already in there. Nothing about the table let you see it.
This makes your agent render comparisons a person reads at a glance instead of parsing. Colour and bar length carry the argument — the best value glows, the weak ones recede, and the numbers are there to confirm what your eye already decided. Five colour tiers, used the same way in every table, so you learn the vocabulary once and it works on search results, product prices, model benchmarks, server health, quotes, candidates. The hard part is choosing which columns actually decide the question, and this walks the agent through that too, because a beautiful table of the wrong four columns is still the wrong answer.
Part of TinkerClaw — the fork where this and dozens of other skills live.
👉 https://github.com/globalcaos/tinkerclaw
Clone it. Fork it. Break it. Make it yours.
A comparison table is not a list. It is an argument about which option is better, and the reader should win that argument with their eyes before they read a word.
The four rules
1. Colour means one thing, everywhere. Five tiers — best amber, good
blue, ok green, weak grey, bad red. The same five in every table you ever
render. That consistency is the whole point: a reader who learns it on one table
reads the next one for free. Never invent a per-table colour language.
2. Bars are always relative to the best row in the same table. The reader's question is "compared with my other options", never "compared with everything that exists". An absolute scale makes every bar look identical and teaches nothing.
3. One chip per row. The chip is for the single attribute that most determines rank. Two chips and the eye has no anchor; five and it is a list again.
4. Missing data is not an empty value. A column of — reads as "this option
has none of that". Use absent('not stated') so the reader can tell a gap in
the data from a gap in the thing.
Choosing columns — the part that matters most
Before writing any markup, write down the decision the reader is making and order the columns by how much each one moves that decision. Then cut everything that moves it zero.
The test for a column: if two rows differ only in this, would the reader choose differently? If no, it is a footnote.
Record the answer as a spec per domain, not per table — same domain, same
columns, every time. A spec names its columns, the visual encoding for each, and
an explicit omit list saying what was dropped and why. The omit list is not
bureaucracy: it is how the next person knows the absence was a decision.
export const PRESENTERS = {
: {
label: 'Human name',
subtitle: 'what the ranking optimises for',
columns: [ { key, label, note?, align? }, … ],
omit: ['field — because '],
},
};
Usage
import { renderTable, chip, bar, num, absent, PALETTE, THEME } from "./lib/tables.mjs";
console.log("```html-render");
console.log(
renderTable({
title: "🎬 Query",
subtitle: "ranked by X, then Y",
meta: "15 found → 8 shown",
callout: { label: "BEST PICK", body: "…restated in prose…" },
columns: [
{ label: "#", align: "right" },
{ label: "Quality", note: "drives the colour" },
],
rows: [["1", chip("2160p", "best")]],
marks: ["best", null, "bad"],
legend: [`${chip("2160p", "best")} 4K`],
footnote: "7 excluded — and why.",
}),
);
console.log("```");
Runnable example: node examples/demo.mjs prints a complete block.
Verify by LOOKING at it
A table is a claim about legibility, and legibility has no unit test. Render it to a file and open it before showing it to anyone:
node examples/demo.mjs | sed '1d;$d' > /tmp/t.html
printf '<!doctype html>' > /tmp/p.html
cat /tmp/t.html >> /tmp/p.html
google-chrome --headless --disable-gpu --no-sandbox --window-size=1100,780 --screenshot=/tmp/t.png file:///tmp/p.html
Then look at the PNG. Every defect found this way in practice — a column of
dashes reading as "none", an empty field where a parser silently failed — passed
every automated check first. See references/designing-a-table.md.
Where this renders
Written for chat surfaces that render sandboxed HTML (the Tinker web chat's
fall back to plain text there. Do not emit an HTML block on a channel you have
not confirmed renders it.
Permissions & Data Flow
Short version: this skill is instructions plus a renderer. It turns data you already have into HTML in the chat.
| Capability | Why | Scope |
|---|---|---|
| Local shell / Node | Runs the bundled renderer to produce the table markup | The renderer script in this folder |
| File read/write | Reads the data you point it at; writes the rendered output | Paths you name in the request |
| Network | None. Nothing is fetched or sent | — |
| Credentials | None. Reads no tokens, keys or auth files | — |
The data you render stays on your machine — it goes from your input to an HTML block in your own chat. Nothing is uploaded, logged or transmitted.
Turning it off: it does nothing unless you ask for a table. Delete the folder to remove it entirely; nothing outside this directory is modified by installing it.
相关技能
以 AI 机器人身份加入视频会议,提供语音、虚拟形象与屏幕共享四种模式。
作者 johnpatternai21 次安装8 星标
编写、调试与调优 Playwright 测试,涵盖定位器策略、追踪诊断与 CI 友好的超时配置。
作者 ivangdavila1.3k 次安装129 星标
通过托管 OAuth 访问 Microsoft Graph Excel 接口，读写 OneDrive 中的工作簿、工作表、区域、表格与图表。
作者 byungkyu800 次安装42 星标
在本地磁盘以分类纯 Markdown 文件保存需要长期留存的事实,与智能体内置记忆并存。
作者 Iván1 次安装
从 AdMapix API 拉取广告创意、应用、榜单和收入预估等数据,原样返回结构化 JSON。
作者 fly0pants
globalcaos 的更多技能
浏览全部技能为 OpenClaw 智能体加上 JARVIS 风格的英式嗓音与冷面幽默，一条命令同步输出语音和紫色聊天气泡。
作者 globalcaos190 次安装4 星标
OpenClaw 原生 WhatsApp 通道：22 项消息与群组操作，叠加 Protocol v2 多智能体协同。
作者 globalcaos116 次安装3 星标
一个本地面板，统一追踪 Anthropic、Gemini、OpenAI、Manus 四家提供商的 token 用量与预算告警。
作者 globalcaos59 次安装
Stop sending 'format this JSON' to Opus. Stop sending 'cron job' to GPT. Billing-aware routing guide for choosing among the models already configured in your OpenClaw setup when assigning an agent, sub-agent or cron task — flat-rate first, metered only when justified, budget pressure respected. Not for picking models outside your configuration, and not a runtime proxy.
作者 globalcaos16 次安装
Your agent says 'done' — but did it check? Superpowers turns any OpenClaw agent into a disciplined engineer. Verification iron law (evidence before claims), three-agent code review (build → verify spec → verify quality), systematic debugging (4-phase root cause, three-strike rule), brainstorming gates (design before code), and anti-over-engineering rules. Use when: (1) coding tasks of any complexity, (2) debugging failures, (3) about to claim work is complete, (4) spawning sub-agents, (5) planning features, (6) reviewing code. Inspired by top coding agent methodologies, adapted for OpenClaw multi-agent architecture.
作者 globalcaos14 次安装
Read and search Outlook, inspect attachments, and create or edit drafts without any send endpoint. Uses one short-lived Microsoft Graph access token supplied on stdin for one run; it never stores credentials. Bulk mailbox export is opt-in.
作者 globalcaos23 次安装