Dashboard Builder
by BLSQ
Orchestrator for creating interactive HTML dashboards in OpenHexa. Use when users ask to create a dashboard, build a dashboard, make a visualization dashboard, display data in charts, or create visual reports. This skill coordinates the technical stack, data querying, maps, and branding skills to produce complete, professional dashboards.
Skill Details
Repository Files
1 file in this skill directory
name: dashboard-builder description: Orchestrator for creating interactive HTML dashboards in OpenHexa. Use when users ask to create a dashboard, build a dashboard, make a visualization dashboard, display data in charts, or create visual reports. This skill coordinates the technical stack, data querying, maps, and branding skills to produce complete, professional dashboards.
Dashboard Builder
Create interactive HTML dashboards for OpenHexa workspaces.
Workflow
Follow these steps in order when creating a dashboard:
- Read branding guidelines → Load
openhexa-brandingskill for colors and theme - Read technical stack → Load
dashboard-technical-stackskill for GridStack/ECharts/Tailwind setup - Determine data source → Load
dashboard-queryingskill to test API and decide dynamic vs static - If maps needed → Load
dashboard-mapsskill for geographic visualizations - Generate dashboard → Write the complete HTML file
Workspace Configuration
Use these environment variables in generated code:
| Variable | Usage |
|---|---|
${HEXA_WORKSPACE} |
Workspace slug for API calls |
${WORKSPACE_DATABASE_DB_NAME} |
Database name for API calls |
${BROWSER_API_URL} |
Base URL for API endpoints |
${DASHBOARDS_DIR} |
Directory to save dashboard files |
File Output Location
Always save dashboard files to:
${DASHBOARDS_DIR}/
Dashboard Creation Checklist
Before generating, ensure:
- Branding colors applied (read
openhexa-branding) - GridStack configured for drag/resize (read
dashboard-technical-stack) - ECharts properly sized and responsive (read
dashboard-technical-stack) - Data fetching method determined (read
dashboard-querying) - Maps configured if geographic data present (read
dashboard-maps) - File saved to correct location (
${DASHBOARDS_DIR}) - HTML syntax verified
Quick Reference
Required Libraries (CDN)
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- GridStack -->
<link href="https://cdn.jsdelivr.net/npm/gridstack@10/dist/gridstack.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/gridstack@10/dist/gridstack-all.min.js"></script>
<!-- ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
Minimal Dashboard Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard Title</title>
<!-- Include CDN libraries here -->
</head>
<body class="bg-gray-50 min-h-screen">
<!-- Header with branding -->
<header class="bg-[#1E3A5F] text-white py-4 px-6">
<h1 class="text-xl font-semibold">Dashboard Title</h1>
</header>
<!-- GridStack container -->
<div class="grid-stack p-4">
<!-- Widgets added here -->
</div>
<!-- Footer -->
<footer class="bg-[#FDF2F8] py-4 px-6 text-sm text-[#1E3A5F]">
Generated with OpenHexa
</footer>
<script>
// Initialize GridStack and charts
</script>
</body>
</html>
Example Tasks
- "Create a dashboard showing data from the {table_name} table"
- "Build a dashboard with charts for sales data"
- "Make a visualization dashboard for health indicators"
- "Create a map dashboard showing regional data"
Related Skills
Xlsx
Comprehensive spreadsheet creation, editing, and analysis with support for formulas, formatting, data analysis, and visualization. When Claude needs to work with spreadsheets (.xlsx, .xlsm, .csv, .tsv, etc) for: (1) Creating new spreadsheets with formulas and formatting, (2) Reading or analyzing data, (3) Modify existing spreadsheets while preserving formulas, (4) Data analysis and visualization in spreadsheets, or (5) Recalculating formulas
Clickhouse Io
ClickHouse database patterns, query optimization, analytics, and data engineering best practices for high-performance analytical workloads.
Clickhouse Io
ClickHouse database patterns, query optimization, analytics, and data engineering best practices for high-performance analytical workloads.
Analyzing Financial Statements
This skill calculates key financial ratios and metrics from financial statement data for investment analysis
Data Storytelling
Transform data into compelling narratives using visualization, context, and persuasive structure. Use when presenting analytics to stakeholders, creating data reports, or building executive presentations.
Team Composition Analysis
This skill should be used when the user asks to "plan team structure", "determine hiring needs", "design org chart", "calculate compensation", "plan equity allocation", or requests organizational design and headcount planning for a startup.
Startup Financial Modeling
This skill should be used when the user asks to "create financial projections", "build a financial model", "forecast revenue", "calculate burn rate", "estimate runway", "model cash flow", or requests 3-5 year financial planning for a startup.
Kpi Dashboard Design
Design effective KPI dashboards with metrics selection, visualization best practices, and real-time monitoring patterns. Use when building business dashboards, selecting metrics, or designing data visualization layouts.
Dbt Transformation Patterns
Master dbt (data build tool) for analytics engineering with model organization, testing, documentation, and incremental strategies. Use when building data transformations, creating data models, or implementing analytics engineering best practices.
Startup Metrics Framework
This skill should be used when the user asks about "key startup metrics", "SaaS metrics", "CAC and LTV", "unit economics", "burn multiple", "rule of 40", "marketplace metrics", or requests guidance on tracking and optimizing business performance metrics.