single-html-bundling

Bundle multi-asset web apps into a single offline HTML file.

26|8|Updated May 22, 2026
One-click install
npx skills add https://github.com/amazingsyp/pokemon-ontology --skill single-html-bundling
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: single-html-bundling
Source: https://github.com/amazingsyp/pokemon-ontology/tree/main/.claude/skills/single-html-bundling
Command: npx skills add https://github.com/amazingsyp/pokemon-ontology --skill single-html-bundling

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the complexity of packaging a multi-file web app into a single offline deliverable, so learners can open one HTML file and start immediately on mobile, tablet, or desktop.

Core Features & Use Cases

  • Single-file bundling for offline learning: Inlines HTML template, CSS, JS (including Cytoscape), and large JSON datasets into one distributable dist/index.html.
  • Deterministic build pipeline with build.js: Reads source assets from src/ and generated datasets from _workspace/, then outputs a final offline artifact.
  • Mobile-first responsive UX: Ensures the output UI supports hamburger sidebar patterns, bottom navigation, and theme toggling with persistent progress stored in localStorage.
  • Data embedding via JSON script blobs: Injects datasets as <script type="application/json" id="data-..."> for runtime loading without network calls.

Quick Start

Run the build script to generate dist/index.html that bundles all required assets and JSON data into a single offline file.

Frequently Asked Questions about single-html-bundling

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

FAQPage Schema
How do I bundle a multi-asset web app into a single offline HTML file?▼

To bundle a multi-asset web app into a single offline HTML file, use a deterministic build script that reads source assets and generated datasets, then inlines scripts, styles, and JSON data directly into an HTML template to output a final distributable artifact.

How does JSON data embedding work for offline web applications?▼

JSON data embedding for offline web applications works by injecting datasets as application/json script tags within the HTML. This allows the application to load curriculum or graph data at runtime entirely without external network calls.

Can I package Cytoscape and vendor libraries into a single HTML deliverable?▼

Yes, you can package Cytoscape and vendor libraries into a single HTML deliverable by inlining the JavaScript dependencies directly into the HTML template during the build process, ensuring the interactive graph renders offline.

What is the best way to create a mobile-first responsive UI for offline learning?▼

The best way to create a mobile-first responsive UI for offline learning is to bundle templates with hamburger sidebar patterns and bottom navigation into one file, using localStorage to store persistent user progress.

Does single-file bundling require external network calls to load large JSON datasets?▼

Single-file bundling does not require external network calls to load large JSON datasets. The build pipeline embeds curriculum, chapter, and exercise data directly as application/json script tags within the HTML.

Why does the build script read from separate src and workspace directories?▼

The build script reads from separate src and workspace directories to satisfy deterministic build requirements, cleanly separating raw source assets from generated datasets before inlining everything into a single offline HTML file.