skills.rest
Emasoft
EmasoftCOMMUNITY
Explore all skills by this author →
Website𝕏@fmuaddibGitHub

amvcp-iterm2-preview

Preview HTML pages or Mermaid diagrams in an iTerm2 split-pane.

Updated May 8, 2026
Search Tags:#mermaid#iterm2#terminal workflow#html preview#appleScript#svg rendering#browser pane navigation
One-click install
npx skills add https://github.com/Emasoft/ai-maestro-visual-communicator-plugin --skill amvcp-iterm2-preview
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: amvcp-iterm2-preview
Source: https://github.com/Emasoft/ai-maestro-visual-communicator-plugin/tree/main/skills/amvcp-iterm2-preview
Command: npx skills add https://github.com/Emasoft/ai-maestro-visual-communicator-plugin --skill amvcp-iterm2-preview

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires iterm2, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Lets you preview generated HTML pages or Mermaid diagrams directly in iTerm2 without leaving your terminal workflow.

Core Features & Use Cases

  • iTerm2-only split-pane preview: opens a right-hand “Web Browser” pane in the current iTerm2 tab while keeping the terminal active on the left.
  • Mermaid-to-SVG preview option: renders Mermaid via mmdc and wraps SVG in a minimal offline HTML shell for display in the pane.
  • Safety guardrails: refuses to run on non-iTerm2 hosts (e.g., VS Code integrated terminal, tmux/screen, SSH, cloud shells) to prevent jarring or invisible split-pane behavior.

Quick Start

Ask your AI to “show me a preview” and provide the HTML file path (or ask to render the Mermaid diagram), so the skill opens it in iTerm2’s right pane after verifying the host is real iTerm2.

Frequently Asked Questions about amvcp-iterm2-preview

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I preview HTML pages directly in iTerm2 without switching to an external browser?▼

To preview HTML pages in iTerm2, you can open them in a vertical split-pane using a Web Browser profile. This keeps your terminal active on the left while rendering the HTML on the right without leaving your workflow.

Can I render and preview Mermaid diagrams inside an iTerm2 terminal?▼

Yes, you can render Mermaid diagrams inside iTerm2 by converting them to SVG with mmdc. The SVG is then wrapped in a minimal offline HTML shell and displayed in the split-pane.

Does the iTerm2 split-pane preview work inside VS Code integrated terminal or tmux?▼

No, the iTerm2 split-pane preview does not work inside VS Code integrated terminal, tmux, screen, SSH, or cloud shells. Safety guardrails refuse to run on non-iTerm2 hosts to prevent invisible or jarring pane behavior.

What is the best way to inspect generated visual artifacts without breaking my terminal workflow?▼

The best way to inspect visual artifacts without breaking your terminal workflow is opening an iTerm2 right-hand Web Browser pane. It uses AppleScript and iTerm2's Python API to navigate the created pane for immediate display.

Why does the Mermaid preview require wrapping the SVG output in an HTML shell?▼

Wrapping the SVG output in an HTML shell is required for offline HTML display within the iTerm2 Web Browser pane. This ensures the rendered Mermaid diagram displays correctly without needing external browser dependencies.

Related Skills

Explore More Software Engineering Skills→
OlshanskOlshansk
8

mermaid-render

Render Mermaid diagrams to PNG for inline terminal display.

Community
Intermediate
tharunramagiritharunramagiri

tarunai-connect-iterm2

Control live iTerm2 terminal sessions with JSON outputs.

Community
Advanced
HKUDSHKUDS
46.8k

cli-anything-iterm2-ctl

Manage iTerm2 terminal sessions via the Python API.

Official
Intermediate
ivanov-iivanov-i

visual-explainer

Convert terminal outputs into self-contained HTML pages with Mermaid diagrams.

Community
Advanced