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.…
Emasoft/ai-maestro-visual-communicator-plugin
- Latest recorded source activity
- SkillsMP catalog refreshed
- skills collected
- 79
- GitHub stars
- 0
- GitHub forks
- 0
Install with an AI assistant
Copy this prompt into the AI assistant you're using.
Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/Emasoft/ai-maestro-visual-communicator-plugin.Loading the repository README…
Skills in this repository
Showing 40 of 79 collected skills.
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',…
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…
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.
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,…
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;…
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',…
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…
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…
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.…
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…
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…
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…
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…
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…
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',…
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.…
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…
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…
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,…
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…
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…
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…
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,…
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.…
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…
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,…
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…
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…
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…
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…
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…
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…
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…
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…
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 +…
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…
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…
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…
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…