Marketing Skills Directory Visualise
Description
Render inline interactive visuals — SVG diagrams, HTML widgets, charts, and explainers — directly in agent conversations. Supports flowcharts, architecture diagrams, data visualizations, interactive explainers, comparison layouts, and UI mockups. Output streams token-by-token into a sandboxed iframe with two modes: SVG for static diagrams and HTML for interactive content.
How It Works
Click to enlarge
What Claude Learns
- → How to generate inline SVG and HTML visuals in Claude Code conversations. Streaming-safe patterns (style-first, content, script-last). Iframe sandbox constraints and CDN allowlist. Design system with CSS variables, color ramps, and typography. Chart.js integration for data visualization. The sendPrompt bridge for conversational interactivity.
Installation
1. Visit the GitHub repository: https://github.com/bentossell/visualise
2. Copy the SKILL.md file and references/ directory
3. Save to ~/.claude/skills/visualise/
4. The skill auto-triggers on visualization requests — no manual invocation neededStack & Dependencies
SVG
HTML
CSS
Chart.js
JavaScript
Use Cases
How to generate inline SVG and HTML visuals in Claude Code conversations. Streaming-safe patterns (style-first, content, script-last). Iframe sandbox constraints and CDN allowlist. Design system with CSS variables, color ramps, and typography. Chart.js integration for data visualization. The sendPrompt bridge for conversational interactivity.
Using SVG and HTML
Related Skills
Frequently Asked Questions
What technologies does Visualise require?
This skill works with SVG, HTML, CSS, Chart.js, and JavaScript. Make sure these are available in your project before using the skill with Claude Code.
How detailed is the Visualise skill?
Visualise contains 119 lines of structured instructions covering 1 key areas. It provides detailed guidance including specific implementation patterns, not just surface-level tips.
Is Visualise free to use?
Yes, Visualise is completely free. You can download the SKILL.md file or copy it to your clipboard directly from the skill page.
Purchase workflow will be available soon. Contact us to get early access.
Learn More on GitHub