fuuz-html-dashboards

Build custom HTML dashboards for Fuuz screens with embedded visualization libraries.

Updated Jun 7, 2026
One-click install
npx skills add https://github.com/Fuuz-Platform/llm-skills --skill fuuz-html-dashboards
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: fuuz-html-dashboards
Source: https://github.com/Fuuz-Platform/llm-skills/tree/main/fuuz-html-dashboards
Command: npx skills add https://github.com/Fuuz-Platform/llm-skills --skill fuuz-html-dashboards

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps Fuuz users create custom dashboards when native screen elements are not enough for rich visualizations, interactive widgets, or embedded web libraries.

Core Features & Use Cases

  • Backend-generated HTML dashboards: Build complete dashboard pages server-side and deliver them to Fuuz screens as encoded data URIs.
  • Screen embedding workflow: Pair a system flow with a Form and webpage element so the dashboard renders reliably inside the screen.
  • Rich visualization support: Use it for wallboards, operator screens, 3D scenes, custom charts, manufacturing views, genealogy graphs, maps, and other specialized visual outputs.
  • Production-ready guidance: Covers theme handling, timezone formatting, query limits, JSONata bundling, saved scripts, refresh patterns, and safe embedding rules.

Quick Start

Ask the assistant to build a Fuuz dashboard for your data, then specify the filters, refresh behavior, theme, timezone, and visualization library you want to use.

Frequently Asked Questions about fuuz-html-dashboards

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

FAQPage Schema
How do I build custom HTML dashboards in Fuuz when native forms and tables are not enough?

To build custom HTML dashboards in Fuuz, you pair a backend system flow with a Form containing a webpage element, then deliver the rendered page as a percent-encoded data URI. This approach enables rich visualizations beyond what native screens offer.

Can I use visualization libraries like Three.js or ECharts inside a Fuuz screen?

Yes, you can use libraries like Three.js, ECharts, Cytoscape, Leaflet, or Mermaid inside a Fuuz screen. A saved JavaScript renderer bundles the library output, which is then embedded via a webpage element for interactive display.

What is the process for embedding a backend-generated HTML page into a Fuuz operator screen?

Embedding a backend-generated HTML page requires a system flow to bundle data with JSONata, a saved JavaScript renderer to produce the HTML, and a webpage element in a Form to display the percent-encoded data URI output.

Do I need a backend system flow to render custom visualizations on Fuuz wallboards?

Yes, a backend system flow is required to render custom visualizations on Fuuz wallboards. The flow handles data processing and JSONata bundling, passing the result to a renderer that generates the dashboard output.

How does timezone-aware and theme-aware rendering work for Fuuz dashboards?

Timezone-aware and theme-aware rendering ensures your Fuuz dashboard displays dates correctly and matches the screen's visual theme. The saved JavaScript renderer applies these formatting rules during HTML generation before encoding.

When should I avoid using native Fuuz screen elements and switch to custom HTML dashboards?

You should switch to custom HTML dashboards when native forms and tables cannot express your required output, such as 3D scenes, interactive maps, genealogy graphs, or specialized manufacturing views needing embedded web libraries.