prune-design

Rendering Prune dashboards and reports

When to trigger

You are rendering a Prune dashboard or financial report as a visual artifact. This skill is the how; the Prune MCP server provides the what.

Pipeline

1. Fetch the data. Call get_dashboard(dashboard_id, entity_id) from the Prune MCP. It returns { id, name, startMonth, endMonth, positions[], charts[], inputCharts[] }. Time-series values are pre-resolved inside charts[].dataGroups[].data[].monthData and charts[].highlight.monthData.

2. Read tokens.md for colors, typography, spacing, and number formatting.

3. For each chart, look up its widget spec based on the first dataGroups[].type. Specs live in widgets/:

   • Bar, Line → widgets/kpi-card.md (the dashboard card with a sparkline and a highlight number, like "Income vs Expense" on a Prune dashboard)
   • Donut, CategoryBreakdown → widgets/donut.md
   • Runway → widgets/runway.md
   • Scorecard → widgets/scorecard.md
   • FundsFlowSankey → widgets/sankey.md
   • TextBlock → widgets/text-block.md (content lives in dataGroups[0].metadata.content)
   • InputCharts (from inputCharts[]) → widgets/input-block.md

4. Compose using positions[]. Prune uses a 12-column grid. Each position has { id, x, y, w, h } where x and w are columns (0–11), y and h are row units. Map directly to CSS grid: gridColumn: x+1 / span w, gridRow: y+1 / span h. InputCharts have a separate position: int (just an order) and render below the chart grid.

5. Output a single React artifact using Tailwind utility classes and Recharts for charts. The artifact must be self-contained — inline all styles, no external CSS imports. See examples/dashboard.tsx.

Rules

• Never invent numbers. If monthData is empty or absent for a series, render the chart skeleton with a "No data" state, not fabricated values.
• Forecast styling matters. Every monthData point has both actual and forecast. Past months use actual; future months use forecast with a lighter fill (50% opacity) and dashed line variant. See tokens.md → Forecast.
• Negative net income is pink, positive is green. See tokens.md → Semantic colors.
• Currency formatting: dollars with thousands separators, two decimals, parentheses for negatives in tables but -$X for KPI headlines. See tokens.md → Number formatting.
• Match the chrome. Cards have the exact corner radius, border, and shadow specified in tokens.md — don't substitute Tailwind defaults.

What this skill does NOT do

• It does not query the Prune API directly — always go through MCP tools.
• It does not handle dashboard editing/mutation flows — read-only rendering.
• It does not replace the actual Prune web app — it produces a faithful read-only snapshot for use inside a chat conversation.