skills.rest
BLSQ
BLSQOFFICIAL
Explore all skills by this author →
WebsiteGitHub

dashboard-technical-stack

Build interactive dashboards with GridStack, ECharts, and Tailwind CSS.

Updated Jan 20, 2026
Search Tags:#layout#dashboard#Tailwind CSS#responsive#ECharts#drag-and-drop#GridStack
One-click install
npx skills add https://github.com/BLSQ/mcp_servers --skill dashboard-technical-stack
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dashboard-technical-stack
Source: https://github.com/BLSQ/mcp_servers/tree/main/.claude/skills/dashboard-technical-stack
Command: npx skills add https://github.com/BLSQ/mcp_servers --skill dashboard-technical-stack

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building feature-rich dashboards requires integrating layout management, charts, and styling across components. This skill provides a cohesive approach to wiring GridStack for drag-and-resize, ECharts for data visualization, and Tailwind CSS for consistent styling.

Core Features & Use Cases

  • GridStack integration: Initialize and manage draggable, resizable grid widgets to create flexible dashboards.
  • ECharts integration: Render responsive charts with theme-aware styling suitable for branded dashboards.
  • Tailwind CSS usage: Apply consistent responsive utility classes for layout, spacing, and typography.
  • Use Case: Create an analytics dashboard that arranges multiple resizable widgets showing KPIs, trends, and charts with a cohesive look.

Quick Start

Setup a project with GridStack, ECharts, and Tailwind CSS, then scaffold a dashboard container, initialize the grid, and render charts within grid widgets. See the linked guidance for a complete setup and example templates.

Frequently Asked Questions about dashboard-technical-stack

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

FAQPage Schema
How do I build a responsive dashboard with draggable widgets using GridStack and Tailwind CSS?▼

To build a responsive dashboard with draggable widgets, integrate GridStack for drag-and-resize grid management and Tailwind CSS for responsive utility styling. Initialize the grid container, then scaffold widgets within it for flexible layouts.

What is the best way to combine ECharts and GridStack for interactive data visualization?▼

The best way to combine ECharts and GridStack for interactive data visualization is to render responsive ECharts inside draggable GridStack widgets. This approach provides rich chart rendering alongside flexible layout management for modern web apps.

Do I need to install GridStack, ECharts, and Tailwind CSS separately before creating a dashboard?▼

Yes, you need to install GridStack, ECharts, and Tailwind CSS separately. This dashboard skill assumes a standard web development setup and requires these specific libraries to be available in your project before scaffolding the container and rendering charts.

Can I use ECharts for theme-aware styling in a Tailwind CSS dashboard?▼

Yes, you can use ECharts for theme-aware styling in a Tailwind CSS dashboard. ECharts provides theme-aware styling suitable for branded dashboards, while Tailwind CSS applies consistent responsive utility classes for layout and typography across components.

How do I create an analytics dashboard with resizable KPI and trend charts?▼

To create an analytics dashboard with resizable KPI and trend charts, use GridStack to manage draggable and resizable grid widgets. Within these widgets, render KPI metrics and trend charts using ECharts, applying Tailwind CSS for cohesive styling.

Related Skills

Explore More Software Engineering Skills→
dnnyngyendnnyngyen
332

webapp-building

Scaffold React web applications with TypeScript, Vite, Tailwind CSS, and shadcn/ui.

Community
Intermediate
nazlicancaglarnazlicancaglar

dashboard-builder

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

Community
Intermediate
DVNghiemDVNghiem
20

frontend-pattern

Codify React and TypeScript frontend patterns for components, state, and data fetching.

Community
Intermediate
BLSQBLSQ

dashboard-builder

Orchestrate branded HTML dashboards with GridStack, ECharts, and Tailwind in OpenHexa.

Official
Intermediate