Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Single-File HTML Tool Generator — measured AI agent skill | DecimalAI

enkrateialucca/html-tool-generator

SkillScore74Maintained

Generate single-file HTML tools following Simon Willison's patterns. Creates client-side utilities with localStorage API key management, no build steps, and CDN dependencies.

by enkrateialucca

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

decimalai skills pull enkrateialucca-html-tool-generator

Get this skill — curl · raw file

curl -fsSL https://app.decimal.ai/s/enkrateialucca-html-tool-generator/SKILL.md

Raw file: /s/enkrateialucca-html-tool-generator/SKILL.md ↗ · machine-readable summary at /s/enkrateialucca-html-tool-generator.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

23 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 6d ago

Yes — +13% lift · at higher cost+101% tokens0% turns74% of whole cases pass with skill (17/23)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-03	✗→✓	▲ Improved	83%	0%
case-04	✗→✓	▲ Improved	335%	0%
case-08	✗→✓	▲ Improved	250%	0%
case-12	✗→✓	▲ Improved	116%	0%
case-15	✗→✓	▲ Improved	133%	0%

Showing 5 of 23 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/1/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

enkrateialucca / skills

skills/html-tool-generator/SKILL.md

View on GitHub ↗

License MITImported 8/1/2026Version v1

Skill contents

SKILL.md

Single-File HTML Tool Generator

Generate self-contained HTML tools that work entirely in the browser. Based on Simon Willison's patterns for building useful utilities without servers, build steps, or frameworks.

When to Use This Skill

Use this skill when the user requests:

Building a single-file HTML utility or tool
Creating a browser-based tool that uses an API
Making a client-side data processor or converter
Building a tool that should work offline or without a server
Creating utilities for LLM API testing/interaction

Trigger phrases: "create an HTML tool", "build a single-file tool", "make a browser utility", "create a client-side tool", "build an API playground"

Core Principles

1. Single File, No Build Steps

Everything in one HTML file: HTML, CSS, and JavaScript
Never use React, Vue, or anything requiring compilation
No JSX, no TypeScript, no bundlers
Vanilla JavaScript only

2. CDN Dependencies Only

Load libraries from cdnjs, jsDelivr, or unpkg
Always use versioned URLs for stability
Common libraries:
marked for Markdown rendering
highlight.js for syntax highlighting
pdf.js for PDF handling
Tesseract.js for OCR
Pyodide for Python execution

3. API Keys in localStorage (NEVER in HTML)

Prompt user for API keys on first use
Store in localStorage immediately
Never send keys to any server
Provide a way to clear/reset stored keys

4. State Management

URL hash/params for shareable state (configs, settings)
localStorage for user data (drafts, preferences)
No server-side storage needed

Template Structure

Every HTML tool follows this anatomy:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tool Name</title>
    <style>
        /* All CSS inline - no external stylesheets */
    </style>
</head>
<body>
    <!-- Tool UI -->

    <script>
        /* All JavaScript inline - no external scripts except CDN libs */
    </script>
</body>
</html>

CSS Patterns

Base Styling

css
* {
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    line-height: 1.6;
    background: #f5f5f5;
}

/* Prevent mobile zoom on input focus */
input, textarea, select {
    font-size: 16px;
}

Common UI Components

css
/* Card container */
.card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Primary button */
button {
    background: #2563eb;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background: #1d4ed8;
}

button:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

/* Text inputs */
textarea, input[type="text"], input[type="url"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-family: inherit;
    resize: vertical;
}

textarea:focus, input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Error display */
.error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 12px;
    border-radius: 6px;
    margin: 12px 0;
}

/* Success display */
.success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #16a34a;
    padding: 12px;
    border-radius: 6px;
    margin: 12px 0;
}

/* Loading state */
.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Code/output display */
pre {
    background: #1e293b;
    color: #e2e8f0;
    padding: 16px;
    border-radius: 6px;
    overflow-x: auto;
    font-family: 'SF Mono', Monaco, 'Consolas', monospace;
    font-size: 14px;
}

File Upload Styling

css
/* Drag and drop zone */
.drop-zone {
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    padding: 40px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.drop-zone:hover, .drop-zone.dragover {
    border-color: #2563eb;
    background: #eff6ff;
}

.drop-zone input[type="file"] {
    display: none;
}

/* File list */
.file-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.file-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f3f4f6;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
}

.file-item button {
    background: none;
    color: #6b7280;
    padding: 2px 6px;
    font-size: 12px;
}

