dashboard-creator

Solid

Create HTML dashboards with KPI metric cards, bar/pie/line charts, progress indicators, and data visualizations. Use when users request dashboards, metrics displays, KPI visualizations, data charts, or monitoring interfaces.

AI & Automation 671 stars 96 forks Updated 1 months ago Apache-2.0

Install

View on GitHub

Quality Score: 85/100

Stars 20%

Recency 20%

Frontmatter 20%

Documentation 15%

Issue Health 10%

License 10%

100

Description 5%

100

Skill Content

# Dashboard Creator Create interactive HTML dashboards with KPI cards and charts. ## When to Use - "Create dashboard for [metrics]" - "Show KPI visualization" - "Generate performance dashboard" - "Make analytics dashboard with charts" ## Components 1. **KPI Cards**: metric name, value, change %, trend icon 2. **Charts**: bar/pie/line using SVG or CSS 3. **Progress Bars**: completion indicators 4. **Data Tables**: tabular data display ## HTML Structure ```html <!DOCTYPE html> <html> <head> <title>[Project] Dashboard</title> <style> body { font-family: system-ui; background: #f7fafc; } .kpi-card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .kpi-value { font-size: 36px; font-weight: bold; } .trend-up { color: #48bb78; } .trend-down { color: #e53e3e; } </style> </head> <body> <h1>[Dashboard Name]</h1> <div class="grid">    </div> </body> </html> ``` ## KPI Card Pattern ```html <div class="kpi-card"> <div class="kpi-label">Revenue</div> <div class="kpi-value">$124K</div> <div class="trend-up">↑ 12.5%</div> </div> ``` ## Chart Pattern (SVG Bar Chart) ```html <svg viewBox="0 0 400 300"> <rect x="50" y="100" width="40" height="150" fill="#4299e1"/> <rect x="120" y="80" width="40" height="170" fill="#48bb78"/>  </svg> ``` ## Workflow 1. Extract metrics and data 2. Create KPI card...

Details

Author: mhattingpete
Repository: mhattingpete/claude-skills-marketplace
Created: 10 months ago
Last Updated: 1 months ago
Language: HTML
License: Apache-2.0

Integrates with

Anthropic · AI

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Solid

interactive-dashboard-builder

Chart.js を使ったインタラクティブなHTMLダッシュボードを構築するスキル。「ダッシュボードを作って」「インタラクティブなレポート」「HTMLチャート作成」等のリクエストで発動。フィルター・グラフ・プロフェッショナルなスタイリング付きのスタンドアロンHTMLを生成。

347 Updated 1 weeks ago

minicoohei

Data & Documents Listed

chart-dashboard

Build a self-contained HTML dashboard, data-story report, or slide deck from supplied information (metrics, tables, notes, pasted data, a topic), rendered with the bundled zero-dependency charts-lib SVG chart library. Use whenever the user asks for a dashboard, analytics page, KPI/bento view, illustrated report, or a presentation, slides or a deck built from data they provide or describe.

1 Updated today

raghuramsirigiri

Web & Frontend Listed

ami-dashboard-builder

Build high-impact interactive web dashboards and publication-quality Python data visualizations. Translates analytical datasets and KPIs into responsive visual narratives.

0 Updated 5 days ago

AnaCataVC