skills.rest
Starchild-ai-agent
Starchild-ai-agentOFFICIAL
Explore all skills by this author →
GitHub

dashboard

Generate interactive HTML/CSS/JavaScript dashboards with Chart.js or ApexCharts and real-time data via SSE or WebSockets.

22|12|Updated Mar 13, 2026
Search Tags:#html#data visualization#javascript#dashboard#real-time#api integration
One-click install
npx skills add https://github.com/Starchild-ai-agent/official-skills --skill dashboard-starchild-ai-agent
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dashboard
Source: https://github.com/Starchild-ai-agent/official-skills/tree/main/dashboard
Command: npx skills add https://github.com/Starchild-ai-agent/official-skills --skill dashboard-starchild-ai-agent

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill empowers users to create professional, interactive dashboards for visualizing data, enabling better decision-making through clear and real-time insights.

Core Features & Use Cases

  • Data Source Discovery: Find and integrate free and premium data sources.
  • Dashboard Generation: Create responsive HTML/CSS/JS dashboards using templates or custom code.
  • Visualization Integration: Implement charts with libraries like Chart.js and ApexCharts.
  • Real-time Updates: Stream data using SSE or WebSockets.
  • Use Case: Build a live sales dashboard showing revenue trends, user acquisition, and conversion rates, updated in real-time from various APIs.

Quick Start

Use the dashboard skill to create a basic HTML dashboard using the Tabler template.

Frequently Asked Questions about dashboard

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build an interactive HTML dashboard with real-time data updates?▼

Build interactive HTML dashboards with real-time updates by generating HTML/CSS/JavaScript code that streams data via SSE or WebSockets and visualizes it using Chart.js or ApexCharts libraries.

What's the best way to integrate Chart.js and ApexCharts into a responsive data visualization dashboard?▼

Integrate Chart.js and ApexCharts into a responsive dashboard by generating custom HTML/CSS/JS code that adheres to 2025-2026 best practices for responsive design, accessibility, and performance optimization.

Can I use WebSockets and SSE for real-time data streaming in a JavaScript dashboard?▼

WebSockets and SSE are supported for real-time data streaming in JavaScript dashboards, enabling live data feeds that update visualizations dynamically as new API data arrives.

How do I discover and integrate external APIs as data sources for my dashboard?▼

Discover and integrate external APIs as data sources by using data source discovery features to find free and premium endpoints, connecting them directly to your dashboard for live visualization.

Does the generated dashboard support the Tabler template for rapid layout creation?▼

The Tabler template is supported for rapid layout creation, allowing you to quickly generate a basic HTML dashboard structure that can be customized with interactive data visualizations.

Related Skills

Explore More Data & Analytics Skills→
lyticslytics
4

connection-manager

Configure external connections, auth providers, and credentials for secure data exchange.

Official
Intermediate
cenjiecenjie

real-time-features

Enable real-time bidirectional communication via WebSocket or SSE with room-based messaging.

Community
Advanced
nazlicancaglarnazlicancaglar

dashboard-builder

Create interactive HTML/CSS/JS marketing dashboards with KPI cards and trend charts.

Community
Intermediate
curiositechcuriositech
181

websocket-streaming

Implement real-time bidirectional WebSocket communication for DAG execution engines and dashboards.

Official
Advanced