yield-chart

Render dark-themed React/Recharts charts for delivery yield and loss metrics.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Delivery processes generate a lot of unresolved noise: items get discarded at different workflow tiers, invested capacity is wasted, and teams lack a single, clear visualization that quantifies where and how much is being lost. This skill turns analyze_yield results into a focused, dark-themed dashboard that exposes yield rates, loss points by tier, and average age at abandonment so teams can prioritize improvement work by cost and severity.

Core Features & Use Cases

  • Yield Comparison: Side-by-side yield dials and a bar chart that compare overall and stratified (Story, Activity, Bug, etc.) yield rates with threshold-based coloring (healthy/marginal/critical).
  • Loss Breakdown: Tiered abandonment counts with severity coloring, detailed loss cards showing loss rate and average age at abandonment, and type toggles to inspect per-issue-type behavior.
  • Age at Abandon: Grouped bars showing average age at abandonment for Demand, Upstream, and Downstream tiers across all types to quantify wasted investment.
  • Integration & Summary: Extends mcs-charts-base for shared styling and UI primitives, requires confirmed tier mappings, and always renders a persistent summary table and badge row for quick diagnostics.

Quick Start

Use the yield-chart to render a "Delivery Yield" visualization from an analyze_yield result present in the conversation.

Frequently Asked Questions about yield-chart

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

FAQPage Schema
How do I visualize Jira project delivery yield and abandonment metrics in React?

To visualize Jira project delivery yield, you can use a React and Recharts based skill to render dark-themed dashboards. It processes analyze_yield outputs to display yield comparison, loss breakdown by tier, and average age at abandonment metrics.

What is delivery yield and how does age at abandonment highlight wasted capacity?

Delivery yield measures the percentage of items successfully completed versus abandoned, while age at abandon tracks the average time invested before discarding an item. Visualizing these metrics together highlights where wasted capacity occurs across different workflow tiers.

How do I render yield comparison charts with threshold-based coloring using Recharts?

You can render yield comparison charts by applying yieldColor thresholds to stratified data. This colors yield rates as healthy when greater than or equal to 0.80, marginal at 0.65, and critical below 0.65, applying dark-themed styling via mcs-charts-base primitives.

Do I need mcs-charts-base and confirmed tier mappings to render abandonment loss breakdowns?

Yes, rendering abandonment loss breakdowns requires mcs-charts-base for shared styling and UI primitives, alongside confirmed tier mappings. The visualization specifically needs data.stratified structures with lossPoints per tier to correctly format the breakdown views.

Can I display loss breakdowns by issue type for Jira board data?

Yes, you can display loss breakdowns by issue type for Jira board data. The visualization supports type toggles that allow you to inspect per-issue-type behavior, showing tiered abandonment counts with severity coloring and detailed loss cards.