Agent skill

maestro:visual

Create interactive HTML visualizations of maestro state and debug data

View SKILL.md on GitHub Repository
Stars 26
Forks 4

Install this agent skill to your Project

npx add-skill https://github.com/ReinaMacCredy/maestro/tree/main/skills/built-in/maestro:visual

SKILL.md

maestro:visual

Render maestro state or debug data as self-contained interactive HTML files. All visualizations support dark/light mode, open in any browser, and require no build step.

MCP Tools

maestro visual -- Maestro State Visualizations

Renders data gathered from maestro services. Requires an active feature.

maestro visual --type plan-graph --feature my-feature --json
maestro visual --type status-dashboard --json  # uses active feature
Type What it shows
plan-graph Mermaid flowchart of task dependencies. Node shapes encode status (pending/claimed/done/blocked/review/revision).
status-dashboard KPI cards (task counts per status), progress bar, runnable/blocked lists, memory + doctrine stats.
memory-map Grid of memory cards color-coded by category, sized by priority. Mermaid pie chart for category distribution.
execution-timeline Timeline of completed tasks with execution insights. Knowledge flow graph. Doctrine effectiveness table.
doctrine-network Mermaid graph of doctrine items connected by shared tags. Effectiveness metrics table.

maestro debug-visual -- Debug Visualizations

Renders agent-provided structured data. No feature context needed.

maestro debug-visual --type component-tree --title "React Component Hierarchy" --data '{ "nodes": [...] }' --json
Type What it shows
component-tree Recursive tree with expand/collapse. Error boundaries highlighted. Props viewable.
state-flow Timeline of state mutations with inline JSON diff. Filterable by action.
error-cascade Error tree with caught/uncaught distinction. Collapsible stack traces.
network-waterfall Chrome DevTools-style waterfall of HTTP requests. Color-coded by status.
dom-diff Side-by-side panels with line-by-line diff highlighting.
console-timeline Log entries with severity coloring. Level filter controls.

CLI Commands

bash
maestro visual plan-graph --feature my-feature
maestro visual status-dashboard
maestro debug-visual component-tree --data '{"nodes":[...]}'
maestro debug-visual network-waterfall --data /path/to/data.json --no-open

When to Use Which Type

  • Understanding the plan: plan-graph shows task dependencies at a glance
  • Progress check: status-dashboard gives a quick KPI overview
  • Knowledge audit: memory-map shows what the project remembers
  • Post-mortem: execution-timeline traces what happened across tasks
  • Process improvement: doctrine-network shows which rules are effective
  • Debugging UI: component-tree + error-cascade for React/Vue issues
  • Debugging state: state-flow for tracking down mutation bugs
  • Debugging network: network-waterfall for API timing issues
  • Visual regression: dom-diff for expected vs actual markup
  • Log analysis: console-timeline for filtering through log noise

Output

All files are written to ~/.maestro/visuals/ with descriptive filenames. Files auto-rotate at 100 (oldest are pruned). Browser opens automatically unless --no-open or autoOpen: false.

CSS Customization

The visual system uses CSS custom properties for theming. For advanced customization, load the visual-explainer skill which documents the full CSS pattern library (section cards, grid layouts, animations, depth tiers).

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

ReinaMacCredy/maestro

maestro-skill-author

Create, update, or debug maestro built-in skills. Covers SKILL.md frontmatter, reference directory structure, step-file architecture, build-time embedding, naming conventions, alias management, and registry validation. Use when creating a new maestro built-in skill, modifying an existing SKILL.md, adding reference files, debugging skill loading failures, updating the skills registry, or working on the skills full port. Also use when frontmatter validation fails, skills don't appear in skill-list, or reference files fail to load.

26 4
Explore
ReinaMacCredy/maestro

maestro:brainstorming

Use before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.

26 4
Explore
ReinaMacCredy/maestro

mcp-builder

Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).

26 4
Explore
ReinaMacCredy/maestro

maestro:plan-review-loop

Deep-review any plan (maestro, Codex, Claude Code plan mode, or plain markdown) using iterative subagent review loops with BMAD-inspired adversarial edge-case discovery. Spawns reviewer subagents that find issues using pre-mortem, inversion, and red-team techniques, auto-fixes them with structured fix strategies, and re-reviews until the plan passes with zero actionable issues. Use when the user says 'review the plan', 'deep review', 'check the plan thoroughly', 'review loop', 'validate before approving', or wants rigorous plan validation before execution. Also use proactively before plan-approve when the plan is complex or high-risk.

26 4
Explore
ReinaMacCredy/maestro

maestro:research

Structured research workflow for maestro features. Guides tool selection across three tiers (codebase exploration, Context7 for library docs, NotebookLM for deep analysis), defines research patterns, finding organization via memory_write, and completion criteria. Use during the research pipeline stage after feature_create and before plan_write. Also use when investigating a problem space, comparing technical approaches, gathering context on unfamiliar code, or needing to understand external library APIs before making architectural decisions.

26 4
Explore
ReinaMacCredy/maestro

cli-for-agents

Designs or reviews CLIs so coding agents can run them reliably: non-interactive flags, layered --help with examples, stdin/pipelines, fast actionable errors, idempotency, dry-run, and predictable structure. Use when building a CLI, adding commands, writing --help, or when the user mentions agents, terminals, or automation-friendly CLIs.

26 4
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results