### Clone Visualise Skill (User-Level)

Source: https://github.com/bentossell/visualise/blob/main/README.md

Clones the Visualise agent skill repository to the user's local agents directory. This is the recommended installation method for general use.

```bash
git clone https://github.com/bentossell/visualise.git ~/.agents/skills/visualise
```

--------------------------------

### MCP Server Wrapper for Visualisation (TypeScript)

Source: https://github.com/bentossell/visualise/blob/main/references/client-implementation.md

Sets up an MCP server with tools to read markdown files based on provided modules and render visual components. It uses the '@modelcontextprotocol/sdk' and 'zod' for validation. The server listens for incoming requests after defining the 'visualizer_read_me' and 'render_visual' tools.

```typescript
import { Server } from '@modelcontextprotocol/sdk/server';
import { z } from 'zod';
import fs from 'fs';

const server = new Server({ name: 'inline-visualizer', version: '1.0.0' });

server.tool('visualizer_read_me', {
  modules: z.array(z.enum(['design-system', 'diagrams', 'components', 'charts'])),
}, async ({ modules }) => {
  const docs = modules.map(m =>
    fs.readFileSync(`./references/${m}.md`, 'utf-8')).join('

---

');
  return { content: [{ type: 'text', text: docs }] };
});

server.tool('render_visual', {
  title: z.string(),
  widget_code: z.string(),
}, async ({ title, widget_code }) => ({
  content: [{ type: 'resource', resource: {
    uri: `visual://${title}`, mimeType: 'text/html', text: widget_code
  }}]
}));

server.listen();

```

--------------------------------

### Create Inline SVG Visualizations

Source: https://github.com/bentossell/visualise/blob/main/references/charts.md

Examples of lightweight, dependency-free SVG charts including a horizontal bar and a sparkline.

```svg
<svg width="100%" viewBox="0 0 680 80">
  <text class="ts" x="40" y="30">Category A</text>
  <rect x="160" y="16" width="360" height="20" rx="4" fill="#1D9E75" opacity="0.8"/>
  <text class="ts" x="530" y="30">72%</text>
</svg>
```

```svg
<svg width="120" height="32" viewBox="0 0 120 32">
  <polyline points="0,28 20,20 40,24 60,12 80,16 100,4 120,8"
    fill="none" stroke="#1D9E75" stroke-width="1.5" stroke-linecap="round"/>
</svg>
```

--------------------------------

### Streaming Support for Iframe - TypeScript

Source: https://github.com/bentossell/visualise/blob/main/references/client-implementation.md

Provides functions to manage streaming content into an iframe. `startStreaming` initializes the iframe document with CSS, `appendChunk` writes incoming data chunks, and `finishStreaming` closes the document, triggering script execution.

```typescript
function startStreaming(iframe, isDark) {
  const doc = iframe.contentDocument;
  doc.open();
  doc.write(`<style>${getThemeCSS(isDark)}
${SVG_CLASSES}</style>`);
  // Leave open for appending
}

function appendChunk(iframe, chunk) {
  iframe.contentDocument.write(chunk);
}

