
executive-dashboard
Эксперт executive dashboards. Используй для KPI визуализации, business intelligence и reporting.
- Installs
- 76
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/dengineproblem/agents-monorepo --skill executive-dashboard- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads executive-dashboard automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Executive Dashboard Expert
Expert in designing and building executive dashboards that deliver actionable insights to C-level executives and senior leadership.
Core Dashboard Principles
Strategic Focus
- Lead with business outcomes, not data points
- Align KPIs directly to company objectives and strategic initiatives
- Prioritize forward-looking metrics over historical reporting
- Enable drill-down capabilities without overwhelming the main view
- Design for mobile and presentation contexts
Information Hierarchy
- Follow the "5-second rule" - key insights visible immediately
- Use progressive disclosure: summary → trends → details
- Implement the "traffic light" system for status indicators
- Group related metrics into coherent business themes
- Maintain consistent terminology across all metrics
Essential KPI Categories
Financial Performance
const financialKPIs = {
revenue: {
current: 'Monthly Recurring Revenue (MRR)',
trend: 'Revenue Growth Rate (YoY)',
health: 'Revenue per Employee',
forecast: 'Pipeline Value & Conversion Rate'
},
profitability: {
margin: 'Gross Margin %',
efficiency: 'Operating Expense Ratio',
cash: 'Cash Flow & Burn Rate',
roi: 'Return on Investment by Initiative'
},
unit_economics: {
cac: 'Customer Acquisition Cost',
ltv: 'Customer Lifetime Value',
ltv_cac_ratio: 'LTV:CAC Ratio (target: 3:1)',
payback: 'CAC Payback Period'
}
};
Operational Excellence
const operationalKPIs = {
customers: {
acquisition: 'Customer Acquisition Cost (CAC)',
retention: 'Net Revenue Retention (NRR)',
satisfaction: 'Net Promoter Score (NPS)',
lifetime: 'Customer Lifetime Value (CLV)',
churn: 'Monthly/Annual Churn Rate'
},
performance: {
quality: 'Defect Rate & SLA Performance',
speed: 'Time to Market & Cycle Time',
capacity: 'Utilization Rates & Capacity Planning'
},
growth: {
pipeline: 'Sales Pipeline Coverage',
conversion: 'Stage Conversion Rates',
velocity: 'Deal Velocity'
}
};
Dashboard Layout Patterns
Executive Summary Layout
<!-- Top-level executive view -->
<div class="executive-dashboard">
<!-- Hero Metrics (top 20% of screen) -->
<section class="hero-metrics">
<div class="primary-kpi">Revenue: $2.3M ↗️ 12%</div>
<div class="status-indicators">
<span class="green">Growth</span>
<span class="yellow">Margins</span>
<span class="red">Churn</span>
</div>
</section>
<!-- Key Trends (middle 60%) -->
<section class="trend-charts">
<div class="chart-grid">
<chart type="line" data="revenue-trend" period="12mo"/>
<chart type="gauge" data="nps-score" target="50"/>
<chart type="funnel" data="sales-pipeline"/>
<chart type="heatmap" data="regional-performance"/>
</div>
</section>
<!-- Action Items (bottom 20%) -->
<section class="action-items">
<alert type="critical">Customer churn up 3% - immediate action required</alert>
<insight>Marketing ROI improved 24% - scale successful campaigns</insight>
</section>
</div>
CSS Grid Layout
.executive-dashboard {
display: grid;
grid-template-areas:
"hero hero hero hero"
"chart1 chart1 chart2 chart2"
"chart3 chart4 chart5 chart6"
"alerts alerts insights insights";
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto 1fr 1fr auto;
gap: 24px;
padding: 24px;
min-height: 100vh;
}
.hero-metrics {
grid-area: hero;
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(135deg, #1a365d 0%, #2d3748 100%);
border-radius: 12px;
padding: 32px;
}
.primary-kpi {
font-size: 48px;
font-weight: 700;
color: white;
}
.status-indicator {
padding: 8px 16px;
border-radius: 20px;
font-weight: 600;
}
.status-indicator.green { background: #48bb78; }
.status-indicator.yellow { background: #ecc94b; color: #1a202c; }
.status-indicator.red { background: #f56565; }
Data Visualization Best Practices
Chart Selection Guidelines
def select_chart_type(data_type, purpose):
chart_mapping = {
('trend', 'time_series'): 'line_chart',
('comparison', 'categories'): 'bar_chart',
('part_to_whole', 'composition'): 'donut_chart',
('performance', 'target'): 'gauge_chart',
('correlation', 'scatter'): 'scatter_plot',
('geographic', 'regional'): 'choropleth_map',
('process', 'conversion'): 'funnel_chart',
('distribution', 'variance'): 'box_plot',
('ranking', 'top_n'): 'horizontal_bar',
('change', 'waterfall'): 'waterfall_chart'
}
return chart_mapping.get((data_type, purpose), 'table')
# Executive dashboard color palette
EXEC_COLORS = {
'success': '#00A86B', # Green - targets met/exceeded
'warning': '#FFB000', # Amber - attention needed
'critical': '#D2222D', # Red - immediate action required
'neutral': '#708090', # Gray - informational
'primary': '#1f4e79', # Navy - brand/emphasis
'secondary': '#4a5568', # Dark gray - secondary elements
'background': '#f7fafc' # Light gray - backgrounds
}
Interactive Elements
class ExecutiveDashboard {
constructor() {
this.filters = {
timeframe: 'YTD',
region: 'All',
business_unit: 'All'
};
this.alertThresholds = {
revenue_variance: 0.05,
customer_churn: 0.02,
margin_decline: 0.03
};
}
// Auto-refresh critical metrics
setupRealTimeUpdates() {
setInterval(() => {
this.updateMetrics(['revenue', 'active_users', 'system_health']);
this.checkAlertConditions();
}, 300000); // 5-minute intervals
}
// Contextual drill-downs
enableDrillDown(metric, level = 'summary') {
const drillPaths = {
'revenue': ['total', 'by_product', 'by_region', 'by_customer'],
'churn': ['rate', 'by_segment', 'by_reason', 'cohort_analysis'],
'pipeline': ['total', 'by_stage', 'by_rep', 'by_source']
};
return drillPaths[metric] || ['summary'];
}
// Export for board presentations
exportToPDF() {
return {
format: 'landscape',
pages: ['executive_summary', 'financial', 'operational'],
branding: true,
timestamp: new Date().toISOString()
};
}
}
Executive Communication Features
Automated Insights
def generate_executive_insights(metrics_data):
insights = []
# Trend analysis
if metrics_data['revenue_growth'] > 0.15:
insights.append({
'type': 'opportunity',
'message': f"Revenue accelerating at {metrics_data['revenue_growth']:.1%} - consider scaling successful initiatives",
'action': 'Review top-performing channels for expansion'
})
# Anomaly detection
if abs(metrics_data['current_vs_forecast']) > 0.1:
insights.append({
'type': 'alert',
'message': 'Significant variance from forecast detected',
'impact': 'May affect quarterly targets',
'next_steps': 'Schedule forecast review meeting'
})
# Churn warning
if metrics_data['churn_rate'] > metrics_data['churn_threshold']:
insights.append({
'type': 'critical',
'message': f"Churn rate at {metrics_data['churn_rate']:.1%} exceeds threshold",
'impact': f"Potential ARR loss: ${metrics_data['at_risk_arr']:,.0f}",
'next_steps': 'Activate retention playbook'
})
return sorted(insights, key=lambda x: {'critical': 0, 'alert': 1, 'opportunity': 2}[x['type']])
Board Presentation Export
// Board presentation export
function exportToBoardDeck() {
const slideTemplates = {
'executive_summary': {
layout: 'hero_metrics_with_trend',
charts: ['revenue_trend', 'key_kpis_table'],
insights: 'auto_generated'
},
'financial_performance': {
layout: 'financial_grid',
charts: ['revenue_waterfall', 'margin_analysis', 'cash_flow'],
commentary: 'variance_explanation'
},
'operational_highlights': {
layout: 'balanced_scorecard',
charts: ['customer_metrics', 'efficiency_trends'],
actions: 'priority_initiatives'
},
'forward_look': {
layout: 'forecast_view',
charts: ['pipeline_coverage', 'growth_projections'],
risks: 'risk_register_summary'
}
};
return generatePresentation(slideTemplates);
}
Performance and Scalability
Data Refresh Strategy
-- Executive dashboard data mart optimization
CREATE MATERIALIZED VIEW executive_kpis_daily AS
SELECT
date_key,
SUM(revenue) as total_revenue,
COUNT(DISTINCT customer_id) as active_customers,
AVG(satisfaction_score) as avg_nps,
SUM(revenue) / COUNT(DISTINCT customer_id) as revenue_per_customer,
SUM(CASE WHEN is_churned THEN arr ELSE 0 END) as churned_arr,
SUM(CASE WHEN is_new THEN arr ELSE 0 END) as new_arr
FROM fact_daily_metrics
WHERE date_key >= CURRENT_DATE - INTERVAL '2 years'
GROUP BY date_key;
-- Create index for fast filtering
CREATE INDEX idx_exec_kpis_date ON executive_kpis_daily(date_key);
-- Refresh every 4 hours for near real-time executive view
SELECT cron.schedule('refresh-exec-dashboard', '0 */4 * * *',
'REFRESH MATERIALIZED VIEW CONCURRENTLY executive_kpis_daily;');
Caching Strategy
const cacheConfig = {
// Hero metrics - most viewed, short cache
heroMetrics: {
ttl: 300, // 5 minutes
preload: true
},
// Trend charts - moderate cache
trendCharts: {
ttl: 900, // 15 minutes
preload: false
},
// Historical data - long cache
historicalData: {
ttl: 3600, // 1 hour
preload: false
},
// Real-time metrics - no cache
realTimeMetrics: {
ttl: 0,
streaming: true
}
};
Mobile Optimization
/* Mobile-first executive dashboard */
@media (max-width: 768px) {
.executive-dashboard {
grid-template-areas:
"hero"
"chart1"
"chart2"
"alerts";
grid-template-columns: 1fr;
padding: 16px;
}
.primary-kpi {
font-size: 32px;
}
.chart-container {
min-height: 200px;
}
/* Touch-friendly controls */
.filter-button {
min-height: 44px;
min-width: 44px;
}
}
Testing and Validation
Dashboard Quality Checklist
- 5-Second Test: Key insights visible immediately upon load
- Mobile Compatibility: Readable on executive mobile devices
- Data Accuracy: Automated validation against source systems
- Performance: < 3 second load times for all views
- Accessibility: Color-blind friendly palette and screen reader support
- Stakeholder Validation: Monthly review sessions with dashboard users
Automated Testing
def test_dashboard_accuracy():
"""Compare dashboard values to source systems."""
dashboard_revenue = get_dashboard_metric('total_revenue')
source_revenue = query_source_system('SELECT SUM(amount) FROM orders')
variance = abs(dashboard_revenue - source_revenue) / source_revenue
assert variance < 0.001, f"Revenue variance {variance:.2%} exceeds threshold"
Лучшие практики
- 5-second rule — ключевые метрики видны сразу
- Progressive disclosure — от общего к деталям
- Mobile-first — работает на телефоне CEO
- Real-time where needed — критичные метрики обновляются часто
- Actionable insights — не просто данные, а рекомендации
- Consistent design — единый визуальный язык
FAQ
What does the executive-dashboard skill do?
Эксперт executive dashboards. Используй для KPI визуализации, business intelligence и reporting.
How do I install executive-dashboard?
Run npx skills add https://github.com/dengineproblem/agents-monorepo --skill executive-dashboard in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/executive-dashboard/ (personal) or .claude/skills/executive-dashboard/ (project).
Which AI agents can use executive-dashboard?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is executive-dashboard safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains executive-dashboard?
It is published by dengineproblem in dengineproblem/agents-monorepo. It has 76 recorded installs.
More from dengineproblem/agents-monorepo
social-media-marketing
dengineproblem/agents-monorepo
Эксперт по SMM. Используй для стратегий в Instagram, Facebook, TikTok, LinkedIn, контент-планов и community management.
frontend-design
dengineproblem/agents-monorepo
Open the skill to read its SKILL.md instructions.
video-marketing
dengineproblem/agents-monorepo
Open the skill to read its SKILL.md instructions.
k6-load-test
dengineproblem/agents-monorepo
Open the skill to read its SKILL.md instructions.
b2b-saas-marketing
dengineproblem/agents-monorepo
Open the skill to read its SKILL.md instructions.
seo-expert
dengineproblem/agents-monorepo
Open the skill to read its SKILL.md instructions.
Popular data & databases skills
supabase-postgres-best-practices
supabase/agent-skills
Postgres best practices maintained by Supabase, for Postgres running anywhere. Load this skill BEFORE writing or changing anything that lives in a Postgres database: creating or altering tables and columns (including choosing column types), schema design, migrations and declarative schema files, RLS policies and the tests that verify them, indexes, triggers, database functions, queues and scheduled jobs (pgcron, pgmq), vector/semantic search (pgvector), and restoring dumps (pgrestore) or importing data. Also load it when diagnosing slow queries, high CPU, timeouts, EXPLAIN plans, connection exhaustion, locking, bloat, or rows visible to the wrong user or tenant. This is not just a performance guide — schema, migration, security, and SQL authoring tasks need these rules too, even for a one-column change or a single query.
prisma-client-api
prisma/skills
Prisma Client API reference covering model queries, filters, operators, and client methods. Use when writing database queries, using CRUD operations, filtering data, or configuring Prisma Client. Triggers on "prisma query", "findMany", "create", "update", "delete", "$transaction".
prisma-database-setup
prisma/skills
Deprecated compatibility name for prisma-orm-setup. Use only when a user or existing integration explicitly invokes prisma-database-setup; otherwise select prisma-orm-setup.
prisma-cli
prisma/skills
Prisma ORM 7 CLI reference for existing Prisma 7 applications or explicitly selected Prisma 7 workflows. Covers prisma init, generate, migrate, db, dev, studio, and mcp. For setup, connection repair, or Prisma 8, use prisma-orm-setup; not the Prisma Platform CLI.
prisma-postgres
prisma/skills
Deprecated compatibility name for prisma-postgres-setup. Use only when a user or existing integration explicitly invokes prisma-postgres; otherwise select prisma-postgres-setup.
prisma-driver-adapter-implementation
prisma/skills
Required reference for Prisma ORM 7 SQL driver adapter work. Use when implementing or modifying adapters, adding database drivers, or touching SqlDriverAdapter, Transaction, savepoint, result mapping, or DriverAdapterError behavior. Covers current transaction lifecycle, optional savepoint hooks, original database-error preservation, and verification.