[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M716CV90YRHK5M2T1F394EHT":3,"skill-same:01M716CV90YRHK5M2T1F394EHT":78},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":34,"publishedAt":52,"linkOnly":53,"markdownContent":54,"markdownBody":55,"frontMatter":56,"refName":58,"commitSha":59,"skillDirectory":60,"forksCount":14,"repositoryHtmlUrl":61,"repositoryHomepageUrl":6,"ownerHtmlUrl":62,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":63,"install":64,"resources":77},"01M716CV90YRHK5M2T1F394EHT","kpi-dashboard-design",null,"Comprehensive patterns for designing effective Key Performance Indicator (KPI) dashboards that drive business decisions.","sapsapshen\u002Fai-memory-router","sapsapshen","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F20347959?v=4","01M6XDQEF1DP50DKF37H81J3J5","shenmian","01M6XDQEJPE41Y3DT2763X8ZJN",0,"MIT","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcursor\u002Fkpi-dashboard-design\u002FSKILL.md",[18,23,26,31],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000013","分析与可视化","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",{"categoryNo":32,"categoryName":33,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000033","数据分析师",[35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51],"dashboard","kpi","kpi dashboard","design","dashboard design","kpi dashboard design","drive","2026","unknown","for","patterns","community","business","decisions","dashboards","indicator","performance","2026-11-10 10:12:30",false,"---\nname: kpi-dashboard-design\ndescription: \"Comprehensive patterns for designing effective Key Performance Indicator (KPI) dashboards that drive business decisions.\"\nrisk: unknown\nsource: community\ndate_added: \"2026-02-27\"\n---\n\n# KPI Dashboard Design\n\nComprehensive patterns for designing effective Key Performance Indicator (KPI) dashboards that drive business decisions.\n\n## Do not use this skill when\n\n- The task is unrelated to kpi dashboard design\n- You need a different domain or tool outside this scope\n\n## Instructions\n\n- Clarify goals, constraints, and required inputs.\n- Apply relevant best practices and validate outcomes.\n- Provide actionable steps and verification.\n- If detailed examples are required, open `resources\u002Fimplementation-playbook.md`.\n\n## Use this skill when\n\n- Designing executive dashboards\n- Selecting meaningful KPIs\n- Building real-time monitoring displays\n- Creating department-specific metrics views\n- Improving existing dashboard layouts\n- Establishing metric governance\n\n## Core Concepts\n\n### 1. KPI Framework\n\n| Level           | Focus            | Update Frequency  | Audience   |\n| --------------- | ---------------- | ----------------- | ---------- |\n| **Strategic**   | Long-term goals  | Monthly\u002FQuarterly | Executives |\n| **Tactical**    | Department goals | Weekly\u002FMonthly    | Managers   |\n| **Operational** | Day-to-day       | Real-time\u002FDaily   | Teams      |\n\n### 2. SMART KPIs\n\n```\nSpecific: Clear definition\nMeasurable: Quantifiable\nAchievable: Realistic targets\nRelevant: Aligned to goals\nTime-bound: Defined period\n```\n\n### 3. Dashboard Hierarchy\n\n```\n├── Executive Summary (1 page)\n│   ├── 4-6 headline KPIs\n│   ├── Trend indicators\n│   └── Key alerts\n├── Department Views\n│   ├── Sales Dashboard\n│   ├── Marketing Dashboard\n│   ├── Operations Dashboard\n│   └── Finance Dashboard\n└── Detailed Drilldowns\n    ├── Individual metrics\n    └── Root cause analysis\n```\n\n## Common KPIs by Department\n\n### Sales KPIs\n\n```yaml\nRevenue Metrics:\n  - Monthly Recurring Revenue (MRR)\n  - Annual Recurring Revenue (ARR)\n  - Average Revenue Per User (ARPU)\n  - Revenue Growth Rate\n\nPipeline Metrics:\n  - Sales Pipeline Value\n  - Win Rate\n  - Average Deal Size\n  - Sales Cycle Length\n\nActivity Metrics:\n  - Calls\u002FEmails per Rep\n  - Demos Scheduled\n  - Proposals Sent\n  - Close Rate\n```\n\n### Marketing KPIs\n\n```yaml\nAcquisition:\n  - Cost Per Acquisition (CPA)\n  - Customer Acquisition Cost (CAC)\n  - Lead Volume\n  - Marketing Qualified Leads (MQL)\n\nEngagement:\n  - Website Traffic\n  - Conversion Rate\n  - Email Open\u002FClick Rate\n  - Social Engagement\n\nROI:\n  - Marketing ROI\n  - Campaign Performance\n  - Channel Attribution\n  - CAC Payback Period\n```\n\n### Product KPIs\n\n```yaml\nUsage:\n  - Daily\u002FMonthly Active Users (DAU\u002FMAU)\n  - Session Duration\n  - Feature Adoption Rate\n  - Stickiness (DAU\u002FMAU)\n\nQuality:\n  - Net Promoter Score (NPS)\n  - Customer Satisfaction (CSAT)\n  - Bug\u002FIssue Count\n  - Time to Resolution\n\nGrowth:\n  - User Growth Rate\n  - Activation Rate\n  - Retention Rate\n  - Churn Rate\n```\n\n### Finance KPIs\n\n```yaml\nProfitability:\n  - Gross Margin\n  - Net Profit Margin\n  - EBITDA\n  - Operating Margin\n\nLiquidity:\n  - Current Ratio\n  - Quick Ratio\n  - Cash Flow\n  - Working Capital\n\nEfficiency:\n  - Revenue per Employee\n  - Operating Expense Ratio\n  - Days Sales Outstanding\n  - Inventory Turnover\n```\n\n## Dashboard Layout Patterns\n\n### Pattern 1: Executive Summary\n\n```\n┌─────────────────────────────────────────────────────────────┐\n│  EXECUTIVE DASHBOARD                        [Date Range ▼]  │\n├─────────────┬─────────────┬─────────────┬─────────────────┤\n│   REVENUE   │   PROFIT    │  CUSTOMERS  │    NPS SCORE    │\n│   $2.4M     │    $450K    │    12,450   │       72        │\n│   ▲ 12%     │    ▲ 8%     │    ▲ 15%    │     ▲ 5pts     │\n├─────────────┴─────────────┴─────────────┴─────────────────┤\n│                                                             │\n│  Revenue Trend                    │  Revenue by Product     │\n│  ┌───────────────────────┐       │  ┌──────────────────┐   │\n│  │    \u002F\\    \u002F\\          │       │  │ ████████ 45%     │   │\n│  │   \u002F  \\  \u002F  \\    \u002F\\   │       │  │ ██████   32%     │   │\n│  │  \u002F    \\\u002F    \\  \u002F  \\  │       │  │ ████     18%     │   │\n│  │ \u002F            \\\u002F    \\ │       │  │ ██        5%     │   │\n│  └───────────────────────┘       │  └──────────────────┘   │\n│                                                             │\n├─────────────────────────────────────────────────────────────┤\n│  🔴 Alert: Churn rate exceeded threshold (>5%)              │\n│  🟡 Warning: Support ticket volume 20% above average        │\n└─────────────────────────────────────────────────────────────┘\n```\n\n### Pattern 2: SaaS Metrics Dashboard\n\n```\n┌─────────────────────────────────────────────────────────────┐\n│  SAAS METRICS                     Jan 2024  [Monthly ▼]     │\n├──────────────────────┬──────────────────────────────────────┤\n│  ┌────────────────┐  │  MRR GROWTH                          │\n│  │      MRR       │  │  ┌────────────────────────────────┐  │\n│  │    $125,000    │  │  │                          \u002F──   │  │\n│  │     ▲ 8%       │  │  │                    \u002F────\u002F      │  │\n│  └────────────────┘  │  │              \u002F────\u002F            │  │\n│  ┌────────────────┐  │  │        \u002F────\u002F                  │  │\n│  │      ARR       │  │  │   \u002F────\u002F                       │  │\n│  │   $1,500,000   │  │  └────────────────────────────────┘  │\n│  │     ▲ 15%      │  │  J  F  M  A  M  J  J  A  S  O  N  D  │\n│  └────────────────┘  │                                      │\n├──────────────────────┼──────────────────────────────────────┤\n│  UNIT ECONOMICS      │  COHORT RETENTION                    │\n│                      │                                      │\n│  CAC:     $450       │  Month 1: ████████████████████ 100%  │\n│  LTV:     $2,700     │  Month 3: █████████████████    85%   │\n│  LTV\u002FCAC: 6.0x       │  Month 6: ████████████████     80%   │\n│                      │  Month 12: ██████████████      72%   │\n│  Payback: 4 months   │                                      │\n├──────────────────────┴──────────────────────────────────────┤\n│  CHURN ANALYSIS                                             │\n│  ┌──────────┬──────────┬──────────┬──────────────────────┐ │\n│  │ Gross    │ Net      │ Logo     │ Expansion            │ │\n│  │ 4.2%     │ 1.8%     │ 3.1%     │ 2.4%                 │ │\n│  └──────────┴──────────┴──────────┴──────────────────────┘ │\n└─────────────────────────────────────────────────────────────┘\n```\n\n### Pattern 3: Real-time Operations\n\n```\n┌─────────────────────────────────────────────────────────────┐\n│  OPERATIONS CENTER                    Live ● Last: 10:42:15 │\n├────────────────────────────┬────────────────────────────────┤\n│  SYSTEM HEALTH             │  SERVICE STATUS                │\n│  ┌──────────────────────┐  │                                │\n│  │   CPU    MEM    DISK │  │  ● API Gateway      Healthy    │\n│  │   45%    72%    58%  │  │  ● User Service     Healthy    │\n│  │   ███    ████   ███  │  │  ● Payment Service  Degraded   │\n│  │   ███    ████   ███  │  │  ● Database         Healthy    │\n│  │   ███    ████   ███  │  │  ● Cache            Healthy    │\n│  └──────────────────────┘  │                                │\n├────────────────────────────┼────────────────────────────────┤\n│  REQUEST THROUGHPUT        │  ERROR RATE                    │\n│  ┌──────────────────────┐  │  ┌──────────────────────────┐  │\n│  │ ▁▂▃▄▅▆▇█▇▆▅▄▃▂▁▂▃▄▅ │  │  │ ▁▁▁▁▁▂▁▁▁▁▁▁▁▁▁▁▁▁▁▁  │  │\n│  └──────────────────────┘  │  └──────────────────────────┘  │\n│  Current: 12,450 req\u002Fs     │  Current: 0.02%                │\n│  Peak: 18,200 req\u002Fs        │  Threshold: 1.0%               │\n├────────────────────────────┴────────────────────────────────┤\n│  RECENT ALERTS                                              │\n│  10:40  🟡 High latency on payment-service (p99 > 500ms)    │\n│  10:35  🟢 Resolved: Database connection pool recovered     │\n│  10:22  🔴 Payment service circuit breaker tripped          │\n└─────────────────────────────────────────────────────────────┘\n```\n\n## Implementation Patterns\n\n### SQL for KPI Calculations\n\n```sql\n-- Monthly Recurring Revenue (MRR)\nWITH mrr_calculation AS (\n    SELECT\n        DATE_TRUNC('month', billing_date) AS month,\n        SUM(\n            CASE subscription_interval\n                WHEN 'monthly' THEN amount\n                WHEN 'yearly' THEN amount \u002F 12\n                WHEN 'quarterly' THEN amount \u002F 3\n            END\n        ) AS mrr\n    FROM subscriptions\n    WHERE status = 'active'\n    GROUP BY DATE_TRUNC('month', billing_date)\n)\nSELECT\n    month,\n    mrr,\n    LAG(mrr) OVER (ORDER BY month) AS prev_mrr,\n    (mrr - LAG(mrr) OVER (ORDER BY month)) \u002F LAG(mrr) OVER (ORDER BY month) * 100 AS growth_pct\nFROM mrr_calculation;\n\n-- Cohort Retention\nWITH cohorts AS (\n    SELECT\n        user_id,\n        DATE_TRUNC('month', created_at) AS cohort_month\n    FROM users\n),\nactivity AS (\n    SELECT\n        user_id,\n        DATE_TRUNC('month', event_date) AS activity_month\n    FROM user_events\n    WHERE event_type = 'active_session'\n)\nSELECT\n    c.cohort_month,\n    EXTRACT(MONTH FROM age(a.activity_month, c.cohort_month)) AS months_since_signup,\n    COUNT(DISTINCT a.user_id) AS active_users,\n    COUNT(DISTINCT a.user_id)::FLOAT \u002F COUNT(DISTINCT c.user_id) * 100 AS retention_rate\nFROM cohorts c\nLEFT JOIN activity a ON c.user_id = a.user_id\n    AND a.activity_month >= c.cohort_month\nGROUP BY c.cohort_month, EXTRACT(MONTH FROM age(a.activity_month, c.cohort_month))\nORDER BY c.cohort_month, months_since_signup;\n\n-- Customer Acquisition Cost (CAC)\nSELECT\n    DATE_TRUNC('month', acquired_date) AS month,\n    SUM(marketing_spend) \u002F NULLIF(COUNT(new_customers), 0) AS cac,\n    SUM(marketing_spend) AS total_spend,\n    COUNT(new_customers) AS customers_acquired\nFROM (\n    SELECT\n        DATE_TRUNC('month', u.created_at) AS acquired_date,\n        u.id AS new_customers,\n        m.spend AS marketing_spend\n    FROM users u\n    JOIN marketing_spend m ON DATE_TRUNC('month', u.created_at) = m.month\n    WHERE u.source = 'marketing'\n) acquisition\nGROUP BY DATE_TRUNC('month', acquired_date);\n```\n\n### Python Dashboard Code (Streamlit)\n\n```python\nimport streamlit as st\nimport pandas as pd\nimport plotly.express as px\nimport plotly.graph_objects as go\n\nst.set_page_config(page_title=\"KPI Dashboard\", layout=\"wide\")\n\n# Header with date filter\ncol1, col2 = st.columns([3, 1])\nwith col1:\n    st.title(\"Executive Dashboard\")\nwith col2:\n    date_range = st.selectbox(\n        \"Period\",\n        [\"Last 7 Days\", \"Last 30 Days\", \"Last Quarter\", \"YTD\"]\n    )\n\n# KPI Cards\ndef metric_card(label, value, delta, prefix=\"\", suffix=\"\"):\n    delta_color = \"green\" if delta >= 0 else \"red\"\n    delta_arrow = \"▲\" if delta >= 0 else \"▼\"\n    st.metric(\n        label=label,\n        value=f\"{prefix}{value:,.0f}{suffix}\",\n        delta=f\"{delta_arrow} {abs(delta):.1f}%\"\n    )\n\ncol1, col2, col3, col4 = st.columns(4)\nwith col1:\n    metric_card(\"Revenue\", 2400000, 12.5, prefix=\"$\")\nwith col2:\n    metric_card(\"Customers\", 12450, 15.2)\nwith col3:\n    metric_card(\"NPS Score\", 72, 5.0)\nwith col4:\n    metric_card(\"Churn Rate\", 4.2, -0.8, suffix=\"%\")\n\n# Charts\ncol1, col2 = st.columns(2)\n\nwith col1:\n    st.subheader(\"Revenue Trend\")\n    revenue_data = pd.DataFrame({\n        'Month': pd.date_range('2024-01-01', periods=12, freq='M'),\n        'Revenue': [180000, 195000, 210000, 225000, 240000, 255000,\n                    270000, 285000, 300000, 315000, 330000, 345000]\n    })\n    fig = px.line(revenue_data, x='Month', y='Revenue',\n                  line_shape='spline', markers=True)\n    fig.update_layout(height=300)\n    st.plotly_chart(fig, use_container_width=True)\n\nwith col2:\n    st.subheader(\"Revenue by Product\")\n    product_data = pd.DataFrame({\n        'Product': ['Enterprise', 'Professional', 'Starter', 'Other'],\n        'Revenue': [45, 32, 18, 5]\n    })\n    fig = px.pie(product_data, values='Revenue', names='Product',\n                 hole=0.4)\n    fig.update_layout(height=300)\n    st.plotly_chart(fig, use_container_width=True)\n\n# Cohort Heatmap\nst.subheader(\"Cohort Retention\")\ncohort_data = pd.DataFrame({\n    'Cohort': ['Jan', 'Feb', 'Mar', 'Apr', 'May'],\n    'M0': [100, 100, 100, 100, 100],\n    'M1': [85, 87, 84, 86, 88],\n    'M2': [78, 80, 76, 79, None],\n    'M3': [72, 74, 70, None, None],\n    'M4': [68, 70, None, None, None],\n})\nfig = go.Figure(data=go.Heatmap(\n    z=cohort_data.iloc[:, 1:].values,\n    x=['M0', 'M1', 'M2', 'M3', 'M4'],\n    y=cohort_data['Cohort'],\n    colorscale='Blues',\n    text=cohort_data.iloc[:, 1:].values,\n    texttemplate='%{text}%',\n    textfont={\"size\": 12},\n))\nfig.update_layout(height=250)\nst.plotly_chart(fig, use_container_width=True)\n\n# Alerts Section\nst.subheader(\"Alerts\")\nalerts = [\n    {\"level\": \"error\", \"message\": \"Churn rate exceeded threshold (>5%)\"},\n    {\"level\": \"warning\", \"message\": \"Support ticket volume 20% above average\"},\n]\nfor alert in alerts:\n    if alert[\"level\"] == \"error\":\n        st.error(f\"🔴 {alert['message']}\")\n    elif alert[\"level\"] == \"warning\":\n        st.warning(f\"🟡 {alert['message']}\")\n```\n\n## Best Practices\n\n### Do's\n\n- **Limit to 5-7 KPIs** - Focus on what matters\n- **Show context** - Comparisons, trends, targets\n- **Use consistent colors** - Red=bad, green=good\n- **Enable drilldown** - From summary to detail\n- **Update appropriately** - Match metric frequency\n\n### Don'ts\n\n- **Don't show vanity metrics** - Focus on actionable data\n- **Don't overcrowd** - White space aids comprehension\n- **Don't use 3D charts** - They distort perception\n- **Don't hide methodology** - Document calculations\n- **Don't ignore mobile** - Ensure responsive design\n\n## Resources\n\n- [Stephen Few's Dashboard Design](https:\u002F\u002Fwww.perceptualedge.com\u002Farticles\u002Fvisual_business_intelligence\u002Frules_for_using_color.pdf)\n- [Edward Tufte's Principles](https:\u002F\u002Fwww.edwardtufte.com\u002Ftufte\u002F)\n- [Google Data Studio Gallery](https:\u002F\u002Fdatastudio.google.com\u002Fgallery)\n","# KPI Dashboard Design\n\nComprehensive patterns for designing effective Key Performance Indicator (KPI) dashboards that drive business decisions.\n\n## Do not use this skill when\n\n- The task is unrelated to kpi dashboard design\n- You need a different domain or tool outside this scope\n\n## Instructions\n\n- Clarify goals, constraints, and required inputs.\n- Apply relevant best practices and validate outcomes.\n- Provide actionable steps and verification.\n- If detailed examples are required, open `resources\u002Fimplementation-playbook.md`.\n\n## Use this skill when\n\n- Designing executive dashboards\n- Selecting meaningful KPIs\n- Building real-time monitoring displays\n- Creating department-specific metrics views\n- Improving existing dashboard layouts\n- Establishing metric governance\n\n## Core Concepts\n\n### 1. KPI Framework\n\n| Level           | Focus            | Update Frequency  | Audience   |\n| --------------- | ---------------- | ----------------- | ---------- |\n| **Strategic**   | Long-term goals  | Monthly\u002FQuarterly | Executives |\n| **Tactical**    | Department goals | Weekly\u002FMonthly    | Managers   |\n| **Operational** | Day-to-day       | Real-time\u002FDaily   | Teams      |\n\n### 2. SMART KPIs\n\n```\nSpecific: Clear definition\nMeasurable: Quantifiable\nAchievable: Realistic targets\nRelevant: Aligned to goals\nTime-bound: Defined period\n```\n\n### 3. Dashboard Hierarchy\n\n```\n├── Executive Summary (1 page)\n│   ├── 4-6 headline KPIs\n│   ├── Trend indicators\n│   └── Key alerts\n├── Department Views\n│   ├── Sales Dashboard\n│   ├── Marketing Dashboard\n│   ├── Operations Dashboard\n│   └── Finance Dashboard\n└── Detailed Drilldowns\n    ├── Individual metrics\n    └── Root cause analysis\n```\n\n## Common KPIs by Department\n\n### Sales KPIs\n\n```yaml\nRevenue Metrics:\n  - Monthly Recurring Revenue (MRR)\n  - Annual Recurring Revenue (ARR)\n  - Average Revenue Per User (ARPU)\n  - Revenue Growth Rate\n\nPipeline Metrics:\n  - Sales Pipeline Value\n  - Win Rate\n  - Average Deal Size\n  - Sales Cycle Length\n\nActivity Metrics:\n  - Calls\u002FEmails per Rep\n  - Demos Scheduled\n  - Proposals Sent\n  - Close Rate\n```\n\n### Marketing KPIs\n\n```yaml\nAcquisition:\n  - Cost Per Acquisition (CPA)\n  - Customer Acquisition Cost (CAC)\n  - Lead Volume\n  - Marketing Qualified Leads (MQL)\n\nEngagement:\n  - Website Traffic\n  - Conversion Rate\n  - Email Open\u002FClick Rate\n  - Social Engagement\n\nROI:\n  - Marketing ROI\n  - Campaign Performance\n  - Channel Attribution\n  - CAC Payback Period\n```\n\n### Product KPIs\n\n```yaml\nUsage:\n  - Daily\u002FMonthly Active Users (DAU\u002FMAU)\n  - Session Duration\n  - Feature Adoption Rate\n  - Stickiness (DAU\u002FMAU)\n\nQuality:\n  - Net Promoter Score (NPS)\n  - Customer Satisfaction (CSAT)\n  - Bug\u002FIssue Count\n  - Time to Resolution\n\nGrowth:\n  - User Growth Rate\n  - Activation Rate\n  - Retention Rate\n  - Churn Rate\n```\n\n### Finance KPIs\n\n```yaml\nProfitability:\n  - Gross Margin\n  - Net Profit Margin\n  - EBITDA\n  - Operating Margin\n\nLiquidity:\n  - Current Ratio\n  - Quick Ratio\n  - Cash Flow\n  - Working Capital\n\nEfficiency:\n  - Revenue per Employee\n  - Operating Expense Ratio\n  - Days Sales Outstanding\n  - Inventory Turnover\n```\n\n## Dashboard Layout Patterns\n\n### Pattern 1: Executive Summary\n\n```\n┌─────────────────────────────────────────────────────────────┐\n│  EXECUTIVE DASHBOARD                        [Date Range ▼]  │\n├─────────────┬─────────────┬─────────────┬─────────────────┤\n│   REVENUE   │   PROFIT    │  CUSTOMERS  │    NPS SCORE    │\n│   $2.4M     │    $450K    │    12,450   │       72        │\n│   ▲ 12%     │    ▲ 8%     │    ▲ 15%    │     ▲ 5pts     │\n├─────────────┴─────────────┴─────────────┴─────────────────┤\n│                                                             │\n│  Revenue Trend                    │  Revenue by Product     │\n│  ┌───────────────────────┐       │  ┌──────────────────┐   │\n│  │    \u002F\\    \u002F\\          │       │  │ ████████ 45%     │   │\n│  │   \u002F  \\  \u002F  \\    \u002F\\   │       │  │ ██████   32%     │   │\n│  │  \u002F    \\\u002F    \\  \u002F  \\  │       │  │ ████     18%     │   │\n│  │ \u002F            \\\u002F    \\ │       │  │ ██        5%     │   │\n│  └───────────────────────┘       │  └──────────────────┘   │\n│                                                             │\n├─────────────────────────────────────────────────────────────┤\n│  🔴 Alert: Churn rate exceeded threshold (>5%)              │\n│  🟡 Warning: Support ticket volume 20% above average        │\n└─────────────────────────────────────────────────────────────┘\n```\n\n### Pattern 2: SaaS Metrics Dashboard\n\n```\n┌─────────────────────────────────────────────────────────────┐\n│  SAAS METRICS                     Jan 2024  [Monthly ▼]     │\n├──────────────────────┬──────────────────────────────────────┤\n│  ┌────────────────┐  │  MRR GROWTH                          │\n│  │      MRR       │  │  ┌────────────────────────────────┐  │\n│  │    $125,000    │  │  │                          \u002F──   │  │\n│  │     ▲ 8%       │  │  │                    \u002F────\u002F      │  │\n│  └────────────────┘  │  │              \u002F────\u002F            │  │\n│  ┌────────────────┐  │  │        \u002F────\u002F                  │  │\n│  │      ARR       │  │  │   \u002F────\u002F                       │  │\n│  │   $1,500,000   │  │  └────────────────────────────────┘  │\n│  │     ▲ 15%      │  │  J  F  M  A  M  J  J  A  S  O  N  D  │\n│  └────────────────┘  │                                      │\n├──────────────────────┼──────────────────────────────────────┤\n│  UNIT ECONOMICS      │  COHORT RETENTION                    │\n│                      │                                      │\n│  CAC:     $450       │  Month 1: ████████████████████ 100%  │\n│  LTV:     $2,700     │  Month 3: █████████████████    85%   │\n│  LTV\u002FCAC: 6.0x       │  Month 6: ████████████████     80%   │\n│                      │  Month 12: ██████████████      72%   │\n│  Payback: 4 months   │                                      │\n├──────────────────────┴──────────────────────────────────────┤\n│  CHURN ANALYSIS                                             │\n│  ┌──────────┬──────────┬──────────┬──────────────────────┐ │\n│  │ Gross    │ Net      │ Logo     │ Expansion            │ │\n│  │ 4.2%     │ 1.8%     │ 3.1%     │ 2.4%                 │ │\n│  └──────────┴──────────┴──────────┴──────────────────────┘ │\n└─────────────────────────────────────────────────────────────┘\n```\n\n### Pattern 3: Real-time Operations\n\n```\n┌─────────────────────────────────────────────────────────────┐\n│  OPERATIONS CENTER                    Live ● Last: 10:42:15 │\n├────────────────────────────┬────────────────────────────────┤\n│  SYSTEM HEALTH             │  SERVICE STATUS                │\n│  ┌──────────────────────┐  │                                │\n│  │   CPU    MEM    DISK │  │  ● API Gateway      Healthy    │\n│  │   45%    72%    58%  │  │  ● User Service     Healthy    │\n│  │   ███    ████   ███  │  │  ● Payment Service  Degraded   │\n│  │   ███    ████   ███  │  │  ● Database         Healthy    │\n│  │   ███    ████   ███  │  │  ● Cache            Healthy    │\n│  └──────────────────────┘  │                                │\n├────────────────────────────┼────────────────────────────────┤\n│  REQUEST THROUGHPUT        │  ERROR RATE                    │\n│  ┌──────────────────────┐  │  ┌──────────────────────────┐  │\n│  │ ▁▂▃▄▅▆▇█▇▆▅▄▃▂▁▂▃▄▅ │  │  │ ▁▁▁▁▁▂▁▁▁▁▁▁▁▁▁▁▁▁▁▁  │  │\n│  └──────────────────────┘  │  └──────────────────────────┘  │\n│  Current: 12,450 req\u002Fs     │  Current: 0.02%                │\n│  Peak: 18,200 req\u002Fs        │  Threshold: 1.0%               │\n├────────────────────────────┴────────────────────────────────┤\n│  RECENT ALERTS                                              │\n│  10:40  🟡 High latency on payment-service (p99 > 500ms)    │\n│  10:35  🟢 Resolved: Database connection pool recovered     │\n│  10:22  🔴 Payment service circuit breaker tripped          │\n└─────────────────────────────────────────────────────────────┘\n```\n\n## Implementation Patterns\n\n### SQL for KPI Calculations\n\n```sql\n-- Monthly Recurring Revenue (MRR)\nWITH mrr_calculation AS (\n    SELECT\n        DATE_TRUNC('month', billing_date) AS month,\n        SUM(\n            CASE subscription_interval\n                WHEN 'monthly' THEN amount\n                WHEN 'yearly' THEN amount \u002F 12\n                WHEN 'quarterly' THEN amount \u002F 3\n            END\n        ) AS mrr\n    FROM subscriptions\n    WHERE status = 'active'\n    GROUP BY DATE_TRUNC('month', billing_date)\n)\nSELECT\n    month,\n    mrr,\n    LAG(mrr) OVER (ORDER BY month) AS prev_mrr,\n    (mrr - LAG(mrr) OVER (ORDER BY month)) \u002F LAG(mrr) OVER (ORDER BY month) * 100 AS growth_pct\nFROM mrr_calculation;\n\n-- Cohort Retention\nWITH cohorts AS (\n    SELECT\n        user_id,\n        DATE_TRUNC('month', created_at) AS cohort_month\n    FROM users\n),\nactivity AS (\n    SELECT\n        user_id,\n        DATE_TRUNC('month', event_date) AS activity_month\n    FROM user_events\n    WHERE event_type = 'active_session'\n)\nSELECT\n    c.cohort_month,\n    EXTRACT(MONTH FROM age(a.activity_month, c.cohort_month)) AS months_since_signup,\n    COUNT(DISTINCT a.user_id) AS active_users,\n    COUNT(DISTINCT a.user_id)::FLOAT \u002F COUNT(DISTINCT c.user_id) * 100 AS retention_rate\nFROM cohorts c\nLEFT JOIN activity a ON c.user_id = a.user_id\n    AND a.activity_month >= c.cohort_month\nGROUP BY c.cohort_month, EXTRACT(MONTH FROM age(a.activity_month, c.cohort_month))\nORDER BY c.cohort_month, months_since_signup;\n\n-- Customer Acquisition Cost (CAC)\nSELECT\n    DATE_TRUNC('month', acquired_date) AS month,\n    SUM(marketing_spend) \u002F NULLIF(COUNT(new_customers), 0) AS cac,\n    SUM(marketing_spend) AS total_spend,\n    COUNT(new_customers) AS customers_acquired\nFROM (\n    SELECT\n        DATE_TRUNC('month', u.created_at) AS acquired_date,\n        u.id AS new_customers,\n        m.spend AS marketing_spend\n    FROM users u\n    JOIN marketing_spend m ON DATE_TRUNC('month', u.created_at) = m.month\n    WHERE u.source = 'marketing'\n) acquisition\nGROUP BY DATE_TRUNC('month', acquired_date);\n```\n\n### Python Dashboard Code (Streamlit)\n\n```python\nimport streamlit as st\nimport pandas as pd\nimport plotly.express as px\nimport plotly.graph_objects as go\n\nst.set_page_config(page_title=\"KPI Dashboard\", layout=\"wide\")\n\n# Header with date filter\ncol1, col2 = st.columns([3, 1])\nwith col1:\n    st.title(\"Executive Dashboard\")\nwith col2:\n    date_range = st.selectbox(\n        \"Period\",\n        [\"Last 7 Days\", \"Last 30 Days\", \"Last Quarter\", \"YTD\"]\n    )\n\n# KPI Cards\ndef metric_card(label, value, delta, prefix=\"\", suffix=\"\"):\n    delta_color = \"green\" if delta >= 0 else \"red\"\n    delta_arrow = \"▲\" if delta >= 0 else \"▼\"\n    st.metric(\n        label=label,\n        value=f\"{prefix}{value:,.0f}{suffix}\",\n        delta=f\"{delta_arrow} {abs(delta):.1f}%\"\n    )\n\ncol1, col2, col3, col4 = st.columns(4)\nwith col1:\n    metric_card(\"Revenue\", 2400000, 12.5, prefix=\"$\")\nwith col2:\n    metric_card(\"Customers\", 12450, 15.2)\nwith col3:\n    metric_card(\"NPS Score\", 72, 5.0)\nwith col4:\n    metric_card(\"Churn Rate\", 4.2, -0.8, suffix=\"%\")\n\n# Charts\ncol1, col2 = st.columns(2)\n\nwith col1:\n    st.subheader(\"Revenue Trend\")\n    revenue_data = pd.DataFrame({\n        'Month': pd.date_range('2024-01-01', periods=12, freq='M'),\n        'Revenue': [180000, 195000, 210000, 225000, 240000, 255000,\n                    270000, 285000, 300000, 315000, 330000, 345000]\n    })\n    fig = px.line(revenue_data, x='Month', y='Revenue',\n                  line_shape='spline', markers=True)\n    fig.update_layout(height=300)\n    st.plotly_chart(fig, use_container_width=True)\n\nwith col2:\n    st.subheader(\"Revenue by Product\")\n    product_data = pd.DataFrame({\n        'Product': ['Enterprise', 'Professional', 'Starter', 'Other'],\n        'Revenue': [45, 32, 18, 5]\n    })\n    fig = px.pie(product_data, values='Revenue', names='Product',\n                 hole=0.4)\n    fig.update_layout(height=300)\n    st.plotly_chart(fig, use_container_width=True)\n\n# Cohort Heatmap\nst.subheader(\"Cohort Retention\")\ncohort_data = pd.DataFrame({\n    'Cohort': ['Jan', 'Feb', 'Mar', 'Apr', 'May'],\n    'M0': [100, 100, 100, 100, 100],\n    'M1': [85, 87, 84, 86, 88],\n    'M2': [78, 80, 76, 79, None],\n    'M3': [72, 74, 70, None, None],\n    'M4': [68, 70, None, None, None],\n})\nfig = go.Figure(data=go.Heatmap(\n    z=cohort_data.iloc[:, 1:].values,\n    x=['M0', 'M1', 'M2', 'M3', 'M4'],\n    y=cohort_data['Cohort'],\n    colorscale='Blues',\n    text=cohort_data.iloc[:, 1:].values,\n    texttemplate='%{text}%',\n    textfont={\"size\": 12},\n))\nfig.update_layout(height=250)\nst.plotly_chart(fig, use_container_width=True)\n\n# Alerts Section\nst.subheader(\"Alerts\")\nalerts = [\n    {\"level\": \"error\", \"message\": \"Churn rate exceeded threshold (>5%)\"},\n    {\"level\": \"warning\", \"message\": \"Support ticket volume 20% above average\"},\n]\nfor alert in alerts:\n    if alert[\"level\"] == \"error\":\n        st.error(f\"🔴 {alert['message']}\")\n    elif alert[\"level\"] == \"warning\":\n        st.warning(f\"🟡 {alert['message']}\")\n```\n\n## Best Practices\n\n### Do's\n\n- **Limit to 5-7 KPIs** - Focus on what matters\n- **Show context** - Comparisons, trends, targets\n- **Use consistent colors** - Red=bad, green=good\n- **Enable drilldown** - From summary to detail\n- **Update appropriately** - Match metric frequency\n\n### Don'ts\n\n- **Don't show vanity metrics** - Focus on actionable data\n- **Don't overcrowd** - White space aids comprehension\n- **Don't use 3D charts** - They distort perception\n- **Don't hide methodology** - Document calculations\n- **Don't ignore mobile** - Ensure responsive design\n\n## Resources\n\n- [Stephen Few's Dashboard Design](https:\u002F\u002Fwww.perceptualedge.com\u002Farticles\u002Fvisual_business_intelligence\u002Frules_for_using_color.pdf)\n- [Edward Tufte's Principles](https:\u002F\u002Fwww.edwardtufte.com\u002Ftufte\u002F)\n- [Google Data Studio Gallery](https:\u002F\u002Fdatastudio.google.com\u002Fgallery)\n",{"name":5,"risk":43,"source":46,"date_added":57,"description":7},"2026-02-27","main","7a38d8e7073e61c16eda85681cb32fb68a8657a5","skills-store\u002Fcursor\u002Fkpi-dashboard-design","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router","https:\u002F\u002Fgithub.com\u002Fsapsapshen","2026-04-14 21:12:12",{"source":8,"skillName":5,"commands":65,"prompt":75,"zipAvailable":76},[66,69,72],{"tool":67,"command":68},"npx","npx skills add sapsapshen\u002Fai-memory-router --skill kpi-dashboard-design",{"tool":70,"command":71},"bunx","bunx skills add sapsapshen\u002Fai-memory-router --skill kpi-dashboard-design",{"tool":73,"command":74},"pnpm","pnpm dlx skills add sapsapshen\u002Fai-memory-router --skill kpi-dashboard-design","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcursor\u002Fkpi-dashboard-design\u002FSKILL.md",true,[],[79,100,126,136,149,166],{"skillNo":80,"name":81,"nameZh":6,"description":82,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":83,"categories":84,"keywords":88,"publishedAt":52},"01M71ATQRKG48SH06FQ697T5G9","wechat-search","Search WeChat Official Account articles using OpenClaw's web search and fetch capabilities with compliance-focused design.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fwechat-search-release\u002FSKILL.md",[85],{"categoryNo":86,"categoryName":87,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000037","律师与法务",[89,90,91,92,93,38,94,95,96,97,98,99],"wechat search","wechat","search","capabilities","openclaw","web search","compliance","web","official","fetch","with",{"skillNo":101,"name":102,"nameZh":6,"description":103,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":104,"categories":105,"keywords":106,"publishedAt":52},"01M71ATNAVGZB35PFYM2GC5N00","trend-tap","Real-time trending topics aggregator across 7 platforms (X\u002FTwitter, Reddit, Google Trends, Hacker News, Zhihu, Bilibili, Weibo). Trigger: when user says 'trend', 'trends', 'trend tap', '热点', '热搜', or asks what is trending\u002Fhot. Do NOT use web_search — this skill already fetches live data from all platforms with zero API keys.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftrend-tap\u002FSKILL.md",[],[107,108,109,110,111,112,91,113,114,115,116,117,118,119,120,121,122,123,124,125],"trend","trend tap","tap","api keys","Bash","time","trending","hacker","aggregator","do","when","brew","live","data","google","install","read","across","api",{"skillNo":127,"name":128,"nameZh":6,"description":129,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":130,"categories":131,"keywords":132,"publishedAt":52},"01M71ATJ9AM5KM15AA8PS302EB","trend-radar","Real-time trending topics aggregator across 7 platforms (X\u002FTwitter, Reddit, Google Trends, Hacker News, Zhihu, Bilibili, Weibo). Trigger: when user says 'trend', 'trends', 'trend pulse', '热点', '热搜', or asks what is trending\u002Fhot. Do NOT use web_search — this skill already fetches live data from all platforms with zero API keys.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftrend-radar\u002FSKILL.md",[],[133,134,107,118,119,120,121,111,91,123,135,124,125,117,115,114,113,122,112,110],"trend radar","radar","pulse",{"skillNo":137,"name":138,"nameZh":6,"description":139,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":140,"categories":141,"keywords":142,"publishedAt":52},"01M71ATGF095N3EJM9G8SD0BB5","tech-news-daily","每日科技新闻汇——从全球多个 RSS 源抓取最新科技新闻，翻译（英→中）、去重、排版成每日简报。当用户询问科技新闻、科技新鲜事、每日科技、技术动态、Daily Tech News 或类似表达时触发此技能。","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftech-news-daily\u002FSKILL.md",[],[143,144,145,146,147,148],"news","tech","tech news daily","daily","rss","翻译",{"skillNo":150,"name":151,"nameZh":6,"description":152,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":153,"categories":154,"keywords":158,"publishedAt":52},"01M71ATFAEAMQ17M70NQNY7SR8","summarize","Summarize URLs or files with the summarize CLI (web, PDFs, images, audio, YouTube).","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fsummarize\u002FSKILL.md",[155],{"categoryNo":156,"categoryName":157,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000021","资料检索与研究",[151,96,159,160,161,99,118,162,163,164,109,165,122],"Audio","cli","youtube","images","https","files","pdfs",{"skillNo":167,"name":168,"nameZh":6,"description":169,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":170,"categories":171,"keywords":172,"publishedAt":52},"01M71ATDNS3R0M4H936PACQAWZ","sonoscli","Control Sonos speakers (discover\u002Fstatus\u002Fplay\u002Fvolume\u002Fgroup).","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fsonoscli\u002FSKILL.md",[],[168,173,174,175,122,176,163,177,178,179,180,181],"status","play","go","latest","github","discover","control","cmd","volume"]