ai-maestro-visual-communicator-plugin

Plugin ai-maestro-visual-communicator-plugin in Emasoft/ai-maestro-visual-communicator-plugin. Commands read from the repo's manifest — 1 month ago.

Skills (79)

• verify

  Run the full dev-browser test gate before committing. Claude Code commit guidance looks for a skill named verify before commits other than docs-only and tests-only.

• amvcp-anim-ambient-hover

  Ambient + hover polish + loading states — four floating presets (float-y, breathe, orbit, rotate), animated link underline, 3D card tilt, hover lift, spring overshoot, bobbing card stack, pulse-ring loading dot, shimmer skeleton. Layer 4 + 5 of the animation contract. Use when adding ambient motion,

• amvcp-anim-entry-scroll

  Entry + scroll-triggered animation — staggered cascade, fire-once IO reveal (4 variants), stat counter, parallax tiers, scroll progress bar, scroll-snap, pinned section, native scroll-driven timelines, clip wipe, scale pop, SVG line draw. Layer 2 + 3 of the animation contract. Use when adding entran

• amvcp-anim-foundation

  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 build

• amvcp-anim-handoffs

  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

• amvcp-anim-perf

  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 anima

• amvcp-anim-sandbox

  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

• amvcp-animation

  Router skill for the animation surface — animation split into 5 focused siblings (foundation, entry+scroll, ambient+hover, perf, handoffs). Use when the user wants ANY animation task (entrance, scroll reveal, counter, parallax, hover lift, skeleton, loop-pause, slide transitions) to route to the rig

• amvcp-charts-and-dashboards

  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

• amvcp-charts-bar

  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

• amvcp-charts-line-area

  Line-and-area chart family: line, area, step-area, slope, bump. Trend over time, before-vs-after for many items, and rank-over-time. Catmull-Rom smoothing, OKLCH gradient fills, orthogonal step paths. Use when the reader needs trends, ranks, or change-over-N-points. Trigger with 'line chart', 'area

• amvcp-charts-multi-dim

  Multi-dimensional charts: radar, heatmap, matrix, activity-heatmap, mekko, funnel, waterfall. Two-axis intensity surfaces, multi-criterion polygons, Marimekko width-by-total stacks, cumulative bridges, and stage drop-off. Use when the data has 2+ encoding axes or a process-flow narrative. Trigger wi

• amvcp-charts-part-of-whole

  Part-to-whole charts: donut, gauge, harvey-ball. Sanctioned circular forms for part-of-whole ratios, value-vs-max gauges, and McKinsey-style qualitative rating rows. Pie charts banned (auto-remap to sorted bar). Use when the reader needs a ratio, a percentage gauge, or a qualitative rating glyph. Tr

• amvcp-choice-tables

  Render data tables that ask the user a question — radio (single) or checkbox (multi) per row, Submit returns selection to the agent. Use when picking from a list, comparing strategies, voting, or answering a structured question. Trigger with 'let me pick', 'comparison table to choose from', 'form to

• amvcp-code-diff

  Code diff surface — unified + split diff blocks, 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

• amvcp-code-fences

  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 wit

• amvcp-code-highlight

  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', 'wa

• amvcp-code-snippets

  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',

• amvcp-code-syntax-chrome

  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

• amvcp-code-syntax-engine

  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 debuggin

• amvcp-code-syntax

  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 wit

• amvcp-component-variant-matrix

  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);

• amvcp-concept-demo

  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 resp

• amvcp-dashboards

  KPI dashboards plus the cross-cutting infrastructure every amvcp-charts-* sibling depends on: metric-cards, sparklines, dashboard recipes, fence protocol, palette engine, selection contract, animations, tooltip, error degradation, design tokens, public API. Use when composing dashboards, KPI grids,

• amvcp-design-tokens

  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. Clic

• amvcp-diag-architecture

  Architecture and dependency diagrams — layered architecture canvas (groups as tiers, bezier cross-layer edges), phase-graph (cards + dependencies + chain-highlight), C4 systems, dependency graphs. Cyan-on-navy blueprint engineering theme. JSON scene-graph engine; every node/edge a click-to-select at

• amvcp-diag-ascii

  ASCII / Unicode plaintext diagrams — process flow, state machine, tree/hierarchy. No-JS, copy-pasteable themed pre blocks that page-expand. Build-time alignment validator. Use when the output must survive without JS, paste into a terminal or comment, or be a 3-second inline sketch. Trigger with 'ASC

• amvcp-diag-flow

  Process and flow diagrams — process-flow, swimlanes, decision trees, step-strip, scroll-reveal, fan-out/fan-in, data-flow, FIFO queue, animated edges. JSON scene-graph engine; click-to-select atoms. Use when scaffolding any step-by-step process, journey map, or decision pathway. Trigger with 'flowch

• amvcp-diag-network

  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,