function finishStreaming(iframe) {
  iframe.contentDocument.close(); // Triggers script execution
}
```

--------------------------------

### Theme CSS Generation Function (TypeScript)

Source: https://github.com/bentossell/visualise/blob/main/references/client-implementation.md

A TypeScript function that generates CSS variables for theming based on the system's dark mode preference. It defines color, font, and border-radius tokens for both dark and light themes. This function is used by the `VisualWidget` component.

```typescript
function getThemeCSS(isDark: boolean): string {
  return isDark ? `
    :root {
      --color-text-primary: #E5E7EB;
      --color-text-secondary: #9CA3AF;
      --color-text-tertiary: #6B7280;
      --color-text-info: #60A5FA;
      --color-text-success: #34D399;
      --color-text-warning: #FBBF24;
      --color-text-danger: #F87171;
      --color-background-primary: #1A1A1A;
      --color-background-secondary: #262626;
      --color-background-tertiary: #111111;
      --color-border-tertiary: rgba(255,255,255,0.15);
      --color-border-secondary: rgba(255,255,255,0.3);
      --font-sans: system-ui, -apple-system, sans-serif;
      --font-mono: 'SF Mono', Menlo, monospace;
      --border-radius-md: 8px; --border-radius-lg: 12px;
    }` : `
    :root {
      --color-text-primary: #1F2937;
      --color-text-secondary: #6B7280;
      --color-text-tertiary: #9CA3AF;
      --color-text-info: #2563EB;
      --color-text-success: #059669;
      --color-text-warning: #D97706;
      --color-text-danger: #DC2626;
      --color-background-primary: #FFFFFF;
      --color-background-secondary: #F9FAFB;
      --color-background-tertiary: #F3F4F6;
      --color-border-tertiary: rgba(0,0,0,0.15);
      --color-border-secondary: rgba(0,0,0,0.3);
      --font-sans: system-ui, -apple-system, sans-serif;
      --font-mono: 'SF Mono', Menlo, monospace;
      --border-radius-md: 8px; --border-radius-lg: 12px;
    }`;
}

```

--------------------------------

### Detect Visualizer Output in Messages - React/JSX

Source: https://github.com/bentossell/visualise/blob/main/references/client-implementation.md

Parses chat message content to detect and separate content enclosed within '```visualizer\n...```' code fences. It splits the content and renders detected visualizer parts using a `VisualWidget` component and other content as Markdown.

```jsx
function ChatMessage({ content }) {
  const parts = content.split(/```visualizer\n([\s\S]*?)```/g);
  return (
    <div>
      {parts.map((part, i) => {
        if (i % 2 === 1) {
          return <VisualWidget key={i} code={part} title={`visual-${i}`}
            onSendPrompt={(text) => sendMessage(text)} />;
        }
        return <Markdown key={i}>{part}</Markdown>;
      })}
    </div>
  );
}
```

--------------------------------

### Visualise Renderer Component (React/TypeScript)

Source: https://github.com/bentossell/visualise/blob/main/references/client-implementation.md

A React component that renders visualisations within a sandboxed iframe. It injects theme CSS, SVG classes, and widget code, and handles iframe resizing and communication bridges for sending prompts and opening links. It relies on external `getThemeCSS` and `SVG_CLASSES` variables.

```tsx
import { useRef, useState, useEffect } from 'react';

export function VisualWidget({ code, title, onSendPrompt }) {
  const iframeRef = useRef(null);
  const [height, setHeight] = useState(200);
  const isDark = matchMedia('(prefers-color-scheme: dark)').matches;

  useEffect(() => {
    const iframe = iframeRef.current;
    if (!iframe) return;
    const doc = iframe.contentDocument;
    if (!doc) return;

    // Inject theme + SVG classes + widget code
    doc.open();
    doc.write(`<style>${getThemeCSS(isDark)}
${SVG_CLASSES}</style>${code}`);
    doc.close();

    // Bridge: sendPrompt from iframe → chat
    iframe.contentWindow.sendPrompt = (text) => onSendPrompt?.(text);
    iframe.contentWindow.openLink = (url) => window.open(url, '_blank');

    // Auto-size
    let timer;
    const ro = new ResizeObserver(([entry]) => {
      clearTimeout(timer);
      timer = setTimeout(() => setHeight(Math.ceil(entry.contentRect.height) + 16), 50);
    });
    if (doc.body) ro.observe(doc.body);
    return () => { ro.disconnect(); clearTimeout(timer); };
  }, [code, isDark, onSendPrompt]);

  return (
    <iframe ref={iframeRef} title={title} sandbox="allow-scripts"
      style={{ width: '100%', height, border: 'none', display: 'block', overflow: 'hidden' }} />
  );
}

