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)
- Locally vendored React with htm (no JSX or deployment build)
What's included
React from a local ESM bundle
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 | Local asset |
|---|---|
| React 19 + htm | /vendor/react-runtime-19.2.8.mjs |
| lodash-es | /vendor/lodash-es-4.18.1.mjs |
| Tailwind CSS | Compiled index.css |
| Leaflet.js | /vendor/leaflet-1.9.4.js |
| MarkerCluster | /vendor/leaflet.markercluster-1.5.3.js |
| PapaParse (CSV) | Lockfile-verified local bundle |
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, preload local vendor assets, use CSS containment.
Installation
# Recommended: install the dev-toolkit plugin
/plugin marketplace add jamditis/claude-skills-journalism
/plugin install dev-toolkit@claude-skills-journalism
# Or copy just this skill from the plugin tree
git clone https://github.com/jamditis/claude-skills-journalism.git
cp -r claude-skills-journalism/dev-toolkit/skills/zero-build-frontend ~/.claude/skills/
Or browse this skill in the GitHub repository.
Related skills
Ship without npm install
Lockfile-verified React and Leaflet assets, Google Sheets data, and browser extensions in one skill.
View on GitHub