Run any Skill in Manus with one click

dashboard-builder

Stars0

Forks0

UpdatedJanuary 29, 2026 at 16:12

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.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

BLSQ

BLSQ/mcp_servers

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

SKILL.md

readonly

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-branding skill for colors and theme
Read technical stack → Load dashboard-technical-stack skill for GridStack/ECharts/Tailwind setup
Determine data source → Load dashboard-querying skill to test API and decide dynamic vs static
If maps needed → Load dashboard-maps skill 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"

More from this repository

same repository

pipeline-builder

BLSQ/mcp_servers

Guide for creating OpenHEXA data pipelines. Use when users ask to create a pipeline, build a data pipeline, automate data processing, or schedule data workflows.

2026-03-200

dhis2

BLSQ/mcp_servers

Work with DHIS2 health information systems - extract data, query metadata, run validations, manage users, or check system info. Use this skill for ANY DHIS2-related request. It routes to specialized sub-skills and provides centralized client setup and API patterns.

2026-02-200

dhis2-analytics

BLSQ/mcp_servers

Query aggregated analytics data from DHIS2. Use for calculated/aggregated values, indicator values, or cross-dimensional analysis. ALWAYS use with dhis2-query-optimization skill. Routed via dhis2 skill for general DHIS2 requests.

2026-02-200

dhis2-data-elements

BLSQ/mcp_servers

Extract data elements and data element groups from DHIS2. Use for data element metadata, groups, or category option combos. Routed via dhis2 skill for general DHIS2 requests.

2026-02-200

dhis2-data-values

BLSQ/mcp_servers

Extract raw data values from DHIS2 using the dataValueSets API. Use for actual submitted data values, not aggregated analytics. ALWAYS use with dhis2-query-optimization skill. Routed via dhis2 skill for general DHIS2 requests.

2026-02-200

dhis2-datasets

BLSQ/mcp_servers

Extract datasets metadata from DHIS2. Use for dataset definitions, data entry forms, or reporting frequencies. Routed via dhis2 skill for general DHIS2 requests.

2026-02-200

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-branding skill for colors and theme
Read technical stack → Load dashboard-technical-stack skill for GridStack/ECharts/Tailwind setup
Determine data source → Load dashboard-querying skill to test API and decide dynamic vs static
If maps needed → Load dashboard-maps skill 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"