```

--------------------------------

### Define SVG Classes String - TypeScript

Source: https://github.com/bentossell/visualise/blob/main/references/client-implementation.md

Defines a template literal string containing CSS classes for styling SVG elements. This includes classes for text, shapes, colors (both light and dark modes), and interactive elements. It's intended to be injected alongside theme CSS.

```typescript
const SVG_CLASSES = `
  .t { font: 400 14px var(--font-sans); fill: var(--color-text-primary); }
  .ts { font: 400 12px var(--font-sans); fill: var(--color-text-secondary); }
  .th { font: 500 14px var(--font-sans); fill: var(--color-text-primary); }
  .box { fill: var(--color-background-secondary); stroke: var(--color-border-tertiary); }
  .node { cursor: pointer; } .node:hover { opacity: 0.85; }
  .arr { stroke: var(--color-border-secondary); stroke-width: 1.5; fill: none; }
  .leader { stroke: var(--color-text-tertiary); stroke-width: 0.5; stroke-dasharray: 3 2; fill: none; }

  .c-purple > rect, .c-purple > circle, .c-purple > ellipse { fill: #EEEDFE; stroke: #534AB7; }
  .c-purple > .th { fill: #3C3489; } .c-purple > .ts { fill: #534AB7; }
  .c-teal > rect, .c-teal > circle, .c-teal > ellipse { fill: #E1F5EE; stroke: #0F6E56; }
  .c-teal > .th { fill: #085041; } .c-teal > .ts { fill: #0F6E56; }
  .c-coral > rect, .c-coral > circle, .c-coral > ellipse { fill: #FAECE7; stroke: #993C1D; }
  .c-coral > .th { fill: #712B13; } .c-coral > .ts { fill: #993C1D; }
  .c-gray > rect, .c-gray > circle, .c-gray > ellipse { fill: #F1EFE8; stroke: #5F5E5A; }
  .c-gray > .th { fill: #444441; } .c-gray > .ts { fill: #5F5E5A; }
  .c-blue > rect, .c-blue > circle, .c-blue > ellipse { fill: #E6F1FB; stroke: #185FA5; }
  .c-blue > .th { fill: #0C447C; } .c-blue > .ts { fill: #185FA5; }
  .c-amber > rect, .c-amber > circle, .c-amber > ellipse { fill: #FAEEDA; stroke: #854F0B; }
  .c-amber > .th { fill: #633806; } .c-amber > .ts { fill: #854F0B; }

  @media (prefers-color-scheme: dark) {
    .c-purple > rect, .c-purple > circle, .c-purple > ellipse { fill: #3C3489; stroke: #AFA9EC; }
    .c-purple > .th { fill: #CECBF6; } .c-purple > .ts { fill: #AFA9EC; }
    .c-teal > rect, .c-teal > circle, .c-teal > ellipse { fill: #085041; stroke: #5DCAA5; }
    .c-teal > .th { fill: #9FE1CB; } .c-teal > .ts { fill: #5DCAA5; }
    .c-coral > rect, .c-coral > circle, .c-coral > ellipse { fill: #712B13; stroke: #F0997B; }
    .c-coral > .th { fill: #F5C4B3; } .c-coral > .ts { fill: #F0997B; }
    .c-gray > rect, .c-gray > circle, .c-gray > ellipse { fill: #444441; stroke: #B4B2A9; }
    .c-gray > .th { fill: #D3D1C7; } .c-gray > .ts { fill: #B4B2A9; }
    .c-blue > rect, .c-blue > circle, .c-blue > ellipse { fill: #0C447C; stroke: #85B7EB; }
    .c-blue > .th { fill: #B5D4F4; } .c-blue > .ts { fill: #85B7EB; }
    .c-amber > rect, .c-amber > circle, .c-amber > ellipse { fill: #633806; stroke: #EF9F27; }
    .c-amber > .th { fill: #FAC775; } .c-amber > .ts { fill: #EF9F27; }
  }

  button { background: transparent; border: 0.5px solid var(--color-border-secondary); border-radius: var(--border-radius-md); padding: 6px 14px; font-size: 13px; color: var(--color-text-primary); cursor: pointer; font-family: var(--font-sans); }
  button:hover { background: var(--color-background-secondary); }
  input[type="range"] { -webkit-appearance: none; height: 4px; background: var(--color-border-tertiary); border-radius: 2px; }
  input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--color-background-primary); border: 0.5px solid var(--color-border-secondary); cursor: pointer; }
  * { box-sizing: border-box; margin: 0; font-family: var(--font-sans); }
  body { background: transparent; color: var(--color-text-primary); line-height: 1.5; }
`;
```

--------------------------------

### Initialize Chart.js Bar Chart

Source: https://github.com/bentossell/visualise/blob/main/references/charts.md

Sets up a responsive bar chart using Chart.js. It includes configuration for dynamic CSS variable integration, axis styling, and container constraints.

```html
<div style="position: relative; height: 300px;">
  <canvas id="chart"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
