One-click install
npx skills add https://github.com/Emasoft/ai-maestro-visual-communicator-plugin --skill amvcp-dashboards
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: amvcp-dashboards
Source: https://github.com/Emasoft/ai-maestro-visual-communicator-plugin/tree/main/skills/amvcp-dashboards
Command: npx skills add https://github.com/Emasoft/ai-maestro-visual-communicator-plugin --skill amvcp-dashboards

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill gives you reliable KPI dashboard primitives and the shared chart-renderer contracts needed to build consistent, interactive multi-chart dashboard pages without guessing runtime behavior.

Core Features & Use Cases

  • Dashboard-ready composition: Stack KPI metric cards with multiple chart types into coherent dashboard layouts using consistent figure semantics and rendering order.
  • Cross-cutting chart infrastructure: Provides the shared “chart fence” protocol expectations, palette + ramp behavior, tooltip/hover mechanics, selection payload contract, animations, and design token integration.
  • Interactive selection + feedback loops: Ensures every datapoint/card mark participates in the runtime selection/comment/decision mini-pill workflow, with predictable error degradation for malformed specs.

Quick Start

Load the dashboards chart infrastructure and render a KPI grid by writing a chart:metric-cards@1 fenced block, optionally followed by additional chart fences on the same page, then opening the generated HTML in a browser.

Frequently Asked Questions about amvcp-dashboards

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

FAQPage Schema
How do I build interactive KPI dashboards with multiple chart types?

Build interactive KPI dashboards by stacking metric cards and multiple chart types using chart-fenced JSON specs, loading design tokens, runtime, and chart renderer scripts sequentially to generate browser-viewable HTML pages.

What is the chart fence protocol for rendering KPI metric cards?

The chart fence protocol uses a chart:<type>@<version> syntax with validated JSON spec schemas to render KPI metric cards, ensuring consistent figure semantics and predictable error degradation for malformed specs.

How do I add selection payloads and tooltips to interactive dashboard charts?

Add selection payloads and tooltips to interactive dashboard charts by utilizing the shared chart-renderer infrastructure, which provides hover mechanics, selection payload contracts, and datapoint selection workflows via a public window.amvcpChart API.

Does this dashboard composition tool require specific script loading order?

Yes, dashboard composition requires loading chart module scripts in a specific order: design tokens first, runtime next, and the chart renderer last, ensuring theme-aware rendering and shared palette behavior function correctly.

How do KPI metric cards handle delta and trend semantics in dashboard grids?

KPI metric cards handle delta and trend semantics in dashboard grids by using validated JSON spec schemas to define figure semantics, allowing each card mark to participate in runtime selection and decision workflows with visible error degradation.