[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71SMDZREMMZRBDCWR7XVF7X":3,"skill-same:01M71SMDZREMMZRBDCWR7XVF7X":79},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":33,"publishedAt":54,"linkOnly":55,"markdownContent":56,"markdownBody":57,"frontMatter":58,"refName":59,"commitSha":60,"skillDirectory":61,"forksCount":13,"repositoryHtmlUrl":62,"repositoryHomepageUrl":6,"ownerHtmlUrl":63,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":64,"install":65,"resources":78},"01M71SMDZREMMZRBDCWR7XVF7X","kpi-dashboard-design",null,"Design effective KPI dashboards with metrics selection, visualization best practices, and real-time monitoring patterns. Use when building business dashboards, selecting metrics, or designing data ...","javiertarazon\u002Fide-agente-free-jt7-","javiertarazon","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F153141207?v=4","01M71R52TB3S9HXKH6WSNT8A7V","01M71R52VG5KS2DKDDH4GDQ30A",0,"MIT","https:\u002F\u002Fgithub.com\u002Fjaviertarazon\u002Fide-agente-free-jt7-\u002Fblob\u002Frelease\u002Fv4.2.11-panel-pro\u002F.github\u002Fskills\u002Fkpi-dashboard-design\u002FSKILL.md",[17,22,25,30],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000013","分析与可视化","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":26,"categoryName":27,"taxonomyType":28,"taxonomyTypeDesc":29},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",{"categoryNo":31,"categoryName":32,"taxonomyType":28,"taxonomyTypeDesc":29},"01JBSEEDCAT000000000000033","数据分析师",[34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53],"dashboard","kpi dashboard design","dashboard design","kpi","kpi dashboard","design","use","real-time","metrics","dashboards","patterns","data","monitoring","unknown","when","selection","time","visualization best practices","visualization","community","2026-11-10 13:02:02",false,"---\nname: kpi-dashboard-design\ndescription: \"Design effective KPI dashboards with metrics selection, visualization best practices, and real-time monitoring patterns. Use when building business dashboards, selecting metrics, or designing data ...\"\nrisk: unknown\nsource: community\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":47,"source":53,"description":7},"release\u002Fv4.2.11-panel-pro","a92ea02bcf7e2b3dbaf46d49696c29a3cb490d4f",".github\u002Fskills\u002Fkpi-dashboard-design","https:\u002F\u002Fgithub.com\u002Fjaviertarazon\u002Fide-agente-free-jt7-","https:\u002F\u002Fgithub.com\u002Fjaviertarazon","2026-07-12 07:10:45",{"source":8,"skillName":5,"commands":66,"prompt":76,"zipAvailable":77},[67,70,73],{"tool":68,"command":69},"npx","npx skills add javiertarazon\u002Fide-agente-free-jt7- --skill kpi-dashboard-design",{"tool":71,"command":72},"bunx","bunx skills add javiertarazon\u002Fide-agente-free-jt7- --skill kpi-dashboard-design",{"tool":74,"command":75},"pnpm","pnpm dlx skills add javiertarazon\u002Fide-agente-free-jt7- --skill kpi-dashboard-design","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fjaviertarazon\u002Fide-agente-free-jt7-\u002Fblob\u002Frelease\u002Fv4.2.11-panel-pro\u002F.github\u002Fskills\u002Fkpi-dashboard-design\u002FSKILL.md",true,[],[80,106,133,153,168,189],{"skillNo":81,"name":82,"nameZh":6,"description":83,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":84,"categories":85,"keywords":89,"publishedAt":54},"01M71TQ7Q6Z10VWF3C2H5X1KW9","zustand-store-ts","Create Zustand stores with TypeScript, subscribeWithSelector middleware, and proper state\u002Faction separation. Use when building React state management, creating global stores, or implementing reacti...","https:\u002F\u002Fgithub.com\u002Fjaviertarazon\u002Fide-agente-free-jt7-\u002Fblob\u002Frelease\u002Fv4.2.11-panel-pro\u002F.github\u002Fskills\u002Fzustand-store-ts\u002FSKILL.md",[86],{"categoryNo":87,"categoryName":88,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发",[90,91,92,53,93,94,40,95,48,47,96,97,98,99,100,101,102,103,104,105],"zustand","store","zustand store ts","middleware","implementing","react state management","react","with","state","create","state management","typescript","action","management","separation","global",{"skillNo":107,"name":108,"nameZh":6,"description":109,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":110,"categories":111,"keywords":115,"publishedAt":54},"01M71TQ5EAR40G6W0MV5ZDVEZT","zoom-automation","Automate Zoom meeting creation, management, recordings, webinars, and participant tracking via Rube MCP (Composio). Always search tools first for current schemas.","https:\u002F\u002Fgithub.com\u002Fjaviertarazon\u002Fide-agente-free-jt7-\u002Fblob\u002Frelease\u002Fv4.2.11-panel-pro\u002F.github\u002Fskills\u002Fzoom-automation\u002FSKILL.md",[112],{"categoryNo":113,"categoryName":114,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[116,117,118,53,119,120,121,122,123,47,124,125,126,127,128,129,130,131,103,132],"zoom automation","zoom","automation","creation","for","search","schemas","MCP","first","via","meeting","search tools","tracking","webinars","composio","recordings","Tools",{"skillNo":134,"name":135,"nameZh":6,"description":136,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":137,"categories":138,"keywords":140,"publishedAt":54},"01M71TQ29B1EYBCEAP1ZBGXQ1A","zoho-crm-automation","Automate Zoho CRM tasks via Rube MCP (Composio): create\u002Fupdate records, search contacts, manage leads, and convert leads. Always search tools first for current schemas.","https:\u002F\u002Fgithub.com\u002Fjaviertarazon\u002Fide-agente-free-jt7-\u002Fblob\u002Frelease\u002Fv4.2.11-panel-pro\u002F.github\u002Fskills\u002Fzoho-crm-automation\u002FSKILL.md",[139],{"categoryNo":113,"categoryName":114,"taxonomyType":20,"taxonomyTypeDesc":21},[141,142,118,143,144,145,53,146,147,120,148,121,122,149,123,47,150,151,152,99],"crm automation","zoho crm automation","crm","zoho crm","zoho","leads","manage leads","manage","records","convert","tasks","contacts",{"skillNo":154,"name":155,"nameZh":6,"description":156,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":157,"categories":158,"keywords":160,"publishedAt":54},"01M71TPZPMN60DH0XV58KVHY23","zendesk-automation","Automate Zendesk tasks via Rube MCP (Composio): tickets, users, organizations, replies. Always search tools first for current schemas.","https:\u002F\u002Fgithub.com\u002Fjaviertarazon\u002Fide-agente-free-jt7-\u002Fblob\u002Frelease\u002Fv4.2.11-panel-pro\u002F.github\u002Fskills\u002Fzendesk-automation\u002FSKILL.md",[159],{"categoryNo":113,"categoryName":114,"taxonomyType":20,"taxonomyTypeDesc":21},[161,118,162,53,120,121,122,123,163,47,151,164,165,124,125,166,127,130,132,167],"zendesk automation","zendesk","organizations","replies","users","tickets","automate",{"skillNo":169,"name":170,"nameZh":6,"description":171,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":172,"categories":173,"keywords":174,"publishedAt":54},"01M71TPXDWKHKG4N6TVEPXWD0N","zapier-make-patterns","No-code automation democratizes workflow building. Zapier and Make (formerly Integromat) let non-developers automate business processes without writing code. But no-code doesn't mean no-complexity ...","https:\u002F\u002Fgithub.com\u002Fjaviertarazon\u002Fide-agente-free-jt7-\u002Fblob\u002Frelease\u002Fv4.2.11-panel-pro\u002F.github\u002Fskills\u002Fzapier-make-patterns\u002FSKILL.md",[],[175,176,44,177,178,179,180,181,182,118,183,47,184,185,186,187,188,167],"zapier make patterns","zapier","make","No-Code","complexity","writing","spawner","business","workflow","code","integromat","apache","processes","but",{"skillNo":190,"name":191,"nameZh":6,"description":192,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":193,"categories":194,"keywords":198,"publishedAt":54},"01M71TPT5T10WXNKW9G7ZXZ27W","youtube-summarizer","Extract transcripts from YouTube videos and generate comprehensive, detailed summaries using intelligent analysis frameworks","https:\u002F\u002Fgithub.com\u002Fjaviertarazon\u002Fide-agente-free-jt7-\u002Fblob\u002Frelease\u002Fv4.2.11-panel-pro\u002F.github\u002Fskills\u002Fyoutube-summarizer\u002FSKILL.md",[195],{"categoryNo":196,"categoryName":197,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000016","图像与多媒体",[199,200,201,202,53,203,204,205,206,207,208,209,184,210,211,212,213,214,215,216],"summarizer","youtube","youtube summarizer","Video","content-analysis","frameworks","copilot","2025","github-copilot","extract transcripts","analysis","codex","cli","summaries","github","generate","summarization","2026"]