<script>
const ctx = document.getElementById('chart').getContext('2d');
const style = getComputedStyle(document.documentElement);
const textSecondary = style.getPropertyValue('--color-text-secondary').trim();
const borderDefault = style.getPropertyValue('--color-border-tertiary').trim();

new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    datasets: [{
      label: 'Revenue',
      data: [12, 19, 8, 15],
      backgroundColor: '#5DCAA5',
      borderRadius: 4,
      borderSkipped: false,
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: { labels: { color: textSecondary, font: { size: 12 } } }
    },
    scales: {
      x: { grid: { display: false }, ticks: { color: textSecondary, font: { size: 12 } }, border: { color: borderDefault } },
      y: { grid: { color: borderDefault }, ticks: { color: textSecondary, font: { size: 12 } }, border: { display: false } }
    }
  }
});
</script>
```

--------------------------------

### Build Comparison Layouts

Source: https://github.com/bentossell/visualise/blob/main/references/components.md

Creates a side-by-side card comparison view using CSS grid. Supports custom styling for recommended options via thicker borders and badges.

```html
<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;">
  <div style="background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); padding: 1rem 1.25rem;">
    <p style="font-weight: 500; font-size: 15px; margin: 0 0 12px; color: var(--color-text-info);">Option A</p>
  </div>
  <div style="background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); padding: 1rem 1.25rem;">
    <p style="font-weight: 500; font-size: 15px; margin: 0 0 12px; color: var(--color-text-warning);">Option B</p>
  </div>
</div>
```

--------------------------------

### Initialize D3.js Visualization

Source: https://github.com/bentossell/visualise/blob/main/references/charts.md

Boilerplate for initializing a D3.js visualization within a container element.

```html
<div id="viz"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
<script>
const svg = d3.select('#viz').append('svg')
  .attr('width', '100%').attr('viewBox', '0 0 680 400');
</script>
```

--------------------------------

### Clone Visualise Skill (Project-Level)

Source: https://github.com/bentossell/visualise/blob/main/README.md

Clones the Visualise agent skill repository into the project's local agents directory. This method is suitable for project-specific integrations.

```bash
git clone https://github.com/bentossell/visualise.git .agents/skills/visualise
```

--------------------------------

### Wrap Visual Output with 'visualizer' Tag

Source: https://github.com/bentossell/visualise/blob/main/SKILL.md

Visual output should be wrapped in a code fence with the language tag `visualizer`. This allows the client to detect and route the content to the iframe renderer. The client then strips the fence and injects the content into the iframe with theme variables prepended.

```html
```visualizer
<svg width="100%" viewBox="0 0 680 400">
  ...
</svg>
```
```

--------------------------------

### ERD Diagram Import Mermaid.js

Source: https://github.com/bentossell/visualise/blob/main/references/diagrams.md

Shows how to import the Mermaid.js library from esm.sh for generating ERD diagrams.

```javascript
import mermaid from 'esm.sh/mermaid@11';
```

--------------------------------

### Wrap Mockups in Background Surface

Source: https://github.com/bentossell/visualise/blob/main/references/components.md

Provides a container style for mobile mockups, chat threads, and modals. Uses CSS variables for background color and border radius to ensure consistent styling.

```html
<div style="background: var(--color-background-secondary); border-radius: var(--border-radius-lg); padding: 2rem; display: flex; justify-content: center;">
  <!-- mockup -->
