Zero Build Frontend (Grade A)Security-tested development skill for Claude AI. Grade A. Zero-build frontend development with CDN-loaded React, Tailwind CSS, and vanilla JavaScript. Use when building static web apps without bundler

Zero-build frontend development with CDN-loaded React, Tailwind CSS, and vanilla JavaScript. Use when building static web apps without bundlers, creating Leaflet maps, integrating Google Sheets as database, or developing browser extensions. Covers patterns from rosen-frontend, NJCIC map, and PocketLink projects. 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. <script type="importmap"> { "imports": { "react": "https://esm.sh/react@19.0.0", "react-dom/client": "https://esm.sh/react-dom@19.0.0/client", "lodash-es": "https://esm.sh/lodash-es@4.17.21", "@my-app/": "/src/" }, "scopes": { "https://esm.sh/": { "scheduler": "https://esm.sh/scheduler@0.23.0" } } } </script> The scopes block lets a sub-tree of imports resolve differently. Useful when one CDN package needs a specific transitive dependency. The trailing / form ("@my-app/": "/src/") lets you import any file under that prefix. Pin versions in production. esm.sh/react (without a version) and esm.sh/react@latest resolve at request time and can shift under you. Use exact pinned versions or SHA-locked URLs. htmx 2.x server-rendered interactivity htmx 2.0 (released June 2024) lets you add AJAX, WebSockets, and SSE to plain HTML through hx-* attributes. The server sends HTML fragments; the client swaps them in. No JS framework required. <script src="https://unpkg.com/htmx.org@2.0.4"></script> <!-- Click button POST to server swap response into #result --> <button hx-post="/api/clicked" hx-target="#result" hx-swap="innerHTML"> Click me </button> <div id="result"></div> <!-- Search-as-you-type with debounce --> <input type="search" name="q" hx-get="/api/search" hx-trigger="input changed delay:300ms" hx-target="#results" /> <div id="results"></div> <!-- Infinite scroll --> <div hx-get="/api/items?page=2" hx-trigger="revealed" hx-swap="afterend"> ... </div> htmx 2.x dropped IE support and tightened the API; if you're on htmx 1.x and don't need to migrate, 1.x still receives security patches. New code should target 2.x. Alpine.js 3.x client-side reactivity in HTML Alpine.js (current 3.14+) is a minimal alternative to Vue/React for sprinkles of interactivity. State and behavior live as x-* attributes in the markup. <script defer src="https://unpkg.com/alpinejs@3.14.1/dist/cdn.min.js"></script> <!-- Toggle visibility --> <div x-data="{ open: false }"> <button @click="open","pros":["Zero-build frontend development","No bundler required","CDN-loaded React, Tailwind CSS, and vanilla JavaScript"],"cons":["Limited to static web apps","No full SPA support"],"features":["ESM import maps","htmx 2.x server-rendered interactivity","Alpine.js 3.x client-side reactivity"],"useCases":[{"title":"Static web apps","description":"Building static web apps without bundlers"},{"title":"Browser extensions","description":"Developing browser extensions"}]}}