When to use
- Building static web apps without bundlers
- Creating Leaflet.js maps with clustering
- Using Google Sheets as a database
- Developing browser extensions (Manifest V3)
- CDN-loaded React with htm (no JSX, no build)
What's included
React via CDN (esm.sh)
Use React 18 with htm template literals instead of JSX. No transpilation needed.
Leaflet.js maps
Interactive maps with marker clustering, custom icons, popups, and filter controls.
Google Sheets integration
Fetch published CSV data and merge with localStorage for real-time local state.
Browser extensions
Manifest V3 patterns with context menus, clipboard access, and options pages.
Technology stack
| Component | CDN source |
|---|---|
| React 18 | esm.sh/react@18.2.0 |
| htm (JSX alternative) | esm.sh/htm@3.1.1 |
| Tailwind CSS | cdn.tailwindcss.com |
| Leaflet.js | unpkg.com/leaflet@1.9.4 |
| MarkerCluster | unpkg.com/leaflet.markercluster@1.4.1 |
| PapaParse (CSV) | cdn.jsdelivr.net/npm/papaparse |
Key patterns
localStorage caching
Cache fetched data with TTL expiration. Merge remote data with local state for offline-capable apps.
Path management
Auto-detect base path from URL for subdirectory deployments (WordPress wp-content, GitHub Pages).
Performance tips
Debounce search inputs, virtualize long lists, preconnect to CDNs, use CSS containment.
Installation
# Clone the repository
git clone https://github.com/jamditis/claude-skills-journalism.git
# Copy the skill to your Claude config
cp -r claude-skills-journalism/zero-build-frontend ~/.claude/skills/
Or download just this skill from the GitHub repository.
Related skills
Ship without npm install
CDN-loaded React, Leaflet maps, Google Sheets data, and browser extensions in one skill.
View on GitHub