flow-debt-chart

Render a dark-themed Flow Debt chart from analyze_flow_debt output.

15|3|Updated Jan 24, 2026
One-click install
npx skills add https://github.com/bbak/mcs-mcp --skill flow-debt-chart
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: flow-debt-chart
Source: https://github.com/bbak/mcs-mcp/tree/main/docs/skills/Flow-Debt-recharts
Command: npx skills add https://github.com/bbak/mcs-mcp --skill flow-debt-chart

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill makes systemic WIP pressure visible by turning analyze_flow_debt results into a clear, dark-themed chart that highlights weekly or monthly imbalances between arrivals and departures and their accumulated impact on cycle time.

Core Features & Use Cases

  • Weekly Debt View: Bar chart of per-bucket debt with color-coded cells and a zero reference line to show signed weekly imbalances.
  • Arrival vs Departure View: Two-area composed chart comparing arrivals and departures with average reference lines to reveal persistent rate mismatches.
  • Cumulative Debt View: Running-sum area chart that surfaces accumulating systemic pressure as an early warning of cycle time inflation.
  • Use Case: Product managers and delivery analysts use this to detect when commitment exceeds delivery capacity and to prioritize interventions before cycle time deteriorates.

Quick Start

Generate a Flow Debt chart from the analyze_flow_debt result for my board using weekly buckets and display the three views with stat cards and the weekly breakdown table.

Frequently Asked Questions about flow-debt-chart

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

FAQPage Schema
How do I visualize flow debt to show WIP pressure from arrivals and departures?

You can visualize flow debt by rendering a dark-themed chart that compares weekly or monthly arrivals versus departures, displays per-bucket debt with color-coded cells, and tracks running cumulative debt to surface systemic WIP pressure.

What is the best way to track cumulative flow debt in React for delivery analytics?

Using Recharts in React, you can plot a running-sum area chart of cumulative flow debt that aggregates weekly or monthly board-level buckets, providing an early warning signal for cycle time inflation as commitment exceeds delivery capacity.

How do I create an arrivals vs departures chart to detect rate mismatches?

You can create a two-area composed chart comparing arrivals and departures with average reference lines to reveal persistent rate mismatches, helping product managers detect when commitment exceeds delivery capacity before cycle time deteriorates.

Can I use Recharts to build a weekly WIP debt bar chart with a zero reference line?

Yes, Recharts supports rendering a weekly debt view as a bar chart with color-coded cells and a zero reference line to show signed weekly imbalances between arrivals and departures for board-level delivery analytics.

What data format do I need to generate a flow debt chart with stat cards and badges?

You need input shaped as data.flow_debt.buckets containing label, arrivals, departures, and debt fields, which the chart processes to compute cumulative sums, per-bucket color rules, stat cards, and badge-driven system state classification.

Why does cumulative flow debt matter for predicting cycle time inflation?

Cumulative flow debt accumulates when arrivals consistently exceed departures, creating systemic WIP pressure that serves as an early warning indicator of cycle time inflation before delivery performance visibly deteriorates.