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.

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

01Single-file architecture with inline CSS and JavaScript for maximum portability

02Advanced browser integrations including WebAssembly, Pyodide, and CORS-enabled APIs

03Standardized patterns for file I/O and clipboard management without a server

043 GitHub stars

05Framework-free development using vanilla JS and CDN-loaded dependencies

06Client-side state persistence using URL parameters and localStorage

Use Cases

01Creating shareable client-side data visualization or processing utilities

02Building secure browser-based tools that handle sensitive API keys in localStorage

03Rapidly prototyping interactive tools that need to work offline

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add rohunvora/my-claude-skills html-tools

For use in Claude.ai and ChatGPT

Download Skill