Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

single-file-bundling · a5c-ai | DecimalAI

a5c-ai/single-file-bundling

SkillScore95Maintained

Configure Vite with vite-plugin-singlefile for mandatory single-file HTML bundling of MCP Apps. All assets (JS, CSS, images, fonts) must be inlined into a single HTML file for sandboxed iframe compatibility.

Frontendby a5c-ai

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/a5c-ai-single-file-bundling/SKILL.md

decimalai skills pull a5c-ai-single-file-bundling --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/a5c-ai-single-file-bundling/SKILL.md https://app.decimal.ai/s/a5c-ai-single-file-bundling/SKILL.md

Raw file: /s/a5c-ai-single-file-bundling/SKILL.md ↗ · machine-readable summary at /s/a5c-ai-single-file-bundling.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 55d ago

Yes — +36% lift · at higher cost+93% tokens0% turns95% of whole cases pass with skill (21/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-01	✗→✓	▲ Improved	202%	0%
case-02	✗→✓	▲ Improved	56%	0%
case-05	✗→✓	▲ Improved	120%	0%
case-08	✗→✓	▲ Improved	91%	0%
case-11	✗→✓	▲ Improved	96%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 7/31/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

a5c-ai / babysitter

library/specializations/ai-agents-conversational/skills/single-file-bundling/SKILL.md

View on GitHub ↗

License MITImported 7/31/2026Version v1

Skill contents

SKILL.md

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
Phase 2: TypeScript compiles server into dist/server.js
Combined build script orchestrates both phases

Hybrid Build Pipelines

Add MCP build alongside existing standalone build
Separate Vite configs for MCP and standalone if needed
Separate HTML entry points (mcp-app.html vs index.html)

Usage

Basic Vite Configuration

typescript
// vite.config.ts
import { defineConfig } from 'vite';
import { viteSingleFile } from 'vite-plugin-singlefile';

export default defineConfig({
  plugins: [viteSingleFile()],
  build: {
    outDir: 'dist',
    // Entry point for the MCP App UI
    rollupOptions: {
      input: 'mcp-app.html',
    },
  },
});

React Vite Configuration

typescript
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { viteSingleFile } from 'vite-plugin-singlefile';

export default defineConfig({
  plugins: [react(), viteSingleFile()],
  build: {
    outDir: 'dist',
    rollupOptions: {
      input: 'mcp-app.html',
    },
  },
});

Vue Vite Configuration

typescript
// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { viteSingleFile } from 'vite-plugin-singlefile';

export default defineConfig({
  plugins: [vue(), viteSingleFile()],
  build: {
    outDir: 'dist',
    rollupOptions: {
      input: 'mcp-app.html',
    },
  },
});

Svelte Vite Configuration

typescript
// vite.config.ts
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import { viteSingleFile } from 'vite-plugin-singlefile';

export default defineConfig({
  plugins: [svelte(), viteSingleFile()],
  build: {
    outDir: 'dist',
    rollupOptions: {
      input: 'mcp-app.html',
    },
  },
});

HTML Entry Point

html
<!-- mcp-app.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My MCP App</title>
</head>
<body>
  <div id="root"></div>
  <script type="module" src="/src/main.ts"></script>
</body>
</html>

For React (.tsx entry):

html
<!-- mcp-app.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My MCP App</title>
</head>
<body>
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
</body>
</html>

Package.json Build Scripts

json
{
  "scripts": {
    "build:ui": "vite build",
    "build:server": "tsc --project tsconfig.server.json",
    "build": "npm run build:ui && npm run build:server",
    "dev": "concurrently \"vite\" \"tsx watch src/server.ts\"",
    "serve": "tsx src/server.ts"
  }
}

Server Reading the Bundled HTML

typescript
import fs from 'fs';
import path from 'path';
import { registerAppResource, RESOURCE_MIME_TYPE } from '@modelcontextprotocol/ext-apps';

// Read the single-file bundle produced by Vite
const bundledHtml = fs.readFileSync(
  path.join(__dirname, '../dist/mcp-app.html'),
  'utf-8'
);

registerAppResource(server, {
  uri: 'app:///my-app',
  name: 'My App',
  mimeType: RESOURCE_MIME_TYPE,
  async read() {
    return {
      contents: [{
        uri: 'app:///my-app',
        mimeType: RESOURCE_MIME_TYPE,
        text: bundledHtml,
      }],
    };
  },
});

Hybrid Build Pipeline (MCP + Standalone)

When converting a web app that already has its own build:

typescript
// vite.config.mcp.ts -- MCP-specific build config
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { viteSingleFile } from 'vite-plugin-singlefile';

export default defineConfig({
  plugins: [react(), viteSingleFile()],
  build: {
    outDir: 'dist/mcp',
    rollupOptions: {
      input: 'mcp-app.html',  // Separate entry from index.html
    },
  },
});

json
{
  "scripts": {
    "build:standalone": "vite build",
    "build:mcp:ui": "vite build --config vite.config.mcp.ts",
    "build:mcp:server": "tsc --project tsconfig.server.json",
    "build:mcp": "npm run build:mcp:ui && npm run build:mcp:server",
    "build:all": "npm run build:standalone && npm run build:mcp"
  }
}

Installing Dependencies

bash
# 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

Common Pitfalls

Forgetting vite-plugin-singlefile: Without it, Vite produces separate JS/CSS files that won't load in the sandboxed iframe.
Wrong entry point: The rollupOptions.input must point to the MCP App HTML file, not the standalone index.html.
Large bundle size: Inline images and fonts increase HTML file size. Consider optimizing assets or using CSP resourceDomains for large external resources.
TypeScript server in Vite output: The server should be compiled separately (Phase 2), not included in the Vite bundle.
Missing type="module": The <script> tag in the HTML entry must have type="module" for Vite to process it.

Verification Checklist

] vite-plugin-singlefile in devDependencies
] vite.config.ts imports and uses viteSingleFile()
] rollupOptions.input points to mcp-app.html (not index.html)
] mcp-app.html entry point exists with <script type="module">
] npm run build:ui produces dist/mcp-app.html
] dist/mcp-app.html is self-contained (no external src= or href= to files)
] Build scripts defined: build:ui, build:server, build
] Server reads from dist/mcp-app.html at runtime
] Framework-specific Vite plugin included (if applicable)