• amvcp-diag-time

  Time-axis diagrams — sequence (actors + message arrows + activation bars), state machine (states + guarded transitions + self-loops), timeline (horizontal milestones or vertical history), Gantt bars (tasks + dependencies + today line). JSON scene-graph engine, themed off DESIGN.md `--vc-*`. Use when

• amvcp-diagram

  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

• amvcp-doc-wiki

  Turns a project's design/memory markdown — TRDD task docs, the PRRD rules file, the kanban board, and wikimem notes — into ONE self-contained navigable HTML wiki with Wikipedia-style cross-file links, browser back/forward, a breadcrumb trail, and search; opens via file://, no server, light+dark. Use

• amvcp-editor-kanban

  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 bu

• amvcp-editor-template

  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 chann

• amvcp-editor-toggles

  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 edit

• amvcp-form-inputs

  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 choi

• amvcp-graph-diagrams

  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, E

• amvcp-icon-svg

  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 'ic

• amvcp-interactive-controls

  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', 'filte

• amvcp-iterm2-preview

  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

• amvcp-layout-chrome

  Persistent page chrome — sticky header (opaque + glass), section-numbered headers, fluid clamp() headings, sticky toolbar, scroll-spy + sticky-sidebar + right-margin + prefilled TOC variants. Use when the user asks for a sticky header, persistent navigation, TOC, scroll-spy, breadcrumbs, toolbar, or

• amvcp-layout-grids

  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, gal

• amvcp-layout-kpi

  KPI rows, stat bands, metric strips, and the 12-column dashboard grid for visual-communicator pages. Use when the user asks for an at-a-glance KPI / metric strip, a stat band, a dashboard header, or a 12-column metrics dashboard layout. Trigger with 'KPI row', 'KPI strip', 'metric strip', 'stat band

• amvcp-layout-print-hero

  Print and decorative-hero layouts — A4 page rules, @media print reset, cover pages, page-break helpers, print-color-adjust, hero with radial glows, device-mockup frames, rotated comparison hero. Use when the user asks for print, PDF, A4, cover page, page break, hero background, device mockup, or two

• amvcp-layout-shells

  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',

• amvcp-layout

  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', '

• amvcp-math-and-latex

  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', 'LaTe

• amvcp-modal-comments

  Render an agent report as interactive HTML with per-element comment threads and v3 approve/reject toggles. Use when the user wants to comment inline on each finding, reply per-paragraph, or accept/reject items individually. Trigger with 'make commentable', 'interactive report', '/amvcp-interactive-r

• amvcp-pierre-diff

  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:

• amvcp-prose-pages

  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

• amvcp-regex-vis

  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',

• amvcp-self-debug-rules

  Self-debugging checklist for visual-communicator pages. Use when verifying a rendered HTML/SVG visualization (report, slide, diagram, table) adheres to the universal rules from prior debug sessions. Trigger with 'verify the visualization', 'self-debug', 'check the rendered page', 'audit the visualiz

• amvcp-share-pages

  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', 'h

• amvcp-show

  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 whe

• amvcp-slide-decks

  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

• amvcp-tables-cells-badges

  Per-cell decoration: 3-state decision pill, risk dot/severity badge, status pill key-value, compact metric chip strip, stat-card warn modifier, colored cell board, Unicode icon headers, impact mini-table. Use when decorating individual cells with badges/pills/chips. Trigger with 'decision pill', 'ri

• amvcp-tables-matrix-compare

  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 tabl

• amvcp-tables-primitives

  Core table primitives for visual-communicator pages — table modes, light/dark themes, no-nested-scrollbars rule, idempotent init, zebra borders, token spec table, sample readability dataset. Use when scaffolding the basic table layer of any page. Trigger with 'table mode', 'table theme', 'zebra bord

• amvcp-tables-sort-virt

  Sortable tables, big-data virtualization, sort cycles, natural string sort, numeric cell parser, frozen sticky columns, CSV export RFC-4180. Use when adding sort/virtualization/CSV-export to a table. Trigger with 'sortable table', 'virtualized table', 'sort cycle', 'natural sort', 'numeric cell pars

• amvcp-tables-special

  Special table forms: before/after 2-column, kanban-as-table, pro/con tradeoff grid, spanning cells grid, table-form scope skip, row move not clone, keyboard accessibility. Use when scaffolding non-traditional table shapes (before/after, kanban, pro-con). Trigger with 'before after table', 'kanban ta

• amvcp-tables

  Router skill for tables — table surface split into 5 focused siblings (core, sort+virt, matrix+compare, cells+badges, special). Use when the user wants ANY table task (sortable, virtualized, matrix, decision pill, kanban) to route to the right sibling. Trigger with 'table', 'sortable table', 'data t

