ai-maestro-visual-communicator-plugin

Animation sandbox — ONE transition shown in isolation with live duration + easing tuners, a Replay button, and an export of the tuned {duration, easing} values. Moving the slider or easing select re-runs the transition live; the tuned values export through the runtime selection channel. Light + dark, reduced-motion-aware. Use when tuning a transition, dialling in animation timing, picking an easing curve, or building an easing/duration playground. Trigger with 'animation sandbox', 'tune a transition', 'easing tuner', 'duration slider', 'easing playground', 'pick an easing curve'.

Code diff surface — unified + split diff blocks, twin-column gutter, semantic diff tints, PR review pages with line-anchored comments. Use when scaffolding a code diff, a side-by-side review, a PR / postmortem / changelog page. Trigger with 'diff', 'split diff', 'unified diff', 'PR review', 'code review', 'pull request', 'postmortem', 'hunk', 'line-diff'.

Code-as-data and editable-fence surface — distinguishes pre tag as code vs data (CSV/JSON/YAML), the data-ve-no-gutter opt-out, and the contenteditable code-editor family. Use when scaffolding a CSV/JSON data block, a live editor, an opt-out gutter block, or deciding fenced vs free-form. Trigger with 'CSV', 'JSON data', 'YAML data', 'data fence', 'opt-out gutter', 'contenteditable', 'JSON editor', 'live edit code', 'no-gutter'.

Router skill for the code-display surface — dispatches to 4 sibling skills: code-syntax, code-diff, code-snippets, code-fences. Use when scaffolding ANY code-display surface and you don't yet know which sub-surface fits. Trigger with 'code', 'code block', 'syntax highlight', 'diff', 'PR review', 'walkthrough', 'tabbed code', 'CSV data', 'JSON editor'.

Multi-perspective code composition surface — collapsed walkthroughs, snippet-on-hover, tabbed multi-perspective panels, click-step-to-code, N-column compare layouts. Use when scaffolding a code walkthrough, explainer, tutorial, or click-driven code reveal. Trigger with 'walkthrough', 'tabbed code', 'click reveal code', 'snippet', 'explainer', 'tutorial steps', 'compare approaches'.

Visual chrome + inline hand-wrap for code blocks — block 3-state hover/select model, blueprint theme, slate-bg panel, file-path / tab-bar headers, inline code chip, 4-class hand-wrap palette, keyword-arrow highlight, plus the author-vs-runtime + light/dark cross-cutting discipline. Use when styling a code block's container, adding a file-path or tab-bar header, hand-wrapping inline code without the JS tokenizer, or wiring light/dark token mirrors. Trigger with 'block hover state', 'blueprint theme', 'slate panel', 'file-path header', 'tab-bar', 'inline code chip', 'hand-wrap', 'keyword highlight', 'light dark code mirror', 'author vs runtime'.

Tokenizer + runtime engine for syntax-highlighted code — dependency-free 7-language tokenizer, 12-token palette, per-line gutter, copy button, drag-paint selection, byte-fidelity integrity probe. Use when configuring tokenizer / language detection, defining the 12 `ve-tok-*` token roles, or debugging gutter / copy-button / line-selection chrome. Trigger with 'tokenizer', 'language detect', 'line numbers', 'copy code button', 'gutter', 'token palette', 'code line selection', 'integrity probe', 'highlightLine'.

Syntax-highlight surface — dependency-free tokenizer, 12-token palette, gutter, copy, light + dark themes. Use when scaffolding a syntax-highlighted code block, configuring tokenizer / language detection, defining `--ve-code-*` theme tokens, or debugging gutter / copy / selection chrome. Trigger with 'syntax highlight', 'code block', 'tokenizer', 'line numbers', 'copy code button', 'gutter', 'token palette', 'language detect'.

Structured-response widgets for conversational agent reports — radio, multi-select, numeric, date, color, rank-list, file/tag/slider/toggle. Persists to localStorage, DESIGN.md tokens. Use when an agent's question has a finite structured answer instead of free-text prose. Trigger with 'multiple choice', 'radio buttons', 'checkbox list', 'date picker', 'color picker', 'rank list', 'rating widget', 'tier list', 'tag input', 'structured response', 'form input', 'survey question'.

Author themed inline SVG icons, logos, device frames, shapes, and image hotspots from a JSON scene-graph. 1000x1000 coordinate space, hairline strokes, DESIGN.md tokens, click-to-select atoms. Use when the user asks for an icon, logo mark, device mockup, hotspot, or geometric shape. Trigger with 'icon', 'logo', 'svg icon', 'device frame', 'iphone mockup', 'browser mockup', 'hotspot', 'annotated image', 'scene graph svg', 'cloud icon', 'hexagon'.