Task Definition

javascript
const singleFileBundlingTask = defineTask({
  name: 'single-file-bundling',
  description: 'Configure Vite with vite-plugin-singlefile for MCP App',

  inputs: {
    framework: { type: 'string', required: true },
    entryPoint: { type: 'string', default: 'mcp-app.html' },
    outDir: { type: 'string', default: 'dist' },
    hybrid: { type: 'boolean', default: false }
  },

  outputs: {
    viteConfigCreated: { type: 'boolean' },
    entryPointCreated: { type: 'boolean' },
    buildScriptsAdded: { type: 'boolean' },
    artifacts: { type: 'array' }
  },

  async run(inputs, taskCtx) {
    return {
      kind: 'skill',
      title: `Configure single-file bundling (${inputs.framework})`,
      skill: {
        name: 'single-file-bundling',
        context: {
          framework: inputs.framework,
          entryPoint: inputs.entryPoint,
          outDir: inputs.outDir,
          hybrid: inputs.hybrid,
          instructions: [
            'Install vite and vite-plugin-singlefile',
            'Create vite.config.ts with framework plugin and singlefile',
            'Create mcp-app.html entry point',
            'Add build scripts to package.json',
            inputs.hybrid ? 'Create separate MCP Vite config alongside existing build' : null,
            'Build and verify single-file output'
          ].filter(Boolean)
        }
      },
      io: {
        inputJsonPath: `tasks/${taskCtx.effectId}/input.json`,
        outputJsonPath: `tasks/${taskCtx.effectId}/result.json`
      }
    };
  }
});

Applicable Processes