</div>
```

--------------------------------

### Implement Interactive Explainer with Sliders

Source: https://github.com/bentossell/visualise/blob/main/references/components.md

Provides a control interface using range inputs to update live state displays. Uses standard HTML elements with inline styles for layout and font sizing.

```html
<div style="display: flex; align-items: center; gap: 12px; margin: 0 0 1.5rem;">
  <label style="font-size: 14px; color: var(--color-text-secondary);">Years</label>
  <input type="range" min="1" max="40" value="20" style="flex: 1;" oninput="update(this.value)"/>
  <span style="font-size: 14px; font-weight: 500; min-width: 24px;" id="out">20</span>
</div>
<div style="display: flex; align-items: baseline; gap: 8px;">
  <span style="font-size: 14px; color: var(--color-text-secondary);">£1,000 →</span>
  <span style="font-size: 24px; font-weight: 500;" id="result">£3,870</span>
</div>
```

--------------------------------

### Implement Faux Modal Viewport

Source: https://github.com/bentossell/visualise/blob/main/references/components.md

Creates a modal overlay using a faux viewport approach instead of fixed positioning. This ensures the modal is contained within its parent element while maintaining a centered layout.

```html
<div style="min-height: 400px; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; border-radius: var(--border-radius-lg);">
  <div style="background: var(--color-background-primary); border-radius: var(--border-radius-lg); padding: 2rem; max-width: 400px; width: 100%;">
    <!-- content -->
  </div>
</div>
```

--------------------------------

### Implement Cyclic Stepper Component

Source: https://github.com/bentossell/visualise/blob/main/references/components.md

A state-driven stepper component for cyclic processes. Includes navigation buttons, a progress indicator, and JavaScript logic to cycle through content steps.

```html
<div id="step-content" style="min-height: 200px; padding: 1rem 0;"></div>
<div style="display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 0.5px solid var(--color-border-tertiary);">
  <button onclick="prev()">← Previous</button>
  <div style="display: flex; gap: 6px;" id="dots"></div>
  <button onclick="next()">Next →</button>
</div>
<script>
const steps = [{ title: 'Step 1', content: '...' }];
let current = 0;
function render() {
  document.getElementById('step-content').innerHTML =
    `<h3 style="font-size:16px;font-weight:500;margin:0 0 8px">${steps[current].title}</h3>
     <p style="font-size:14px;color:var(--color-text-secondary);margin:0">${steps[current].content}</p>`;
  document.getElementById('dots').innerHTML = steps.map((_, i) =>
    `<div style="width:8px;height:8px;border-radius:50%;background:${i===current?'var(--color-text-info)':'var(--color-border-tertiary)'}"></div>`
  ).join('');
}
function next() { current = (current + 1) % steps.length; render(); }
function prev() { current = (current - 1 + steps.length) % steps.length; render(); }
render();
</script>
```

--------------------------------

### Layout Metric Cards and Chart

Source: https://github.com/bentossell/visualise/blob/main/references/charts.md

Provides a grid layout structure for displaying metric cards above a chart container.

```html
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px;">
  <!-- metric cards -->
</div>
<div style="position: relative; height: 280px;">
  <canvas id="chart"></canvas>