• amvcp-tokens-anti-slop

  Consolidated anti-AI-slop gate for visual-communicator tokens — banned colors (AI purple/violet, pure black/white), banned primary fonts (Inter, Roboto, Open Sans), banned patterns (gradient backgrounds, double drop-shadows), `lintTokenSet` / `lintHtml` / `lintLiveDocument` APIs with live `data-vc-s

• amvcp-tokens-color

  Color generators + role maps for visual-communicator tokens — OKLCh perceptual ramp, neutral scale, golden-angle categorical, P3 wide-gamut, WCAG contrast, semantic role maps (badge, activity, graph-node, icon tint), derived fg/bg/border/icon split, MD3 state opacities, 3-tier dark text hierarchy. U

• amvcp-tokens-contact-sheet

  Token contact-sheet renderer — a self-contained, DESIGN.md-themed 'living design page' showing every token visually with click-to-copy: WCAG-annotated color grid, type specimens, true-pixel spacing bars, radius + elevation cards, motion chips, z-index plates, state demos, code panel. Use when showin

• amvcp-tokens-presets

  Named dual-theme presets + personality tooling — 14 brand presets (heritage, factory-dark, wireframe-grayscale, cjk-claude, ...) each a complete DESIGN.md fixture, 9-category taxonomy, personality deltas (warmer / cooler / playful / minimal), hot-swap, scoped theming, dual-theme contract, syntax tok

• amvcp-tokens-scales

  Algorithmic scale generators + token vocabulary — phi spacing, MD3 + cinematic elevation, motion library (8 durations × 8 easings), 9-level z-index, Tailwind utility classes, 5-layer naming, `@layer` cascade (primitive < semantic < component), centralised pattern, `var()` delegation chain. Use when

• amvcp-typo-code-keys

  Code, key, and time typography for visual-communicator pages — inline code chips, pre blocks, kbd/samp/var, keyboard shortcuts (single key, combo, multi-step chord with modifier glyphs), time element + date-column spreadsheet table. Use when styling code snippets, keyboard shortcuts, or time/date co

• amvcp-typo-editorial

  Editorial typography register for visual-communicator pages — eyebrow/overline labels, lead paragraphs, drop caps, pull quotes/blockquotes, figures/captions, badge/pill/chip typography, emphasis/strong/mark. The publishing register on top of foundation. Use when adding editorial elements (drop caps,

• amvcp-typo-foundation

  Foundation typography for visual-communicator pages — type scale, font pairings, semantic hierarchy, variable fonts, spacing/rhythm, responsive fluid headings. The Tier-1 substrate other typography skills build on. Use when setting up the type substrate of any page (scale, fonts, hierarchy, spacing)

• amvcp-typo-i18n-print

  I18n + print + accessibility typography for visual-communicator pages — html lang, BCP-47 tags, RTL, CJK font bridge (DT-25), at-page print stylesheet, no-print utilities, semantic HTML, focus rings, reduced-motion. Use when setting up i18n, print stylesheets, or a11y features. Trigger with 'html la

• amvcp-typo-microtype
• amvcp-typo-structure
• amvcp-typography
• amvcp-visual-communication
• amvcp-wf-archetypes
• amvcp-wf-devices
• amvcp-wf-fidelity
• amvcp-wf-screens
• amvcp-wireframe

Slash commands (10)

• /ai-maestro-visual-communicator-plugin:amvcp-diff-review

  Generate a visual HTML diff review — before/after architecture comparison with code review analysis

• /ai-maestro-visual-communicator-plugin:amvcp-fact-check

  Verify the factual accuracy of a document against the actual codebase, correct inaccuracies in place

• /ai-maestro-visual-communicator-plugin:amvcp-generate-slides

  Generate a stunning magazine-quality slide deck as a self-contained HTML page

• /ai-maestro-visual-communicator-plugin:amvcp-generate-visual-plan

  Generate a visual HTML implementation plan — detailed feature specification with state machines, code snippets, and edge cases

• /ai-maestro-visual-communicator-plugin:amvcp-generate-web-diagram

  Generate a beautiful standalone HTML diagram and open it in the browser

• /ai-maestro-visual-communicator-plugin:amvcp-interactive-report

  Render an agent report as an interactive HTML page with per-finding reply threads, then process the user's replies and re-render with Claude's responses inline

• /ai-maestro-visual-communicator-plugin:amvcp-plan-review

  Generate a visual HTML plan review — current codebase state vs. proposed implementation plan

• /ai-maestro-visual-communicator-plugin:amvcp-project-recap

  Generate a visual HTML project recap — rebuild mental model of a project's current state, recent decisions, and cognitive debt hotspots

• /ai-maestro-visual-communicator-plugin:amvcp-respond-to-comment

  Read pending comment-thread turns from the v2 modal-comment queue and write per-turn agent replies that the open page picks up via /__ve-reply polling.

• /ai-maestro-visual-communicator-plugin:amvcp-share-page

  Deploy a generated ai-maestro-visual-communicator-plugin HTML page and return a live Vercel URL

Similar plugins