Visualise

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,

486 stars 26 forksData & Analytics

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add bentossell/visualise --skill visualise

Manual install

git clone --depth 1 https://github.com/bentossell/visualise.git /tmp/visualise
mkdir -p ~/.claude/skills
cp -r /tmp/visualise/. ~/.claude/skills/visualise

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# 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

Read the full skill on GitHub

Details

Skill name: visualise
Repository: bentossell/visualise
Repo updated: 12 March 2026

FAQ

What does the Visualise skill do?

How do I install the Visualise skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add bentossell/visualise --skill visualise. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Visualise popular?

It lives in bentossell/visualise, which has 486 GitHub stars and 26 forks.

Related skills

Job Ok

431

GresonKwan/JobOK

Use when helping a Chinese job seeker, especially students, interns, or early-career users, prepare job applications with an agent without fabricating experience, auto-submitting applications, scraping hiring platforms, or promising offers.

Data & Analytics

Browser Search

540

Johell1NS/browser-search

Multi-engine web search (SearXNG) + browsing/scraping (Camofox, CloakBrowser). Use whenever you need to do web research.

Data & AnalyticsIn 1 list42

Strategy Consulting Visualization

162

kgraph57/mckinsey-style-visualization-skill

Use when turning content into clear strategy-consulting visualizations, including board slides, reports, diagrams, quiet animated decks, or explicit dynamic and interactive decks with clickable evidence, scenario controls, what-if sliders, and deterministic presenter demos.

Data & AnalyticsIn 1 list22

Apify Reddit Scraper

285

apify/awesome-skills

Scrape Reddit with the harshmaur/reddit-scraper Apify Actor: keyword search across all of Reddit or inside one subreddit, full subreddit listings, post permalinks with complete comment threads, user profiles and community info, with date-range filters and optional delivery of results into Slack, Notion, Google Sheets or Airtable through Apify MCP connectors. Use when the user says "monitor my brand on Reddit", "find leads on Reddit", "what is Reddit saying about X", "scrape r/<subreddit>", "pull all comments from this Reddit thread", "Reddit posts about X since <date>", "track competitor menti

Data & AnalyticsIn 1 list105

Tufte Data Viz

230

caylent/tufte-data-viz

Use when creating, reviewing, or styling charts, graphs, dashboards, sparklines, or any data visualization. Applies to Recharts, ECharts, Chart.js, matplotlib, Plotly, seaborn, D3.js, and SVG. Enforces Tufte principles (data-ink ratio, direct labeling, range-frame axes) plus modern screen-first standards (accessibility, responsive, dark mode).

Data & Analytics

Notebooklm

448

sanjay3290/ai-skills

Query and manage Google NotebookLM notebooks with persistent profile auth, source sync, batch/multi queries, and structured exports. Use when user asks to query NotebookLM, 'ask my notebook', shares NotebookLM notebook URLs, wants to list/create notebooks, manage sources, do bulk folder sync, dedupe, or audit exports.

Data & AnalyticsIn 4 lists49

Browse the most popular Claude skills, all data & analytics skills, or write your own with the skills generator.