Skills
.Work. You
Rest

dashboard-technical-stack

Official

Dashboard UI guide: GridStack, ECharts, Tailwind.

Software Engineering#layout#dashboard#Tailwind CSS#responsive#ECharts#drag-and-drop#GridStack
AuthorBLSQ
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: dashboard-technical-stack
Download link: https://github.com/BLSQ/mcp_servers/archive/main.zip#dashboard-technical-stack

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.