zero-build-frontend
Installation
SKILL.md
Zero-build frontend development
Patterns for building production-quality web applications without build tools, bundlers, or complex toolchains.
Picking a stack
Three current zero-build approaches, each with different trade-offs:
| Stack | When | Bundle size impact |
|---|---|---|
| React via esm.sh + htm | Component-heavy SPAs, existing React mental model, Tailwind styling | ~50 KB gzipped (React + ReactDOM + htm) |
| htmx 2.x + server-rendered HTML | CRUD apps, traditional MPA flow, want server-side state of truth | ~14 KB gzipped (htmx alone) |
| Alpine.js 3.x + plain HTML | Light interactivity sprinkled into mostly-static pages, no full SPA | ~15 KB gzipped (Alpine alone) |
You can mix htmx and Alpine.js in the same page — htmx handles server interactions, Alpine handles client-side UI state. Many production sites converge on this combo.
ESM import maps
Import maps let you write import x from 'react' in a <script type="module"> without a bundler — the browser resolves the bare specifier against the map. Stable in all major browsers since 2023.