Interactive Dashboard Prototype (Single HTML File)
A one-file HTML dashboard with working filters, charts, and KPI cards on labeled sample data that adds up, for proposals or a real build.
Before & after
Same prompt, same agent — the only difference is the skill.
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.
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
Show a client or stakeholder a dashboard that behaves like the real thing. Every filter updates every number, and the numbers actually add up.
What it does
- Picks 3-6 KPIs tied to the decision the dashboard supports, with formulas
- Seeds realistic, clearly labeled sample data that is identical on every load
- Computes CTR, CPA, ROAS, and other ratios correctly as ratio of sums
- Builds responsive cards, line and bar charts, a sortable table, and working date and channel filters
What you get
A short spec, the complete single HTML file, and a note on exactly where to plug in real data.
Best for
Agencies, analysts, and founders who need a convincing dashboard prototype for a proposal or a head start on a real build.
SKILL.md preview
---
name: dashboard-artifact-blueprint
description: Build a single-file, interactive HTML dashboard prototype (KPI cards, line and bar charts, channel breakdowns, working date and channel filters) seeded with clearly labeled, internally consistent sample data - for a client proposal, a stakeholder mockup, or the starting point of a real build. Use when the user says "mock up a marketing dashboard", "build me a dashboard to show a client", "dashboard prototype with sample data", "what could our reporting view look like", "make an interactive dashboard HTML", or "sales dashboard with channel breakdown".
---
# Interactive Dashboard Prototype (Single HTML File)
… (sign up to view the full skill)More development skills
View all Development skills →Frontend Component UX and Accessibility Review
Severity-ranked fixes with code for UI components: states, keyboard, focus, ARIA, touch targets, contrast, and responsive breakage.
Three.js Click-to-Learn 3D Game Builder
Build click-to-learn 3D games in Three.js: TSL materials, reliable object picking, and an accessible quiz overlay fed by content data.
Angular Standalone Features and State Architecture
Build Angular standalone features with lazy routes, scoped state, safe RxJS flows, and targeted tests.
shadcn/ui Component Building and Theming
Build, theme, and debug shadcn/ui components the way the library is designed to work, with Tailwind v3 and v4 theming handled correctly.