visualize
Turn an answer into a light visual (flowchart, timeline, comparison, architecture sketch), in any language. Trigger ONLY when the user explicitly asks to see something visual, e.g. "show me", "visualize this", "show it as a diagram", "draw it", "با شکل نشون بده", "شماتیکش رو بکش"
Install
npx skills add https://github.com/smk-labs/claude-plugins/tree/main/readable/skills/visualize
claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install smk-labs-claude-plugins@llmmart
git clone https://github.com/smk-labs/claude-plugins.git
The skills CLI installs just this skill, for any of its supported agents. Claude Code installs the whole smk-labs/claude-plugins collection as a plugin from our marketplace. Git is the plain clone.
Skill manifest
visualize: a shape, only when it says it better
Render ONE light visual with mcp__visualize__show_widget. If this is the first widget of the session, call mcp__visualize__read_me first (silently) with the closest module (diagram for flows and structures, chart for data).
Rules:
- SVG first. HTML only for metric cards or side-by-side comparisons.
- Light: a few dozen elements at most, one idea per visual. If it needs more, split it into two visuals or stay in text.
- Colors: only the theme's CSS variables and ramp classes (
c-gray,c-purple,c-teal,c-coral). Never raw hex that breaks dark mode. 2-3 colors, gray for structural nodes, color only where it encodes meaning. - Labels stay short (under 5 words). Explanations belong in the chat text, never inside the visual.
- Persian/RTL labels: set
direction="rtl"on RTL<text>elements and keep Latin tokens out of them. Latin-only labels stay LTR. - If the current reply is already a Persian
<md>card (readable's RTL hook), embed the visual as a small inline<svg>inside that markdown instead of a second widget call. - Never force it: if no shape genuinely helps, say so and answer in text. This skill runs on explicit request only.
Files (claude-plugins)
-
SKILL.md 1.5 KB
--- name: visualize description: >- Turn an answer into a light visual (flowchart, timeline, comparison, architecture sketch), in any language. Trigger ONLY on an explicit ask: "show me", "visualize this", "draw it", «با شکل نشون بده». Never just because the content is flow-shaped. --- # visualize: a shape, only when it says it better Render ONE light visual with `mcp__visualize__show_widget`. If this is the first widget of the session, call `mcp__visualize__read_me` first (silently) with the closest module (`diagram` for flows and structures, `chart` for data). Rules: - SVG first. HTML only for metric cards or side-by-side comparisons. - Light: a few dozen elements at most, one idea per visual. If it needs more, split it into two visuals or stay in text. - Colors: only the theme's CSS variables and ramp classes (`c-gray`, `c-purple`, `c-teal`, `c-coral`). Never raw hex that breaks dark mode. 2-3 colors, gray for structural nodes, color only where it encodes meaning. - Labels stay short (under 5 words). Explanations belong in the chat text, never inside the visual. - Persian/RTL labels: set `direction="rtl"` on RTL `<text>` elements and keep Latin tokens out of them. Latin-only labels stay LTR. - If the current reply is already a Persian `<md>` card (readable's RTL hook), embed the visual as a small inline `<svg>` inside that markdown instead of a second widget call. - Never force it: if no shape genuinely helps, say so and answer in text. This skill runs on explicit request only.
Comments (0)
Sign in to join the conversation.
Reviews (0)
No reviews yet.
No comments yet.