.file-item button:hover {
    color: #dc2626;
    background: none;
}

JavaScript Patterns

API Key Management (CRITICAL)

javascript
// Get or prompt for API key
function getApiKey(keyName, providerName) {
    let key = localStorage.getItem(keyName);
    if (!key) {
        key = prompt(`Please enter your ${providerName} API key:`);
        if (key) {
            localStorage.setItem(keyName, key.trim());
        }
    }
    return key;
}

// Clear stored API key
function clearApiKey(keyName) {
    localStorage.removeItem(keyName);
}

// Example usage:
// const apiKey = getApiKey('ANTHROPIC_API_KEY', 'Anthropic');
// const apiKey = getApiKey('OPENAI_API_KEY', 'OpenAI');
// const apiKey = getApiKey('GEMINI_API_KEY', 'Google Gemini');

Settings Management Link

javascript
// Add settings link to manage API keys
function addSettingsUI(keyName, providerName) {
    const settingsHtml = `
        <div class="settings">
            <small>
                <a href="#" onclick="clearApiKey('${keyName}'); location.reload(); return false;">
                    Reset ${providerName} API key
                </a>
            </small>
        </div>
    `;
    document.body.insertAdjacentHTML('beforeend', settingsHtml);
}

File Handling

javascript
// Setup drag and drop
function setupDropZone(dropZone, onFilesSelected) {
    const fileInput = dropZone.querySelector('input[type="file"]');

    dropZone.addEventListener('click', () => fileInput.click());

    dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropZone.classList.add('dragover');
    });

    dropZone.addEventListener('dragleave', () => {
        dropZone.classList.remove('dragover');
    });

    dropZone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropZone.classList.remove('dragover');
        onFilesSelected(Array.from(e.dataTransfer.files));
    });

    fileInput.addEventListener('change', (e) => {
        onFilesSelected(Array.from(e.target.files));
    });
}

// Read file as base64
async function readFileAsBase64(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => {
            const base64 = reader.result.split(',')[1];
            resolve(base64);
        };
        reader.onerror = reject;
        reader.readAsDataURL(file);
    });
}

// Read file as text
async function readFileAsText(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => resolve(reader.result);
        reader.onerror = reject;
        reader.readAsText(file);
    });
}

Clipboard Operations

javascript
// Copy to clipboard with feedback
async function copyToClipboard(text, button) {
    try {
        await navigator.clipboard.writeText(text);
        const originalText = button.textContent;
        button.textContent = 'Copied!';
        setTimeout(() => button.textContent = originalText, 2000);
    } catch (err) {
        console.error('Copy failed:', err);
    }
}

// Paste from clipboard
async function pasteFromClipboard() {
    try {
        return await navigator.clipboard.readText();
    } catch (err) {
        console.error('Paste failed:', err);
        return null;
    }
}

Download Generated Files

javascript
// Download text as file
function downloadAsFile(content, filename, mimeType = 'text/plain') {
    const blob = new Blob([content], { type: mimeType });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
}

// Download JSON
function downloadJSON(data, filename) {
    downloadAsFile(JSON.stringify(data, null, 2), filename, 'application/json');
}

URL State Persistence

javascript
// Save state to URL
function saveStateToUrl(state) {
    const params = new URLSearchParams(state);
    history.replaceState(null, '', '?' + params.toString());
}

// Load state from URL
function loadStateFromUrl() {
    const params = new URLSearchParams(window.location.search);
    return Object.fromEntries(params.entries());
}

// Hash-based state (for larger data)
function saveToHash(data) {
    location.hash = encodeURIComponent(JSON.stringify(data));
}

function loadFromHash() {
    if (!location.hash) return null;
    try {
        return JSON.parse(decodeURIComponent(location.hash.slice(1)));
    } catch {
        return null;
    }
}

API Calls Pattern

javascript
// Generic API call with error handling
async function apiCall(url, options = {}) {
    try {
        const response = await fetch(url, options);
        if (!response.ok) {
            const error = await response.json().catch(() => ({}));
            throw new Error(error.error?.message || `HTTP ${response.status}`);
        }
        return await response.json();
    } catch (err) {
        throw err;
    }
}

// Show loading state
function setLoading(button, isLoading) {
    button.disabled = isLoading;
    button.textContent = isLoading ? 'Processing...' : button.dataset.originalText;
}

Streaming Responses (for LLM APIs)