Foundation grids + spatial tokens — token ladder, --la-* aliases, named gaps, ch reading measures, 2-1/3-1 sidebar grids, subgrid card row, auto-fill gallery, article 3-col + wide/bleed, RTL logical props, no-nested-scrollbars, selection atoms. Use when the user asks for a grid, content+sidebar, gallery, article body, or RTL layout. Trigger with 'grid', 'columns', 'sidebar', 'gallery', 'cards', 'article', 'reading measure', 'RTL', 'spatial tokens', 'gap'.

Use when the user wants a written report, executive summary, technical writeup, case study, proposal, whitepaper, RFC, ADR, postmortem, status report, retrospective, design-system doc, essay, or to QA-check / verify / lint an already-generated visual page. Trigger with 'technical report', 'executive summary', 'case study', 'whitepaper', 'RFC', 'ADR', 'postmortem', 'status report', 'retrospective', 'PR writeup', 'feature explainer', 'long-form article', 'render this README', 'QA-check page'.

Matrix tables (N items x M criteria with pass/fail/partial), comparison tables (N-way option compare), matrix glyphs (check/cross/dot), matrix summary footer, coverage audit pattern, comparison emphasis column, decision matrix. Use when scaffolding comparison/matrix tables. Trigger with 'matrix table', 'comparison table', 'coverage matrix', 'decision matrix', 'matrix glyph', 'matrix summary footer', 'comparison emphasis'.

UMBRELLA skill — auto-routes between 13 category skills covering visuals from tokens through diagrams, slides, and prose. Use when the user wants ANY visual added to a document: chart, dashboard, diagram, table, code block, math, slide deck, wireframe, icon, design system, report. Trigger with 'add a chart/diagram/table', 'visualize', 'make a dashboard', 'turn into slides', 'wireframe this', 'render code', 'design tokens', 'restyle', 'render report as HTML', '/amvcp-generate-web-diagram'.

Multi-screen wireframe authoring — anchor nav (paged vs scroll), `.wf-screen` blocks, screen-to-screen routing, clickable prototypes (hub-spoke / linear / branching), domain screens (mobile, ecommerce, auth, email, CMS, onboarding), selection, a11y. Use when wiring N screens into one page or translating a spec to screens. Trigger with 'multi-screen', 'screen navigation', 'paged wireframe', 'clickable prototype', 'screen flow', 'wireframe from spec'.

Feature-flag editor — a self-contained, DESIGN.md-themed panel of grouped toggle switches with dependency warnings (flag X requires Y) and a copy-diff export of changed-vs-default flags. The diff exports through the runtime selection channel; light + dark, keyboard-accessible switches. Use when editing feature flags, toggling config options, or building a settings/flags panel with dependency rules. Trigger with 'feature flags', 'feature-flag editor', 'flag toggles', 'config toggles', 'settings toggles', 'toggle editor', 'flag dependencies', 'copy diff of flags'.

Self-contained interactive HTML widgets — tabs, accordion, modal, filter pills, stepper, sortable table, Kanban, slider, theme toggle, TOC, tooltip, popover, lightbox. DESIGN.md-themed, persists to localStorage. Use when the user wants any interactive widget. Trigger with 'tabs', 'accordion', 'filter pills', 'stepper', 'sortable table', 'kanban', 'before/after', 'live editor', 'checklist', 'theme switcher', 'TOC', 'search box', 'tooltip', 'modal', 'popover', 'lightbox'.

Concept explained as a LIVE manipulable demo — parameter sliders drive an inline-SVG visual (bars/dial/curve) that re-paints instantly, beside a live values table and glossary. The interactive sibling of a written explainer: prose tells, this lets the reader turn the knobs and watch the mapping respond. Use for an interactive concept demo, a manipulable explainer, a 'play with the parameters' widget, or an interactive figure that teaches a relationship. Trigger with 'interactive concept demo', 'manipulable explainer', 'live demo widget', 'let me tune the parameters', 'show how X changes with Y', 'interactive figure'.

Router skill for themed, selectable HTML diagrams from a JSON scene graph. Routes to 5 sibling skills (flow / architecture / time / network / ASCII) and owns the shared scene-graph engine, theming, and interaction primitives. Use when the user asks for any diagram. Trigger with 'diagram', 'flowchart', 'architecture diagram', 'sequence', 'state diagram', 'sankey', 'swimlane', 'mind map', 'timeline', 'gantt', 'ASCII diagram'.

