TETRA2000/export-html

Export HTML Skill

Parameters

• route (required): Page route to export (e.g., "about", "products")

Workflow

1. Verify Page Exists

• Check that src/pages/{route}/index.tsx exists
• Read the page source to identify dependencies

2. Install Build Dependencies

Ensure vite-plugin-singlefile is installed:

npm list vite-plugin-singlefile || npm install vite-plugin-singlefile --save-dev

3. Create Export Build Config

Create a temporary Vite config for single-page export at vite.export.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import { viteSingleFile } from 'vite-plugin-singlefile'

export default defineConfig({
  plugins: [tailwindcss(), react(), viteSingleFile()],
  build: {
    outDir: `dist/${route}`,
    rollupOptions: {
      input: 'index.html',
    },
  },
})

4. Create Entry Point

Create a temporary index.html and entry point that renders only the target page:

• Create a minimal React app that renders the specific page component
• Ensure all imports are resolved

5. Build

Run the Vite build:

npx vite build --config vite.export.config.ts

The output will be a single index.html with all CSS and JS inlined.

6. Verify

• Open the exported HTML file in a browser via playwright-cli
• Capture a screenshot for verification
• Report file size

7. Cleanup

• Remove temporary build config and entry files
• Keep the exported HTML in dist/{route}/index.html

Output

Report:

1. Export path: dist/{route}/index.html
2. File size
3. External dependencies (URLs that require internet)
4. Screenshot verification result

Notes

• External image URLs are preserved as-is (not inlined)
• React is included as a client-side dependency in the bundle
• The exported file is fully self-contained and statically hostable