Interactive Dashboard Artifact
Prompt for a dashboard and get a working interactive HTML artifact with charts and channel breakdowns.
Content Creationcontent-creationp4
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 a sample sales dashboard to show our client proposal”
Beforegeneric AI agent
I can create a dashboard for you that would work as a proposal mockup. A dashboard like that typically includes some charts showing sales data over time, maybe broken down by channel or region. I could put together something with sample data that looks professional and gives your client an idea of what a real dashboard might look like. Do you want specific metrics? And do you have any data I can use, or should I generate sample data? What kind of layout are you thinking about — maybe a grid of cards with charts? I can make it interactive too, so you can show how filters might work.
Afterwith Interactive Dashboard Artifact
INTERACTIVE SALES DASHBOARD BLUEPRINT: MODUL 1: Key Metrics Row (top) • Total revenue: 487,320 (this quarter) • New customers: 142 • Win rate: 34 percent • Average contract value: 12,400 MODUL 2: Revenue Trend (left side, line chart) X-axis: Week 1–13 (this quarter) Y-axis: Revenue per week Two lines: Direct sales (blue), channel sales (orange) Sample data: Week 1 at 28K, trending to Week 13 at 42K MODUL 3: Channel Breakdown (center, stacked bar chart) Channels: Inside sales (45 percent), partner channel (30 percent), direct (20 percent), affiliate (5 percent) MODUL 4: Customer Acquisition by Stage (right, funnel) • Outreach: 890 leads → conversion 16 percent • Proposal: 143 deals → conversion 67 percent • Negotiation: 96 deals → closure 81 percent MODUL 5: Filters (above charts) • Date range: preset 30/90 days or custom • Region: All / North America / EMEA / APAC • Product line: All / Platform / Services / Add-ons FORMAT: Responsive HTML, editable color palette, export-ready for client. No backend required — sample data embedded.
About this skill
name: dashboard-artifact-blueprint description: Prompt for a dashboard and get a working interactive HTML artifact with charts and channel breakdowns. Use when working on interactive dashboard artifact.
Interactive Dashboard Artifact
Asks whether you want a dashboard, tool, landing, or other artifact, then generates an interactive responsive HTML page seeded with real chart primitives. Great as a proposal blueprint or as a starting point for a real dashboard. Use to ship a plausible-looking data view without wiring a backend.
What you get
- Responsive dashboard
- Bar and line charts
- Filters
- Export-ready HTML
- Sample data
- Editable color palette
Customize your output
- Metrics: choose from list
- Time range: 7d, 30d, 90d, custom
- Channel taxonomy: default, custom
- Layout: single-column, two-column, grid
- Color palette: brand, default
- Sample-data source: synthetic, upload CSV
Example output
'A sales dashboard with weekly and monthly traffic-channel analysis and channel-level session bars.'
Best for
Analysts, agencies, ops leads.
Note: High confidence. Great as a client proposal artifact.
SKILL.md preview
SKILL.md
---
name: dashboard-artifact-blueprint
description: Use when a user asks for a dashboard, tool, landing page, or other visual artifact and wants a working interactive HTML page with charts as a starting point or proposal.
version: 1.0.0
category: Content Creation
author: AgentVolt
license: proprietary
tags:
- content-creation
- p4
---
# Interactive Dashboard Artifact
Determines what kind of artifact the user actually wants (dashboard, tool, landing page, or other), then generates an interactive, responsive HTML page seeded with real chart primitives as a proposal blueprint or starting point.
## When to use
… (sign up to view the full skill)Sign up to view, copy, and install the full skill