single-file-html-app

Builds large single-file HTML applications using a slot-and-patch incremental write technique.

Updated Aug 21, 2026
One-click install
npx skills add https://github.com/TylerSimons1127/vibe --skill single-file-html-app-tylersimons1127
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: single-file-html-app
Source: https://github.com/TylerSimons1127/vibe/tree/main/skills/creative/single-file-html-app
Command: npx skills add https://github.com/TylerSimons1127/vibe --skill single-file-html-app-tylersimons1127

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Large self-contained HTML apps (desktop-OS shells, multi-app dashboards, 5000+ lines) exceed the ~8K token limit of a single write_file call, causing silent stream-timeout failures. This Skill provides a proven scaffold-and-patch technique to build, verify, and debug such files reliably. ## Core Features & Use Cases - Slot-and-patch build technique: Scaffold a skeleton HTML file with unique slot markers, then fill each slot with small patch calls that stay under the stream timeout, with recovery steps for stalled calls. - Architecture patterns: App registry plus window manager for multi-app shells, localStorage state persistence, and CSS custom-property theme systems. - Two-layer verification: Extract inline script and run node --check for exact syntax-error line numbers, then serve over HTTP and exercise every feature via Playwright DOM evaluation. - Use Case: Build a Windows-style desktop OS in one HTML file with 14 working apps, an animated wallpaper, and a notification center — delivered as a ~110KB single file across staged, verified patches. ## Quick Start Use the single-file-html-app skill to build a desktop OS shell with multiple working apps as one self-contained HTML file.

Frequently Asked Questions about single-file-html-app

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

FAQPage Schema
How do I build a large single-file HTML app when write_file fails?▼

Write a minimal skeleton with unique slot comment markers, then fill each slot with a separate patch call under ~8K tokens. Replace each marker as the old_string with real content as the new_string, working through CSS, HTML, then JS sections in order.

How to debug inline script syntax errors in a large HTML file?▼

Extract the script block with a Python regex into a temp .js file and run node --check on it. This prints the exact line and column of errors like double-escaped regex backslashes, which browser console messages cannot locate.

When should I not use the single-file HTML approach?▼

Avoid it for landing pages, simple prototypes, canvas-only games, or any project with a build step or framework like React, Vite, or Tailwind. Those cases fit standard stack tooling or simpler artifact skills better.

Why does my patched HTML file have missing variables or blank sections?▼

Patches can swallow adjacent let/const declarations or leave unfilled slot markers, causing undefined variables or blank sections. Search for remaining SLOT_ markers and include declarations in new_string content to prevent silent drops.

Can Playwright verify a single-file HTML app opened via file://?▼

No, Playwright blocks file:// URLs, so serve the file over HTTP with python -m http.server first. Then navigate, check console errors, and use DOM evaluation to launch apps and exercise interactions.