vanilla-web — скилл для Claude Code: HTML/CSS/JS без фреймворков
Скилл для сборки и правки статических страниц и мелких виджетов на чистом HTML, CSS и JavaScript. Пригодится, когда фреймворк в проекте лишний.
npx skills add janjaszczak/cursor --skill vanilla-web -a claude-codeЧто делает vanilla-web
Скилл задаёт агенту жёсткие рамки: только HTML, CSS и JavaScript, без React, Vue и Angular. Код разбивается на ES-модули, каждая часть отвечает за одно — разметку, состояние, отрисовку, работу с сетью. Глобальное изменяемое состояние не приветствуется: если оно нужно, его прячут внутрь модуля и наружу выставляют минимум функций.
Ожидаемый результат — файлы, которые сразу запускаются: без битых путей и заглушек вроде TODO. Структура обычно такая: index.html с семантической разметкой, styles.css и js/main.js как точка входа плюс js/modules/*.js для компонентов. В конце агент даёт короткую инструкцию, как открыть страницу и что проверить в DevTools.
Скилл активируется по запросам вроде «статическая страница», «без фреймворка», «модалка на чистом JS» или при рефакторинге, который убирает зависимость от фреймворка. Для ручной проверки предполагается браузер; локальный сервер можно поднять через python3. Если проект уже плотно сидит на React, скилл будет тянуть код в другую сторону — это повод проверить, тот ли это инструмент.
Какие задачи решает
- собрать статическую страницу на чистом HTML и CSS
- написать модалку, табы или выпадающий список прямо в DOM
- вынести логику в ES-модули и убрать глобальное состояние
- переписать компонент, чтобы убрать зависимость от фреймворка
- проверить, что все пути и импорты резолвятся без сборщика
Примеры запросов агенту
- сделай страницу с формой подписки на чистом HTML/CSS/JS, без фреймворков
- перепиши этот виджет на ES-модули и убери глобальные переменные
- собери модальное окно на
<dialog>с клавиатурной навигацией
Как установить vanilla-web
1Через Skills CLI (Vercel)
npx skills add janjaszczak/cursor --skill vanilla-web -a claude-code2Вручную: положить файлы
~/.claude/skills/vanilla-web/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/vanilla-web/
1Через Skills CLI (Vercel)
npx skills add janjaszczak/cursor --skill vanilla-web -a codex2Вручную: положить файлы
.agents/skills/vanilla-web/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add janjaszczak/cursor --skill vanilla-web -a cursor2Вручную: положить файлы
.cursor/skills/vanilla-web/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install janjaszczak/cursor vanilla-web2Вручную: положить файлы
.github/skills/vanilla-web/SKILL.md1Через Skills CLI (Vercel)
npx skills add janjaszczak/cursor --skill vanilla-web -a gemini-cli2Командой платформы
gemini skills install https://github.com/janjaszczak/cursor --path skills/vanilla-webВручную: положить файлы
.devin/skills/vanilla-web/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add janjaszczak/cursor --skill vanilla-web -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о vanilla-web
Как установить vanilla-web в Claude?
Выполните npx skills add janjaszczak/cursor --skill vanilla-web -a claude-code. Файл скилла окажется по пути ~/.claude/skills/vanilla-web/SKILL.md.
Что делает vanilla-web?
Помогает агенту писать и править код на чистом HTML, CSS и JavaScript: модульные ES-модули, разделение ответственности, минимум глобального состояния и готовые к запуску файлы.
Для каких задач скилл не подойдёт?
Он рассчитан на проекты без фреймворков. Если кодовая база построена на React, Vue или Angular, скилл будет уводить решения в сторону от принятого в проекте стека.
