Can I use React or Vue with this skill?

This skill specifically encourages avoiding complex frameworks to prioritize simplicity and portability, though it can integrate lightweight libraries via CDN when necessary.

Where should I host these tools?

Because they are contained within a single HTML file, these tools can be hosted easily on GitHub Pages, shared as a Gist, or simply sent as an email attachment.

How is data stored without a database?

It utilizes native browser features like localStorage for persistent settings and secrets, and URL hash or query parameters for shareable application states.

Is it possible to use Python in these HTML tools?

Yes, the skill includes specific patterns for integrating Pyodide to run Python code and data science libraries like pandas directly within the browser.

Does this skill require Node.js or npm?

No, this skill focuses on 'no-build' patterns using CDNs and vanilla JavaScript, allowing applications to run directly in any modern browser without a compilation step.

Vanilla HTML Tooling

Name: Vanilla HTML Tooling
Author: rohunvora

byrohunvora

•

Productivity & Workflow

Builds powerful, single-file browser applications and client-side utilities using vanilla JavaScript and modern browser APIs.

About

This skill empowers users to create highly functional, portable, and build-free web applications that run entirely in the browser. Inspired by Simon Willison's development patterns, it focuses on a 'no-build' architecture, using vanilla JS, CDNs, and browser storage for state persistence. It is ideal for rapid prototyping, creating shareable data-processing utilities, and building tools that require no backend infrastructure while leveraging advanced client-side capabilities like WebAssembly and Pyodide.

Key Features

Single-file architecture with inline CSS and JavaScript for maximum portability
Advanced browser integrations including WebAssembly, Pyodide, and CORS-enabled APIs
Standardized patterns for file I/O and clipboard management without a server
3 GitHub stars
Framework-free development using vanilla JS and CDN-loaded dependencies
Client-side state persistence using URL parameters and localStorage

Use Cases

Creating shareable client-side data visualization or processing utilities
Building secure browser-based tools that handle sensitive API keys in localStorage
Rapidly prototyping interactive tools that need to work offline

About

Key Features

Single-file architecture with inline CSS and JavaScript for maximum portability
Advanced browser integrations including WebAssembly, Pyodide, and CORS-enabled APIs
Standardized patterns for file I/O and clipboard management without a server
3 GitHub stars
Framework-free development using vanilla JS and CDN-loaded dependencies
Client-side state persistence using URL parameters and localStorage

Use Cases

Creating shareable client-side data visualization or processing utilities
Building secure browser-based tools that handle sensitive API keys in localStorage
Rapidly prototyping interactive tools that need to work offline