{"slug": "collection-of-claude-skills-for-indie-developers-here-s-what-i-learned", "title": "Collection of Claude Skills for Indie Developers - Here's What I Learned", "summary": "A developer built four single-HTML-file tools—DarkenAmber IT Tools, ZeroOffice, PrivacyKit, and ElectroKit—to demonstrate offline-first, zero-dependency web apps. Frustrated with AI coding assistants defaulting to React and npm setups, they created two reusable Claude skills: 'single-file-app' for building complete tools in one HTML file, and 'ship-it' for prioritizing shipping over planning in early-stage MVPs. The skills are available as Markdown files with YAML frontmatter, designed to advise rather than dictate decisions.", "body_md": "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.\n\nI built 4 real products this way:\n\nDarkenAmber IT Tools - 17+ developer tools in 194KB\n\nZeroOffice - PDF, image, AI tools in one file\n\nPrivacyKit - Photo privacy tools, no upload required\n\nElectroKit - Electrical calculator + cost estimates for CIS market\n\nEvery single one: one .html file. Works offline. Opens instantly. No server.\n\nThe problem with AI coding assistants\n\nEvery time I asked Claude or Copilot to build something simple, I got:\n\nA React project with src/ folder\n\npackage.json with 12 dependencies\n\nwebpack config\n\nTypeScript setup\n\n...before writing a single line of actual logic.\n\nI kept manually correcting it. \"No, one file. No npm. Vanilla JS.\"\n\nThen I realized - I should just teach it once and reuse that knowledge.\n\nWhat is a Claude Skill?\n\nA skill is a Markdown file with YAML frontmatter that changes how Claude thinks for a specific context.\n\nIt 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.\n\nyaml---\n\nname: single-file-app\n\ndescription: \"Build complete web tools as a single HTML file - vanilla JS, inline CSS, localStorage, offline-first.\"\n\ntags:\n\nThe two skills I built\n\nTeaches Claude to build complete web tools in one HTML file.\n\nWhat changes:\n\nNo React, no npm, no build tools unless truly justified\n\nVanilla JS first, always\n\nlocalStorage for data persistence\n\nDark/light theme with system preference detection\n\nAccessibility built in (labels, aria, keyboard nav)\n\nXSS prevention for user input\n\nExport/import for user data\n\nAnti-patterns it prevents:\n\n❌ \"Let me set up a React project\"\n\n❌ Creating src/ folder for a simple tool\n\n❌ Suggesting npm install for a calculator\n\n✅ \"Here is your complete HTML file\"\n\nTeaches Claude to bias toward shipping over planning for early-stage MVPs.\n\nWhat it does:\n\nShows trade-offs instead of blocking decisions\n\nCuts scope to what proves the core idea\n\nKnows when NOT to apply (payments, auth, licensing, irreversible ops)\n\nThe trade-off table (not a blocking table):\n\nUser 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.\"\n\nThe key insight: a skill should be an advisor, not a saboteur.\n\nHow to install\n\nClaude Code\n\nbash# single-file-app\n\ncurl -o CLAUDE.md [https://raw.githubusercontent.com/DarkenAmber/claude-skills/main/single-file-app/SKILL.md](https://raw.githubusercontent.com/DarkenAmber/claude-skills/main/single-file-app/SKILL.md)\n\ncurl [https://raw.githubusercontent.com/DarkenAmber/claude-skills/main/single-file-app/SKILL.md](https://raw.githubusercontent.com/DarkenAmber/claude-skills/main/single-file-app/SKILL.md) > CLAUDE.md\n\ncurl [https://raw.githubusercontent.com/DarkenAmber/claude-skills/main/ship-it/SKILL.md](https://raw.githubusercontent.com/DarkenAmber/claude-skills/main/ship-it/SKILL.md) >> CLAUDE.md\n\nClaude.ai Projects\n\nCopy the contents of any SKILL.md into your Project Instructions.\n\nWhat I learned building these\n\nEarly 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.\n\nBetter: show the cost of each option and let the developer decide.\n\nThe most valuable part of ship-it is not the rules - it is the Do NOT use when section:\n\nPayments and billing\n\nAuth and licensing\n\nIrreversible data operations\n\nWithout this, the skill would tell you to skip tests on your payment module. That is dangerous.\n\nWhen you cannot split into components, you think harder about what actually needs to exist. Every line earns its place.\n\nBoth 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.\n\nThe repo\n\ngithub.com/DarkenAmber/claude-skills\n\nTwo skills, MIT license, open to contributions.\n\nIf you build something with these - I would love to see it.\n\nWhat rules do you give your AI coding assistant? Do you have a CLAUDE.md or .cursorrules file you swear by?", "url": "https://wpnews.pro/news/collection-of-claude-skills-for-indie-developers-here-s-what-i-learned", "canonical_source": "https://dev.to/darkenamber/collection-of-claude-skills-for-indie-developers-heres-what-i-learned-4k14", "published_at": "2026-06-18 12:42:47+00:00", "updated_at": "2026-06-18 12:51:13.217430+00:00", "lang": "en", "topics": ["developer-tools", "ai-tools", "large-language-models", "generative-ai", "ai-agents"], "entities": ["Claude", "Copilot", "DarkenAmber", "ZeroOffice", "PrivacyKit", "ElectroKit", "Claude Code", "Claude.ai"], "alternates": {"html": "https://wpnews.pro/news/collection-of-claude-skills-for-indie-developers-here-s-what-i-learned", "markdown": "https://wpnews.pro/news/collection-of-claude-skills-for-indie-developers-here-s-what-i-learned.md", "text": "https://wpnews.pro/news/collection-of-claude-skills-for-indie-developers-here-s-what-i-learned.txt", "jsonld": "https://wpnews.pro/news/collection-of-claude-skills-for-indie-developers-here-s-what-i-learned.jsonld"}}