Dashboard Skill
Arranges data like a real analytics dashboard instead of a generic layout.
by AgentVoltv1.0.0Published 1y ago1 install
Free to sign up · every skill included with AgentVolt Pro
Before & after
Same prompt, same agent — the only difference is the skill.
Prompt“Build an analytics dashboard showing KPIs and trends that tells a story”
Beforegeneric AI agent
Analytics dashboards should present data in an organized way. Include key metrics your business cares about. Use charts to show trends over time. Add filters so users can drill down into specific segments or time periods. Think about what story your data tells and arrange elements to highlight that. Make sure the dashboard is easy to scan and understand. Include context like comparisons to last period or targets. Test with actual users to see if the information helps them make decisions.
Afterwith Dashboard Skill
ANALYTICS DASHBOARD DESIGN
OBJECTIVE
Dashboard tells a business story: Company health at a glance, with drill-down capability
LAYOUT HIERARCHY (Visual prioritization)
TOP ROW: PRIMARY METRICS (Hero section, largest)
• Total Revenue MTD: 1.24M (↑12% vs last month)
• Customer Acquisition Cost: $85 (↓5%, optimizing)
• Churn Rate: 3.2% (↓0.4%, trend improving)
• NPS Score: 72 (stable, benchmark: 68)
→ Executive summary in 8 seconds
SECOND ROW: TRENDS & MOMENTUM
• Revenue Trend (line chart, 12-month view)
- Green line, gray target line overlay
- Shows growth trajectory
• Churn by Cohort (stacked bar chart)
- Shows newest cohorts have lower churn
- Diagnose: Is churn a product issue or cohort aging?
THIRD ROW: CONVERSION FUNNEL (Sequential story)
• Sign-ups → Trial → Paid Conversion
• Waterfall chart showing drop-off at each step
• Labels: Sign-ups 1200 → Trial 480 (40% conversion)
• Color warmth decreases down funnel
• Identifies biggest leak
FOURTH ROW: SEGMENTATION & DRILL-DOWN
• Revenue by channel (pie chart)
- Direct 45%, Affiliate 30%, Partner 25%
- Click to drill into channel details
• Customer LTV by segment (bar chart, ranked high to low)
- Enterprise $15K, Mid-market $3.2K, Small biz $600
- Shows which segment matters most
FIFTH ROW: COMPARISON & CONTEXT
• Performance vs Target (gauge chart)
- Revenue target $1.2M, Actual $1.24M (exceeded 3%)
- Churn target <3.5%, Actual 3.2% (on track)
- CAC target <$100, Actual $85 (better)
• YoY comparison (small line chart, 12 months overlaid)
- Current year vs prior year
- Shows seasonal patterns
FILTERS & CONTROLS (Top of dashboard)
• Date range: Calendar (default: MTD, shortcuts: Last 30 days, YTD)
• Segment: Dropdown (All, Enterprise, Mid-market, Small biz)
• Channel: Checkbox (All, Direct, Affiliate, Partner)
• Cohort: Filter by acquisition month
→ All filters update charts in real-time
COLOR STRATEGY
• Revenue: Green (positive momentum)
• Churn: Amber (watch this)
• NPS: Teal (North Star KPI)
• Benchmarks: Gray
• Reserve red for emergencies only
DESIGN REASONING
1. Hero metrics first → Answer "Is business healthy?" in 8 seconds
2. Funnel visualization → Shows where revenue is lost
3. Cohort churn → Reveals if product improving
4. Filters not multiple dashboards → One view, many perspectives
5. Comparison section → Context without clutter
INTERACTIVE FEATURES
• Hover on chart: Show exact value + % change
• Click funnel stage: Drill to users at that stage
• Click segment: Filter dashboard to that segment only
• Export: Download as PDF or CSV
REFRESH CADENCE
• Hero metrics: Every 1 hour
• Trend charts: Every 6 hours
• Funnel: Daily
• Filters: Real-time
SUCCESS CRITERIA
• Decision time: Exec makes call in <2 min (vs 15 min in spreadsheet)
• Drill-down path clear: User knows where to click to explore
• Color-coding consistent: Green/amber/teal mean same across charts
• No table charts: All data visual (charts only)
• Mobile-friendly: Works on tablet (stacked layout)
COMMON PITFALLS AVOIDED
• Not 30+ metrics on one screen (pick 5-7 hero metrics)
• Avoid chart types that don't tell story (no 3D pie charts)
• Font size legible from 3 feet away
• Always compare to target or prior period
• No static filters (allow drill-down from chart)About this skill
name: dashboard-skill description: Use when Arranges data like a real analytics dashboard instead of a generic layout.
Dashboard Skill
Gives Claude a structured approach to laying out data-heavy dashboard interfaces, positioning charts, tables, and KPIs the way a real analytics product would.
What you get
- SKILL.md with dashboard layout and data visualization guidance.
Customize your output
- Works alongside any charting library.
Example output
Analytics dashboard layouts with proper visual hierarchy.
Best for
Developers and founders building internal tools or SaaS dashboards.
SKILL.md preview
SKILL.md
---
name: dashboard-skill
description: Use this skill when arranging data-heavy interfaces so they read like a real analytics dashboard instead of a generic layout.
version: 1.0.0
category: Design / Design and Frontend
author: AgentVolt
license: proprietary
tags:
- design
- design-and-frontend
- standard
---
# Dashboard Skill
Gives a structured approach to laying out data-heavy dashboard interfaces — positioning charts, tables, and KPIs the way a real analytics product would, rather than a generic grid of boxes.
## When to use
… (sign up to view the full skill)Sign up to view, copy, and install the full skill
More design skills
View all Design skills →Frontend UI UX Skill (oh-my-opencode)
A frontend UI and UX focused skill from the oh-my-opencode toolkit.
Design
Mobile App UI Design Skill
Guides Claude in designing native feeling mobile app interfaces.
Design
Premium Frontend UI Skill
Pushes generated frontend UI toward a premium, polished visual style.
Design
Material 3 Skill
Teaches Claude Google Material 3 design system conventions.
Design