create-mcp-app.js
add-app-to-mcp-server.js
convert-web-app-to-mcp.js

External Dependencies

Vite (build tool)
vite-plugin-singlefile (asset inlining)
Framework-specific Vite plugins (@vitejs/plugin-react, @vitejs/plugin-vue, etc.)

References

Related Skills

mcp-app-scaffolding
mcp-tool-resource-pattern
mcp-app-verification

Related Agents

mcp-app-architect
mcp-ui-developer

Illustrative Want to see what a5c-ai/single-file-bundling would put in front of your model? Preview the rendered body and check its trigger phrases — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/1/2026, 03:16 UTC · 22 cases

Lift

+36%

95% vs 59%

Agent turns

1.0 vs 1.0

Tokens

+93%

3,982 vs 2,061.77

fail → pass · 8pass → pass · 13fail → fail · 1

Per-case results (22)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-01 I need to configure Vite for my React-based MCP frontend UI. Because it executes inside an isolated iframe without an asset server, all scripts, CSS, and media assets must be fully inlined into a single output HTML file. Please generate the Vite configuration, the HTML entry point, and the package.json build commands to support this build step.	fail→pass	21,178	5,953	-72%	1	1	0%	1,379	4,167	+202%	0	0	—
case-02 I am creating an MCP extension with a Svelte frontend and a TypeScript backend. I need a two-phase build workflow where the UI compiles into one self-contained HTML document first, followed by the TypeScript server compilation. Please provide the Vite configuration and package build scripts to orchestrate this entire build pipeline.	fail→pass	15,128	9,520	-37%	1	1	0%	3,226	5,019	+56%	0	0	—
case-03 I am building an MCP application UI with Vue 3. Standard Vite builds output separate JS and CSS chunks which break inside sandboxed client frames. Please provide a vite.config.ts setup that bundles Vue components and all assets into a unified file target.	pass→pass	12,718	5,772	-55%	1	1	0%	2,340	4,022	+72%	0	0	—
case-04 We have an existing React web app configured with standard Vite (index.html). We want to add a secondary build target for an MCP App interface (mcp-app.html) without disrupting the primary web app build. Show how to configure a dedicated Vite configuration file and package scripts for this dual-target build.	pass→pass	11,482	7,722	-33%	1	1	0%	2,465	4,477	+82%	0	0	—
case-05 I have a Node.js MCP server using @modelcontextprotocol/ext-apps. I need to serve the compiled HTML UI artifact located at dist/mcp-app.html via registerAppResource. Provide the TypeScript code snippet to load the file from disk and expose it to MCP clients.	fail→pass	8,415	5,651	-33%	1	1	0%	1,781	3,919	+120%	0	0	—
case-06 I need to set up package.json scripts for an MCP project that has a Vite React UI and a Node/TypeScript backend server. I want scripts for building both parts, running dev mode with concurrent live updates, and running the production server.	pass→pass	12,683	8,712	-31%	1	1	0%	2,386	4,695	+97%	0	0	—
case-07 Create the HTML entry point file named mcp-app.html for a Vanilla TypeScript MCP UI application. It must render a root container element and import the TypeScript entry point properly for Vite processing.	fail→fail	4,586	3,229	-30%	1	1	0%	809	3,356	+315%	0	0	—
case-08 I want to bundle a Solid.js frontend interface into a single standalone HTML document for embedding in sandboxed MCP host frames. What does the vite.config.ts file look like when combining Solid support with asset inlining?	fail→pass	10,635	5,213	-51%	1	1	0%	1,969	3,767	+91%	0	0	—
case-09 When setting up an MCP App project with Vite and TypeScript, should the TypeScript backend server code be imported into Vite's bundler, or compiled separately? Explain how the server build phase should be configured in package.json.	pass→pass	15,469	8,510	-45%	1	1	0%	2,513	4,467	+78%	0	0	—
case-10 What development dependencies need to be installed via npm to configure Vite for single-file HTML generation when creating a React-based MCP App UI?	pass→pass	7,667	3,041	-60%	1	1	0%	1,472	3,208	+118%	0	0	—
case-11 I am adding an MCP build target to an existing Vue 3 web repository. To avoid overwriting the main web output in dist/, where should the MCP Vite build output its single-file HTML artifact, and how is this configured?	fail→pass	10,083	5,633	-44%	1	1	0%	2,052	4,020	+96%	0	0	—
case-12 Write a TypeScript function or snippet showing how to implement the read() handler inside registerAppResource from @modelcontextprotocol/ext-apps to return inlined HTML content.	pass→pass	8,602	4,463	-48%	1	1	0%	1,838	3,698	+101%	0	0	—
case-13 Write a vite.config.ts snippet for a Svelte MCP UI that ensures Svelte components render correctly and all compiled output ends up in a single file.	pass→pass	9,344	3,752	-60%	1	1	0%	1,838	3,470	+89%	0	0	—
case-14 Generate the HTML markup for mcp-app.html when building a React + TypeScript MCP App. Show where the root element and the React script tag are declared.	pass→pass	7,894	3,050	-61%	1	1	0%	1,598	3,259	+104%	0	0	—
case-15 I am building a standard web application hosted on an Nginx server. I want to optimize asset caching by splitting vendor libraries into separate JS chunks and generating external CSS stylesheets with hash filenames in Vite. Show the vite.config.ts for this target.	pass→pass	11,110	8,694	-22%	1	1	0%	2,233	4,506	+102%	0	0	—
case-16 I am creating an MCP server that exposes a database query tool named execute_sql. Show how to define and register this tool using the core @modelcontextprotocol/sdk tool registration method.	pass→pass	15,856	8,863	-44%	1	1	0%	2,723	4,679	+72%	0	0	—
case-17 I have a standard Express.js web server and want to serve static assets like CSS, images, and JS files from a directory called public. Provide the Express middleware configuration to serve these files.	pass→pass	4,919	6,096	+24%	1	1	0%	935	3,867	+314%	0	0	—
case-18 Provide a vite.config.ts configuration for a Preact MCP frontend UI that bundles all UI code and styles into a single HTML bundle named mcp-app.html inside dist.	pass→pass	10,117	4,471	-56%	1	1	0%	2,169	3,663	+69%	0	0	—
case-19 In a hybrid project containing both a standalone web app and an MCP app extension, show the scripts section of package.json that provides individual and combined build commands.	fail→pass	11,505	4,600	-60%	1	1	0%	2,261	3,647	+61%	0	0	—
case-20 When registering an application resource in @modelcontextprotocol/ext-apps for an embedded UI iframe, what URI format and MIME type constant should be used in the registration options?	fail→pass	12,589	3,107	-75%	1	1	0%	2,420	3,418	+41%	0	0	—
case-21 In an MCP App project, how do you set up local live development so that both Vite UI updates and TypeScript server re-compilation happen simultaneously during development?	pass→pass	13,465	10,074	-25%	1	1	0%	2,589	4,645	+79%	0	0	—
case-22 Configure a minimal vite.config.ts for a plain JavaScript or TypeScript MCP App UI with no framework plugins, ensuring the output bundle is completely self-contained in dist/mcp-app.html.	fail→pass	11,452	4,507	-61%	1	1	0%	2,363	3,635	+54%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +36 percentage points is the difference between those two pass rates over the 22 comparable cases.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 59.1%
Pass rate with the skill: 95.5%
Cases attempted: 22
Cases counted toward lift: 22
Cases that regressed: 0
Skill version measured: v1
Run completed: 8/1/2026, 03:16 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-01

Prompt

I need to configure Vite for my React-based MCP frontend UI. Because it executes inside an isolated iframe without an asset server, all scripts, CSS, and media assets must be fully inlined into a single output HTML file. Please generate the Vite configuration, the HTML entry point, and the package.json build commands to support this build step.

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run95

Live evalNeeds ≥10 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+94% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 55 days ago

Other measured skills in the registry, with their headline benchmark lift.