skills.rest
solinumasso
solinumassoOFFICIAL
Explore all skills by this author →
Website𝕏@solinum_assoGitHub

new-dashboard

Create a static HTML/CSS/vanilla JS dashboard for JSON outputs.

Updated Aug 27, 2026
Search Tags:#data visualization#dashboard#tailwind#github pages#leaflet#daisyui#vanilla js
One-click install
npx skills add https://github.com/solinumasso/solikit --skill new-dashboard
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: new-dashboard
Source: https://github.com/solinumasso/solikit/tree/main/.claude/skills/new-dashboard
Command: npx skills add https://github.com/solinumasso/solikit --skill new-dashboard

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

This Skill helps you quickly create or improve a dashboard so you can visualize pre-processed JSON results without setting up React or a build pipeline.

Core Features & Use Cases

  • Static dashboard (HTML/CSS/JS): Generates a deployable, framework-free dashboard that can be hosted on GitHub Pages.
  • Project- and data-driven UI: Reads the target project and its JSON outputs to shape tables, charts, map views, and KPIs.
  • Interactive UX with guardrails: Adds searchable, sortable tables and consistent error handling so broken or missing data results in a visible on-page message.
  • Optional map visualizations: Supports Leaflet-based geographic views (with tile and popup conventions) when lat/lon exist in the data.

Quick Start

Ask for a new dashboard for the solihub project that includes a searchable sortable table and a summary of key metrics using the JSON located in data/output/.

Frequently Asked Questions about new-dashboard

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

FAQPage Schema
How do I build a static dashboard to visualize JSON data without a build pipeline?▼

You can visualize pre-processed JSON outputs by generating a static dashboard using HTML, CSS, and vanilla JS with fetch() calls, styled via DaisyUI and Tailwind, deployable to GitHub Pages without any build pipeline.

Can I add a Leaflet map to a vanilla JS dashboard using existing latitude and longitude data?▼

Yes, you can add a Leaflet map to a vanilla JS dashboard when latitude and longitude data exists in your JSON, applying tile and popup conventions to render geographic views within the static HTML file.

Does this dashboard approach support searchable and sortable tables for large JSON outputs?▼

Yes, the static dashboard supports interactive UX features including searchable and sortable tables, allowing users to dynamically filter and organize JSON outputs directly within the browser using vanilla JS.

How does the dashboard handle broken or missing JSON data during fetch requests?▼

The dashboard handles broken or missing JSON data by implementing vanilla JS initialization with try/catch blocks and on-DOM error reporting, displaying a visible on-page message when fetch requests fail.

Do I need React or a build pipeline to deploy a data visualization dashboard to GitHub Pages?▼

No, you do not need React or a build pipeline to deploy a data visualization dashboard to GitHub Pages. This approach uses a static HTML/CSS/vanilla JS file structure that reads pre-processed JSON outputs directly.

What is the best way to display KPIs and charts from pre-processed JSON in a static site?▼

The best way to display KPIs and charts from pre-processed JSON in a static site is using a project-driven UI shaped by your target JSON outputs, applying DaisyUI and Tailwind conventions to render tables, charts, and map views.

Related Skills

Explore More Design & Creative Skills→
serejarisserejaris
215

api-digest

Fetch raw API data and generate structured digests locally.

Community
Basic
istota-projectistota-project
10

website

Publish static websites from a Nextcloud user HTML folder.

Official
Basic
csim-sgcsim-sg

daisy-ui

Build UI components with DaisyUI v5 and Tailwind CSS 4.

Community
Intermediate
TeamDay-AITeamDay-AI
2

d3-viz

Create custom d3.js charts, network graphs, and geographic visualizations across JavaScript frameworks.

Official
Advanced