</div>
```

--------------------------------

### Create Metric Cards for Summary Data

Source: https://github.com/bentossell/visualise/blob/main/references/components.md

Displays summary numerical data using a secondary background color without borders. Designed to be used in CSS grid layouts for clean, side-by-side metric presentation.

```html
<div style="background: var(--color-background-secondary); border-radius: var(--border-radius-md); padding: 1rem;">
  <p style="font-size: 13px; color: var(--color-text-secondary); margin: 0 0 2px;">Label</p>
  <p style="font-size: 24px; font-weight: 500; margin: 0;">$3,870</p>
</div>
```

--------------------------------

### SVG Container and Marker Configuration

Source: https://github.com/bentossell/visualise/blob/main/references/design-system.md

Standardized SVG structure for the Visualise project, including a responsive viewBox and a reusable arrow marker. The marker utilizes 'context-stroke' to automatically inherit the stroke color of the path it is applied to.

```svg
<svg width="100%" viewBox="0 0 680 H">
  <defs>
    <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5"
      markerWidth="6" markerHeight="6" orient="auto-start-reverse">
      <path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke"
        stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </marker>
  </defs>
</svg>
```

--------------------------------

### Display Data Records

Source: https://github.com/bentossell/visualise/blob/main/references/components.md

Renders a user or entity profile card with an avatar and descriptive text. Uses a raised card style with a 0.5px border and rounded corners.

```html
<div style="background: var(--color-background-primary); border-radius: var(--border-radius-lg); border: 0.5px solid var(--color-border-tertiary); padding: 1rem 1.25rem;">
  <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;">
    <div style="width: 44px; height: 44px; border-radius: 50%; background: var(--color-background-info); display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 14px; color: var(--color-text-info);">MR</div>
    <div>
      <p style="font-weight: 500; font-size: 15px; margin: 0;">Name</p>
      <p style="font-size: 13px; color: var(--color-text-secondary); margin: 0;">Role</p>
    </div>
  </div>
</div>
```

--------------------------------

### Flowchart Two-Line Node SVG

Source: https://github.com/bentossell/visualise/blob/main/references/diagrams.md

Defines the SVG structure for a two-line node in a flowchart, accommodating a title and a subtitle within a larger rectangular shape.

```svg
<g class="node c-blue">
  <rect x="100" y="20" width="200" height="56" rx="8" stroke-width="0.5"/>
  <text class="th" x="200" y="38" text-anchor="middle" dominant-baseline="central">Title</text>
  <text class="ts" x="200" y="56" text-anchor="middle" dominant-baseline="central">Subtitle</text>
</g>
```

--------------------------------

### Prevent CSS Grid Overflow

Source: https://github.com/bentossell/visualise/blob/main/references/components.md

A CSS technique to prevent grid children from overflowing their container. By using minmax(0, 1fr) instead of 1fr, the grid tracks are allowed to shrink below their content size.

```css
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
```

--------------------------------

### Flowchart Single-Line Node SVG

Source: https://github.com/bentossell/visualise/blob/main/references/diagrams.md

Defines the SVG structure for a single-line node in a flowchart, including its rectangular shape, text content, and an onclick event handler.

```svg
<g class="node c-blue" onclick="sendPrompt('Tell me about this')">
  <rect x="100" y="20" width="180" height="44" rx="8" stroke-width="0.5"/>
  <text class="th" x="190" y="42" text-anchor="middle" dominant-baseline="central">Label</text>
</g>
```

--------------------------------

### Flowchart Arrow Path SVG

Source: https://github.com/bentossell/visualise/blob/main/references/diagrams.md

Represents an SVG path element for drawing arrows in a flowchart, utilizing a 'd' attribute for path data and a marker-end for the arrowhead.

```svg
<path d="M x1 y1 L x1 ymid L x2 ymid L x2 y2" fill="none" class="arr" marker-end="url(#arrow)"/>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.