# vanilla-web

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.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 666 installs
- Author: janjaszczak
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/janjaszczak/cursor/tree/HEAD/skills/vanilla-web/SKILL.md
- Updated: 2026-09-21
- HTML: https://affpapa.org/en/nevibecode/skills/vanilla-web

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add janjaszczak/cursor --skill vanilla-web -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/vanilla-web/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/vanilla-web/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add janjaszczak/cursor --skill vanilla-web -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/vanilla-web/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add janjaszczak/cursor --skill vanilla-web -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/vanilla-web/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install janjaszczak/cursor vanilla-web
```

2. **Manually: put the files in place**
- File: `.github/skills/vanilla-web/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add janjaszczak/cursor --skill vanilla-web -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/janjaszczak/cursor --path skills/vanilla-web
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/vanilla-web/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add janjaszczak/cursor --skill vanilla-web -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/janjaszczak/cursor/tree/HEAD/skills/vanilla-web/SKILL.md

## When to use it
- 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
- 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

## Similar
- [modern-web-guidance](https://affpapa.org/en/nevibecode/skills/modern-web-guidance.md) — skill · 35200 installs
- [web-design-engineer](https://affpapa.org/en/nevibecode/skills/web-design-engineer.md) — skill · 8700 installs
- [popular-web-designs](https://affpapa.org/en/nevibecode/skills/popular-web-designs.md) — skill · 918 installs
- [web-development](https://affpapa.org/en/nevibecode/skills/mindrally-web-development.md) — skill · 815 installs
- [Web Design Builder](https://affpapa.org/en/nevibecode/skills/web-design-builder.md) — skill · 416 installs
- [javascript-pro](https://affpapa.org/en/nevibecode/skills/httpsgithubcomjeffallan-javascript-pro.md) — skill · 6100 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md