Execute qualquer Skill no Manus
com um clique

Execute qualquer Skill no Manus com um clique

dashboard-builder

Estrelas0

Forks0

Atualizado29 de janeiro de 2026 às 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.

Instalação

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Executar no Manus

Fonte

BLSQ

BLSQ/mcp_servers

Abrir repositório GitHub Ver repositórios do creator

Download

Executar no Manus

Ocupações relacionadasSOC

Baseado na classificação ocupacional SOC

Desenvolvedores de softwareInformática e Matemática·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"

Mais deste repositório

mesmo repositório

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"