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.