javascript
// Handle streaming response
async function handleStreamingResponse(response, onChunk) {
    const reader = response.body.getReader();
    const decoder = new TextDecoder();
    let buffer = '';

    while (true) {
        const { done, value } = await reader.read();
        if (done) break;

        buffer += decoder.decode(value, { stream: true });
        const lines = buffer.split('\n');
        buffer = lines.pop(); // Keep incomplete line in buffer

        for (const line of lines) {
            if (line.startsWith('data: ')) {
                const data = line.slice(6);
                if (data === '[DONE]') return;
                try {
                    onChunk(JSON.parse(data));
                } catch {}
            }
        }
    }
}

Common LLM API Integrations

Anthropic Claude API

javascript
async function callClaude(apiKey, messages, model = 'claude-sonnet-4-20250514') {
    const response = await fetch('https://api.anthropic.com/v1/messages', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'x-api-key': apiKey,
            'anthropic-version': '2023-06-01',
            'anthropic-dangerous-direct-browser-access': 'true'
        },
        body: JSON.stringify({
            model,
            max_tokens: 4096,
            messages
        })
    });

    if (!response.ok) {
        const error = await response.json();
        throw new Error(error.error?.message || 'API call failed');
    }

    return response.json();
}

OpenAI API

javascript
async function callOpenAI(apiKey, messages, model = 'gpt-4o') {
    const response = await fetch('https://api.openai.com/v1/chat/completions', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${apiKey}`
        },
        body: JSON.stringify({
            model,
            messages
        })
    });

    if (!response.ok) {
        const error = await response.json();
        throw new Error(error.error?.message || 'API call failed');
    }

    return response.json();
}

Google Gemini API

javascript
async function callGemini(apiKey, contents, model = 'gemini-2.0-flash-exp') {
    const url = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${apiKey}`;

    const response = await fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ contents })
    });

    if (!response.ok) {
        const error = await response.json();
        throw new Error(error.error?.message || 'API call failed');
    }

    return response.json();
}

Tool Categories & Examples

1. Data Converters

JSON ↔ YAML converter
CSV viewer/editor
Markdown preview
Base64 encoder/decoder
URL encoder/decoder

2. API Playgrounds

LLM chat interfaces (Claude, GPT, Gemini)
Token counters
Image generators
Text-to-speech tools

3. File Processors

Image resizer/cropper
PDF text extractor
OCR tool (with Tesseract.js)
Audio transcription

4. Development Utilities

JSON formatter/validator
Regex tester
Color picker/converter
Hash generator (MD5, SHA)

5. Productivity Tools

QR code generator
Timestamp converter
Text diff viewer
Clipboard manager

Workflow

1. Understand the Tool Requirements

What is the main function?
Does it need an API? Which one?
What inputs/outputs are needed?
Should state be shareable (URL) or private (localStorage)?

2. Choose the Right Patterns

API key management if calling external services
File upload if processing user files
Clipboard operations for copy/paste workflows
URL state for shareable configurations

3. Build the HTML Structure

Clean, semantic HTML
Accessible form controls
Clear visual hierarchy

4. Add Styling

Mobile-friendly (16px fonts, touch targets)
Dark mode support (optional)
Clear loading/error states

5. Implement JavaScript

API key handling FIRST
Core functionality
Error handling
Loading states

6. Test & Deliver

Test in browser
Verify API keys stay in localStorage
Check mobile responsiveness
Save to user's preferred location

Security Checklist

Before delivering any HTML tool:

] API keys stored in localStorage, NEVER in HTML source
] No hardcoded secrets or credentials
] API calls use HTTPS
] User data stays client-side
] No eval() or innerHTML with user input (use textContent)
] File inputs sanitized before processing

File Naming Convention

Save tools with descriptive, hyphenated names:

claude-chat-tool.html
json-yaml-converter.html
image-resizer.html
token-counter.html

Default save location: User's current working directory or specified path.

Example Complete Tool

See template-basic.html in this skill directory for a complete working example demonstrating all patterns.

Tips for Success

Keep it simple:

One file, one purpose
No over-engineering
If it needs a build step, you're doing it wrong

User experience:

Clear instructions on first load
Obvious "Reset API key" option
Copy-to-clipboard buttons
Mobile-friendly touch targets

Reliability:

Graceful error handling
Works offline after first load (if no API needed)
No external CSS/fonts that might fail

Performance:

Lazy-load heavy libraries only when needed
Use async/await properly
Don't block the main thread

Want to see if enkrateialucca/html-tool-generator would activate on your phrasing? Try it before you install — no LLM call, no signup.

Other measured skills in the registry, with their headline benchmark lift.