# vanilla-web

Скилл для сборки и правки статических страниц и мелких виджетов на чистом HTML, CSS и JavaScript. Пригодится, когда фреймворк в проекте лишний.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 666 установок
- Автор: janjaszczak
- Лицензия: не указана · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/janjaszczak/cursor/tree/HEAD/skills/vanilla-web/SKILL.md
- Обновлён: 2026-09-21
- HTML: https://affpapa.org/nevibecode/skills/vanilla-web

## Что делает

Скилл задаёт агенту жёсткие рамки: только HTML, CSS и JavaScript, без React, Vue и Angular. Код разбивается на ES-модули, каждая часть отвечает за одно — разметку, состояние, отрисовку, работу с сетью. Глобальное изменяемое состояние не приветствуется: если оно нужно, его прячут внутрь модуля и наружу выставляют минимум функций.

Ожидаемый результат — файлы, которые сразу запускаются: без битых путей и заглушек вроде TODO. Структура обычно такая: `index.html` с семантической разметкой, `styles.css` и `js/main.js` как точка входа плюс `js/modules/*.js` для компонентов. В конце агент даёт короткую инструкцию, как открыть страницу и что проверить в DevTools.

Скилл активируется по запросам вроде «статическая страница», «без фреймворка», «модалка на чистом JS» или при рефакторинге, который убирает зависимость от фреймворка. Для ручной проверки предполагается браузер; локальный сервер можно поднять через `python3`. Если проект уже плотно сидит на React, скилл будет тянуть код в другую сторону — это повод проверить, тот ли это инструмент.

## Установка

### Claude Code (родная платформа)

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

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/vanilla-web/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/vanilla-web/

### Codex

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

2. **Вручную: положить файлы**
- Файл: `.agents/skills/vanilla-web/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

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

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/vanilla-web/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

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

2. **Вручную: положить файлы**
- Файл: `.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. **Командой платформы**
```bash
gemini skills install https://github.com/janjaszczak/cursor --path skills/vanilla-web
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/vanilla-web/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

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

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/janjaszczak/cursor/tree/HEAD/skills/vanilla-web/SKILL.md

## Когда брать
- собрать статическую страницу на чистом HTML и CSS
- написать модалку, табы или выпадающий список прямо в DOM
- вынести логику в ES-модули и убрать глобальное состояние
- переписать компонент, чтобы убрать зависимость от фреймворка
- проверить, что все пути и импорты резолвятся без сборщика

## Примеры запросов агенту
- сделай страницу с формой подписки на чистом HTML/CSS/JS, без фреймворков
- перепиши этот виджет на ES-модули и убери глобальные переменные
- собери модальное окно на `<dialog>` с клавиатурной навигацией

## Похожие
- [modern-web-guidance](https://affpapa.org/nevibecode/skills/modern-web-guidance.md) — скилл · 35200 установок
- [web-design-engineer](https://affpapa.org/nevibecode/skills/web-design-engineer.md) — скилл · 8700 установок
- [popular-web-designs](https://affpapa.org/nevibecode/skills/popular-web-designs.md) — скилл · 918 установок
- [web-development](https://affpapa.org/nevibecode/skills/mindrally-web-development.md) — скилл · 815 установок
- [Web Design Builder](https://affpapa.org/nevibecode/skills/web-design-builder.md) — скилл · 416 установок
- [javascript-pro](https://affpapa.org/nevibecode/skills/httpsgithubcomjeffallan-javascript-pro.md) — скилл · 6100 установок

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md