JHamidun Live preview
Запусти live.mjs <path> — он поднимет http-сервер на 5173, откроет браузер и будет реактивно перезагружать страницу при изменении файлов.
node ./skills/live-preview/templates/live.mjs index.html
# → открыто http://localhost:5173/
# редактируй файлы — браузер обновится сам
Зависимости: npm i -D chokidar ws.
Как работает
- Простейший HTTP-сервер отдаёт файлы из текущей директории.
- WebSocket-канал на
/_lp— клиент в каждой странице слушает. - При сохранении файла chokidar шлёт
reloadвсем клиентам. - В страницы инжектится 6-строчный snippet перед
</body>.
Когда не использовать
- Если артефакт уже использует свой dev-server (Vite, Next).
- Если работаешь с production-сборкой без перезагрузок.
Legacy reference
Прежняя расширенная версия скилла (дерево @2026-04-30) сохранена целиком в references/legacy-live-preview.md. Секции там: Самый простой: livereload, Альтернатива: live-server, Альтернатива 3: vite (если артефакт уже React), Альтернатива 4: Python http.server + auto-reload, Custom auto-reload через WebSocket (если хочется без deps), Browser-sync features, Best practices, Tunneling для шеринга, Когда НЕ использовать, Stack, Антипаттерны.