vanilla-web — Claude Code skill: plain HTML/CSS/JS, no framework
A skill that keeps the agent on plain HTML, CSS and JavaScript for static pages and small widgets. Useful when a framework would be overkill.
npx skills add janjaszczak/cursor --skill vanilla-web -a claude-codeWhat vanilla-web does
The skill locks the agent into HTML, CSS and JavaScript only — no React, Vue or Angular. Code gets split into ES modules, each with a single job: DOM wiring, state, rendering, API calls, utilities. Global mutable state is discouraged; when state is unavoidable it lives inside a module and only a few functions are exposed.
Output means files that run as-is: no broken imports, no TODO stubs. The usual layout is index.html with semantic markup, styles.css, and js/main.js as the ESM entrypoint plus js/modules/*.js for components. When the work is done the agent hands over a short runbook covering how to open the page and what to check in DevTools.
The skill activates on requests like a static page, no-framework builds, a modal or tabs written straight against the DOM, or a refactor that strips out a framework dependency. A browser is assumed; for manual checks a local server can be started with python3. On a codebase already committed to React this skill pulls in the opposite direction, so it is worth checking whether it fits before installing.
What it helps with
- build a static page with plain HTML and CSS
- write a modal, tabs or dropdown directly against the DOM
- move logic into ES modules and drop global state
- refactor a component to remove its framework dependency
- check that every path and import resolves without a bundler
Example prompts for the agent
- build a newsletter signup page in plain HTML/CSS/JS, no frameworks
- rewrite this widget as ES modules and remove the global variables
- create a modal using
<dialog>with keyboard navigation
How to install vanilla-web
1Skills CLI (Vercel)
npx skills add janjaszczak/cursor --skill vanilla-web -a claude-code2Manually: put the files in place
~/.claude/skills/vanilla-web/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/vanilla-web/
1Skills CLI (Vercel)
npx skills add janjaszczak/cursor --skill vanilla-web -a codex2Manually: put the files in place
.agents/skills/vanilla-web/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add janjaszczak/cursor --skill vanilla-web -a cursor2Manually: put the files in place
.cursor/skills/vanilla-web/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install janjaszczak/cursor vanilla-web2Manually: put the files in place
.github/skills/vanilla-web/SKILL.md1Skills CLI (Vercel)
npx skills add janjaszczak/cursor --skill vanilla-web -a gemini-cli2Platform CLI
gemini skills install https://github.com/janjaszczak/cursor --path skills/vanilla-webManually: put the files in place
.devin/skills/vanilla-web/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add janjaszczak/cursor --skill vanilla-web -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about vanilla-web
How do I install vanilla-web in Claude?
Run npx skills add janjaszczak/cursor --skill vanilla-web -a claude-code. The skill file lands at ~/.claude/skills/vanilla-web/SKILL.md.
What does vanilla-web do?
It guides the agent through writing and editing plain HTML, CSS and JavaScript: modular ES modules, single responsibility per file, minimal global state, and files that run without a build step.
When is vanilla-web the wrong pick?
It targets projects without frameworks. On a codebase built on React, Vue or Angular it will push solutions away from the stack the project already uses.
