single-file-bundling

npx skills add a5c-ai/babysitter --skill single-file-bundling --agent claude-code

Same command for any agent — swap --agent for codex, cursor, copilot.

# single-file-bundling Configure Vite with vite-plugin-singlefile to produce a single self-contained HTML file for MCP Apps running in sandboxed iframes. ## Overview MCP Apps run in sandboxed iframes with no same-origin server. This means: - **No relative asset URLs** -- `<script src="./main.js">` will not resolve - **No CSS file imports** -- `<link href="./styles.css">` will not load - **No image/font paths** -- relative paths to assets will fail - The **entire UI must be a single HTML file** with all JS, CSS, images, and fonts inlined `vite-plugin-singlefile` handles this by inlining all assets into one HTML file during the Vite build. This is **mandatory** for MCP Apps -- without it, the app will show a blank iframe. ## Capabilities ### Vite Configuration - Configure Vite with `vite-plugin-singlefile` - Set correct `base`, `build.outDir`, and entry point - Handle framework-specific Vite plugins (React, Vue, Svelte, Preact, Solid) ### Single HTML File Output - All JavaScript inlined as `<script>` tags - All CSS inlined as `<style>` tags - All images converted to data URIs - All fonts converted to base64 ### Two-Phase Build Setup - Phase 1: Vite bundles UI into `dist/mcp-app.html`

Required dev dependencies
npm install -D vite vite-plugin-singlefile
Framework-specific (pick one)
npm install -D @vitejs/plugin-react       # React
npm install -D @vitejs/plugin-vue         # Vue
npm install -D @sveltejs/vite-plugin-svelte  # Svelte