Self-contained, DESIGN.md-themed ticket-triage kanban editor whose tickets the user drags between Now / Next / Later / Cut columns, then exports the resulting priority ordering as markdown back to the agent. Use when triaging tickets, prioritizing a backlog, sorting work into priority buckets, or building a drag triage board. Trigger with 'triage board', 'triage tickets', 'prioritize backlog', 'Now/Next/Later/Cut', 'drag tickets between columns', 'kanban triage'.

Prompt/template tuner — an editable template with {{variable}} slots, a per-variable input panel, and a LIVE re-rendered preview of the filled result that updates as you type. Slots are highlighted by re-painting their own span (no injected overlay). Export rides the existing runtime selection channel: it pushes one kind:"element" entry into window.veSelection carrying {template, values, rendered}. Graphic style is fully DESIGN.md-driven (--vc-* tokens), light + dark both. Use when tuning a prompt, filling a template, building a prompt tuner, or showing an editable template with variable slots. Trigger with 'prompt tuner', 'template tuner', 'editable template', 'fill in the template', 'prompt template editor', 'variable slots'.

High-fidelity code diff viewer (vendored Pierre @pierre/diffs) — Shiki syntax highlight, split/unified layout, line virtualizer, line comments, accept/reject UI, merge-conflict resolver, streaming code. Use when the user wants a full-featured visual diff that exceeds the lightweight amvcp-code-diff: PR review, huge files, merge conflicts, streaming code. Trigger with 'pierre diff', 'rich diff viewer', 'huge file diff', 'merge conflict viewer'.

Slim router for the 4-skill wireframe family: amvcp-wf-fidelity (fidelity ramp + 19-class kit), amvcp-wf-devices (iOS/Android/MacBook/browser bezels), amvcp-wf-screens (multi-screen nav + domain screens), amvcp-wf-archetypes (4 page skeletons + pattern families). Use when planning a wireframe. Trigger with 'wireframe', 'mockup', 'prototype', 'lo-fi', 'clickable prototype', 'device frame', 'fidelity ramp'.

Smart router for the AI Maestro Visual Communicator plugin. Use when the user wants to view, comment on, or interact with ANY input (file path, URL, plain text, or skill+args) — the router classifies by extension + content sniff and dispatches to the right sub-skill. Always uses iTerm split-pane when detected. Preserves markdown reports verbatim (routes to /amvcp-interactive-report). Trigger with /amvcp-show, 'show this', 'visualize this report', 'open this in the viewer', 'route this'.

Router skill for charts and KPI dashboards — chart surface split into 5 focused siblings (bar, line-area, part-of-whole, multi-dim, dashboards). Use when the user wants ANY chart task (compare categories, trend over time, parts of a whole, multi-dim heatmap/waterfall/funnel, KPI grid, sparkline) to route to the right sibling. Trigger with 'chart', 'dashboard', 'KPI grid', 'sparkline', 'gauge', 'bullet chart', 'funnel', 'heatmap', 'metrics'. Pie charts auto-remap to sorted bars.

Author Mermaid and Graphviz (.ve-graph) HTML diagrams with click-to-select wiring. Use when the user asks for an architecture, flowchart, sequence, ER, state, mindmap, class, C4, or any node/edge visualization. Trigger with /amvcp-generate-web-diagram or keywords flowchart, architecture, sequence, ER, mindmap, Mermaid.

Author magazine-quality slide decks as one self-contained interactive HTML from a JSON deck contract. Letterbox stage, 16 layouts, 5 moods, 4 transitions, dependency-free (no reveal.js, no GSAP). Use when the user asks for a presentation, slide deck, talk slides, pitch deck. Trigger with 'slide deck', 'presentation', 'pitch deck', 'turn this into slides', '/amvcp-generate-slides'.

Foundation animation contract — motion tokens, easing curves, reduced-motion gate, decorative-vs-informational binary, fill-mode, keyframe catalog, CSS injection bootstrap, atom stamping, dynamic refresh APIs, anti-patterns, OT-08 plan template. Tier-1 substrate every other animation sub-skill builds on. Use when authoring or fixing any amvcp animation surface. Trigger with 'motion tokens', 'easing', 'reduced motion', 'animation contract', 'keyframe'.

Component variant-matrix renderer — a self-contained, DESIGN.md-themed sheet showing every size · state · intent of ONE UI component, laid out for review. Each variant cell is a runtime selection atom (selection / highlight / triple-state feedback / comment come from the runtime, never reinvented); graphic style is fully DESIGN.md-driven, light + dark both; per-cell click-to-copy snippet for export. Use when showing a component's variants, comparing component states, or building a variant matrix. Trigger with 'component variants', 'component states', 'variant matrix', 'show every state of this button', 'every size/state/intent of this card'.

