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.

PromptBuild 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