visualiselisted

Render inline interactive visuals — SVG diagrams, HTML widgets, charts, and explainers — directly in the conversation. Use this skill whenever the user asks to visualize, diagram, chart, illustrate, or explain something visually, or when an explanation would genuinely benefit from a spatial/interactive diagram rather than text. Also triggers for: flowcharts, architecture diagrams, data visualizations, interactive explainers, comparison layouts, UI mockups, and any request containing 'show me', 'draw', 'map out', 'visualize', or 'diagram'. Even when the user doesn't explicitly ask for a visual, use this skill proactively when the topic has spatial, sequential, or systemic relationships that a diagram would clarify better than prose.
buildproven/claude-kit · ★ 0 · Web & Frontend · score 75

Install: claude install-skill buildproven/claude-kit

# Inline Visualizer Render rich visual content — SVG diagrams, HTML interactive widgets, charts — directly inline in a chat conversation. Output streams token-by-token into a sandboxed iframe. The result feels like a natural extension of the conversation, not an attachment. ## How it works You generate raw HTML or SVG fragments. The client renders them in a sandboxed iframe with the design system's CSS variables injected. No `<html>`, `<head>`, or `<body>` tags — just content fragments. **Two output modes:** - **SVG mode**: Output starts with `<svg>`. Client auto-wraps in a card. Best for static diagrams. - **HTML mode**: Raw HTML fragment. Best for interactive content (sliders, tabs, charts, controls). You can embed `<svg>` elements inside HTML mode. The client detects which mode based on whether the output starts with `<svg`. ## Before generating any visual Read the design system reference before your first visual in a conversation: 1. **Always read first**: `references/design-system.md` — CSS variables, color ramps, typography, core rules 2. **Then read the relevant module**: - Diagrams (flowcharts, structural, illustrative): `references/diagrams.md` - Interactive explainers, comparisons, data records: `references/components.md` - Charts (Chart.js, data viz): `references/charts.md` Read the design system file once per conversation. Read module files as needed for each visual type. ## Streaming constraints Output streams token-by-token into the DOM. Thi