Cross-skill animation handoffs + cross-cutting concerns — chart skill entrance + counter primitive, diagram skill flow-edge reveal, interactive-control stepper spin, slide-deck entrance moods + inter-slide transitions, print + PDF export stylesheet, touch + keyboard parity. Use when wiring animation into another amvcp skill or handling print/touch. Trigger with 'chart entrance', 'flow diagram reveal', 'slide transitions', 'print', 'PDF export', 'touch parity'.

Performance + advanced animation primitives — off-screen loop pause (AN-11), idle-deferred initialization two-tier contract (AN-11), delta-time rAF loop primitive (AN-12), re-scanning dynamic content, live reduced-motion-preference toggles. Layer 6 of the animation contract. Use when budgeting animation CPU or wiring custom rAF loops. Trigger with 'loop pause', 'idle defer', 'rAF loop', 'delta time', 'pause off-screen'.

Bar-family charts: bar, stacked-bar, diverging-bar, lollipop, dot-plot, connected-dot-plot, bullet, segmented-bar. Categorical magnitude comparison via length encoding. Use when the reader compares magnitudes across a small set of named categories, signed values, before/after pairs, or KPI vs target. Trigger with 'bar chart', 'stacked bar', 'diverging bar', 'lollipop', 'dot plot', 'connected dot plot', 'bullet chart', 'segmented bar', 'compare categories'.

Router skill for the design-tokens family — routes to the right sibling. Color ramp / role maps → amvcp-tokens-color. Spacing / elevation / motion / z-index / utilities → amvcp-tokens-scales. Brand presets + personality + hot-swap → amvcp-tokens-presets. Anti-slop gate → amvcp-tokens-anti-slop. Click-to-copy contact sheet → amvcp-tokens-contact-sheet. Use when scaffolding design tokens. Trigger with 'design tokens', 'design system', 'style guide', 'color ramp', 'theme generator'.

Network and hierarchy diagrams — sankey proportional flows, radial mind maps, top-down org/file-system/class tree hierarchies. JSON scene-graph engine, themed off DESIGN.md `--vc-*` tokens, every node/edge a click-to-select atom. Use when visualizing magnitude bands of flow, branching concept maps, or tree hierarchies that fit one screen. Trigger with 'sankey', 'mind map', 'fishbone', 'concept map', 'tree diagram', 'org chart', 'file tree', 'class hierarchy'.

Preview an HTML page or render a Mermaid diagram as SVG inside an iTerm2 vertical split-pane (Web Browser profile) right next to the terminal. Aborts cleanly on any non-iTerm2 host (Claude Desktop, Terminal.app, VS Code, tmux, SSH, web shells). Use when the user wants to preview an HTML file or see a Mermaid diagram rendered without leaving the terminal. Trigger with 'show me a preview', 'preview the HTML', 'render this as SVG'.

Application-shell layout for visual-communicator pages — the IDE 3-panel shell (left sidebar + centre main + right inspector + collapse toggle). Use when the user asks for an IDE-style page, app shell, sidebar layout, collapsible panel, or 3-panel tool UI. Trigger with 'IDE shell', '3-panel layout', 'sidebar shell', 'app shell', 'collapsible sidebar', 'tool UI', 'inspector panel'.

Router skill for layouts — layout surface split into 5 focused siblings (grids+foundation, shells, kpi, chrome, print-hero). Use when the user wants ANY layout task (grid, sidebar, dashboard, KPI, TOC, sticky header, print, hero, device mockup) to route to the right sibling. Trigger with 'layout', 'grid', 'sidebar', 'dashboard', 'TOC', 'print', 'A4', 'sticky header', 'glassmorphism', 'hero', 'device mockup', 'KPI', 'IDE shell'.

Author math, chemistry, and TikZ HTML pages with KaTeX (mhchem) and TikZJax (binary trees, FSMs, geometric regions). Use when the user asks to render an equation, chemistry reaction, integral, summation, matrix, ODE, tensor, TikZ figure, or geometric proof. Trigger with 'render this equation', 'LaTeX', 'KaTeX', 'math', 'chemistry equation', 'TikZ figure'.

Render an interactive JS-regex visualizer + editor (vendored regex-vis): tree of nodes, inline edit, shift+click extend, Cmd-Z/Cmd-Shift-Z undo/redo, live result. Use when the user asks to visualize, explain, debug, or interactively edit a regex. Trigger with 'visualize this regex', 'regex editor', 'regex tree', 'explain this regex', 'edit this pattern', 'regex visualizer'.

Deploy a generated HTML page to Vercel and get a live public URL the user can share. Use when the user asks to deploy, publish, share online, get a public URL, or ship a generated page so others can view it. Trigger with 'deploy to vercel', 'share this page', 'publish online', 'get a public URL', 'host this somewhere', or '/amvcp-share-page'.