codegen-html

Codegen HTML Skill

Scaffold and iteratively build standalone HTML applications using Preact + HTM via CDN. Zero local dependencies — no Node.js, no npm, no build step. Just open the HTML file in a browser.

Quick Start

# Scaffold a single-file app
./scripts/codegen-html-scaffold.sh '{"project_name": "my-app", "output_dir": "/tmp/my-app", "mode": "single-file"}'

# Scaffold a multi-file app
./scripts/codegen-html-scaffold.sh '{"project_name": "my-app", "output_dir": "/tmp/my-app", "mode": "multi-file"}'

# Read a file or list the project
./scripts/codegen-html-read.sh '{"project_dir": "/tmp/my-app", "file_path": "."}'

# Write/update a file
./scripts/codegen-html-write.sh '{"project_dir": "/tmp/my-app", "file_path": "index.html", "content": "..."}'

CRITICAL: Scaffold Conventions (DO NOT VIOLATE)

These rules prevent runtime errors:

1. Use class (not className) — HTM maps directly to DOM attributes
2. Use Tailwind CSS utility classes for all styling (loaded via CDN in index.html)
3. Do NOT create <style> blocks or .css files — use Tailwind classes instead
4. Keep Preact/HTM imports unchanged — do not change CDN URLs or versions
5. Use named exports for components: export function ComponentName() {}

Code Style Guide

• Use Preact with HTM (tagged template literals instead of JSX)
• Use class (not className) — HTM maps directly to DOM attributes
• Template literal syntax: html`<div class="app">${content}</div>`
• Use useState, useEffect, useRef from Preact hooks
• Components are plain functions returning html`...` template literals
• All imports via CDN (esm.sh), pinned to specific versions
• Use Tailwind CSS utility classes — the CDN is pre-loaded in index.html
• Forge dark theme colors: bg-zinc-950 (bg), bg-zinc-900 (cards), border-zinc-800 (borders), text-zinc-200 (text), text-zinc-400 (muted), bg-indigo-500 (accent)

Tailwind CSS Reference

Tailwind is loaded via CDN. Use utility classes directly in class attributes: