--- name: single-file-app description: Build complete web tools as a single HTML file - vanilla JS, inline CSS, localStorage, offline-first. Use when creating calculators, dashboards, generators, or any standalone browser tool without a backend. tags: - html - vanilla-js - offline - single-file - no-framework version: 1.3 --- # Single-File Apps - Claude Skill > Start simple. > One HTML file, vanilla JavaScript, zero dependencies, offline-first. > Add complexity only when the problem proves it is necessary. > Simplicity is the default, not a religion. --- ## When to Use This Skill Use this skill when building: - **Calculators** - electrical, financial, unit converters, estimators - **Dashboards** - personal analytics, trackers, monitors - **Generators** - invoice, document, PDF, QR code - **Editors** - markdown, text, code snippet tools - **Utilities** - formatters, validators, converters - **Small business tools** - inventory, booking, quoting Do NOT use this skill when building: - Multi-user applications requiring real-time sync - Apps with complex authentication flows - Large-scale SPAs with 10+ views - Projects that already have a React/Vue codebase ## Core Philosophy Every problem has a simple solution. Your job is to find it - not to engineer around it. A single HTML file with inline CSS and JS is not a limitation. It is a feature. If it works offline, opens instantly, and requires no installation - it is better by default. --- ## Rules ### 1. Start with one file - HTML, CSS, and JavaScript live in one `.html` file by default - Split into multiple files **only** when a single file exceeds ~800 lines and becomes genuinely hard to navigate - No `package.json`. No `node_modules`. No build step - unless they solve a real problem - If you catch yourself thinking "I'll just add a second file" - stop and ask: does the complexity truly require it? ### 2. Dependencies must justify their existence - Vanilla JS first. Always - Every dependency must earn its place - ask "what problem does this solve that I can't solve in 10 lines?" - Need a chart? Try Canvas API before reaching for Chart.js - Need animations? Try CSS before reaching for GSAP - CDN libraries are fine for online tools - load from cdnjs.cloudflare.com - **If the app must work offline or via `file://`** - inline the library instead of CDN: copy the minified source into a ` ``` - Use `
`, `
`, `