Toolverse
All skills
DevOps

dashboard-creator

by mhattingpete

Create HTML dashboards with KPI metric cards, bar/pie/line charts, progress indicators, and data visualizations. Use when users request dashboards, metrics displays, KPI visualizations, data charts, or monitoring interfaces.

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
mhattingpete
Category
DevOps
Views
124
GitHub repo

About this skill

Create HTML dashboards with KPI metric cards, bar/pie/line charts, progress indicators, and data visualizations. Use when users request dashboards, metrics displays, KPI visualizations, data charts, or monitoring interfaces.

How to use

  1. Zainstaluj umiejętność dashboard-creator w swoim środowisku Claude lub Copilot, dodając ją do dostępnych narzędzi.

  2. Poproś o dashboard, używając naturalnego języka, np. "Utwórz dashboard dla przychodów i konwersji" lub "Pokaż wizualizację KPI wydajności".

  3. Umiejętność wygeneruje kod HTML zawierający strukturę dashboardu z sekcjami dla kart KPI, wykresów i wskaźników. Kod będzie zawierać preformatowane style CSS dla karty, wartości metryki, trendy (wzrost/spadek) i kolory.

  4. Karty KPI będą wyświetlać nazwę metryki, wartość liczbową i zmianę procentową z ikoną trendu (strzałka w górę dla wzrostu, w dół dla spadku).

  5. Wykresy będą generowane jako SVG (słupki, linie lub koła) z danymi odpowiadającymi Twoim metrykom. Każdy wykres będzie skalowany do kontenera i gotowy do osadzenia.

  6. Skopiuj wygenerowany kod HTML do pliku .html, otwórz go w przeglądarce i dostosuj kolory, dane lub layout według potrzeb.

Related skills

aws-solution-architect

by alirezarezvani

Design AWS architectures for startups using serverless patterns and IaC templates. Use when asked to design serverless architecture, create CloudFormation templates, optimize AWS costs, set up CI/CD pipelines, or migrate to AWS. Covers Lambda, API Gateway, DynamoDB, ECS, Aurora,

DevOps
1231

chrome-devtools

by mrgoonie

Browser automation, debugging, and performance analysis using Puppeteer CLI scripts. Use for automating browsers, taking screenshots, analyzing performance, monitoring network traffic, web scraping, form automation, and JavaScript debugging.

DevOps
29141

task-master

by sfc-gh-dflippo

AI-powered task management for structured, specification-driven development. Use this skill when you need to manage complex projects with PRDs, break down tasks into subtasks, track dependencies, and maintain organized development workflows across features and branches.

DevOps
14126

pmbok-project-management

by jgtolentino

Comprehensive PMP/PMBOK project management methodologies and best practices. Use this skill when users need guidance on project management processes, templates, knowledge areas, process groups, tools, techniques, or certification preparation. Covers all 10 PMBOK Knowledge Areas

DevOps
21133

planning-with-files

by davila7

Implements Manus-style file-based planning for complex tasks. Creates task_plan.md, findings.md, and progress.md. Use when starting complex multi-step tasks, research projects, or any task requiring u003e5 tool calls.

DevOps
2365

streamlit

by sverzijl

When working with Streamlit web apps, data dashboards, ML/AI app UIs, interactive Python visualizations, or building data science applications with Python

DevOps
49161