A few months ago I started building small tools as single HTML files - no npm, no React, no backend. Just one file that opens in a browser and works offline.
I built 4 real products this way:
DarkenAmber IT Tools - 17+ developer tools in 194KB
ZeroOffice - PDF, image, AI tools in one file
PrivacyKit - Photo privacy tools, no upload required
ElectroKit - Electrical calculator + cost estimates for CIS market
Every single one: one .html file. Works offline. Opens instantly. No server.
The problem with AI coding assistants
Every time I asked Claude or Copilot to build something simple, I got:
A React project with src/ folder
package.json with 12 dependencies
webpack config
TypeScript setup
...before writing a single line of actual logic.
I kept manually correcting it. "No, one file. No npm. Vanilla JS."
Then I realized - I should just teach it once and reuse that knowledge.
What is a Claude Skill?
A skill is a Markdown file with YAML frontmatter that changes how Claude thinks for a specific context.
It is not a prompt. It is not a system message. It is a reusable set of rules that shapes how Claude reasons, what it prioritizes, and what it avoids.
yaml---
name: single-file-app
description: "Build complete web tools as a single HTML file - vanilla JS, inline CSS, localStorage, offline-first."
tags:
- html
- vanilla-js
- offline
version: 1.2
---
The two skills I built
- single-file-app
Teaches Claude to build complete web tools in one HTML file.
What changes:
No React, no npm, no build tools unless truly justified
Vanilla JS first, always
localStorage for data persistence
Dark/light theme with system preference detection
Accessibility built in (labels, aria, keyboard nav)
XSS prevention for user input
Export/import for user data
Anti-patterns it prevents:
❌ "Let me set up a React project"
❌ Creating src/ folder for a simple tool
❌ Suggesting npm install for a calculator
✅ "Here is your complete HTML file"
- ship-it
Teaches Claude to bias toward shipping over planning for early-stage MVPs.
What it does:
Shows trade-offs instead of blocking decisions
Cuts scope to what proves the core idea
Knows when NOT to apply (payments, auth, licensing, irreversible ops)
The trade-off table (not a blocking table):
User saysClaude shows"We should make it scalable""Scalability now means X days extra. You have few or no users. Want to spend that on scale or first users?""Let me refactor before shipping""Refactor now (cleaner, delayed feedback) or ship and refactor if users return (faster validation, messier code). Your call."
The key insight: a skill should be an advisor, not a saboteur.
How to install
Claude Code
bash# single-file-app
curl -o CLAUDE.md https://raw.githubusercontent.com/DarkenAmber/claude-skills/main/single-file-app/SKILL.md
Both skills together
curl https://raw.githubusercontent.com/DarkenAmber/claude-skills/main/single-file-app/SKILL.md > CLAUDE.md
curl https://raw.githubusercontent.com/DarkenAmber/claude-skills/main/ship-it/SKILL.md >> CLAUDE.md
Claude.ai Projects
Copy the contents of any SKILL.md into your Project Instructions.
What I learned building these
- Skills should show trade-offs, not make decisions
Early version of ship-it had a table that said "We need tests before launching" → "Smoke test manually, write tests after validation". This is the skill making a decision for you. Bad.
Better: show the cost of each option and let the developer decide.
- Exceptions matter more than rules
The most valuable part of ship-it is not the rules - it is the Do NOT use when section:
Payments and billing
Auth and licensing
Irreversible data operations
Without this, the skill would tell you to skip tests on your payment module. That is dangerous.
- One file is not a limitation - it is a constraint that forces clarity
When you cannot split into components, you think harder about what actually needs to exist. Every line earns its place.
- Skills get better through iteration
Both skills went through 3+ review rounds. Each round caught something the previous missed. The process itself demonstrated ship-it's philosophy - ship early, iterate on feedback.
The repo
github.com/DarkenAmber/claude-skills
Two skills, MIT license, open to contributions.
If you build something with these - I would love to see it.
What rules do you give your AI coding assistant? Do you have a CLAUDE.md or .cursorrules file you swear by?