From UI Motion & States
Starts a local dev server with auto-reload on file changes. Supports browser-sync, live-server, Vite, Python livereload, and a custom WebSocket watcher for HTML/CSS/JS/JSX.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ui-motion:live-previewWhen to use
Юзер активно итерирует артефакт, тестит руками. Не каждое изменение перезапускать «open file» — просто пиши в HTML, в браузере перезагружается.
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Локальный server (port 5500 / 8080) + WebSocket / Server-Sent-Events для auto-reload при file change.
Локальный server (port 5500 / 8080) + WebSocket / Server-Sent-Events для auto-reload при file change.
npm i -g browser-sync
browser-sync start --server --files "**/*.{html,css,js,jsx}" --port 8080
Запустит:
npm i -g live-server
cd /path/to/artifact
live-server --port=8080
Чуть менее feature-rich чем browser-sync, но проще.
npm create vite@latest artifact -- --template react
cd artifact && npm install
npm run dev
Vite быстрее (HMR через ESM), но требует package.json и dependencies. Излишне для простого HTML.
Без node:
# Просто HTTP без auto-reload
python3 -m http.server 8080
# С auto-reload — нужен extra script
pip install livereload
python3 -c "
from livereload import Server
s = Server()
s.watch('*.html')
s.watch('**/*.css')
s.watch('**/*.jsx')
s.serve(port=8080, root='.')
"
scripts/dev-server.js:
const http = require('http');
const fs = require('fs');
const path = require('path');
const ws = require('ws');
const chokidar = require('chokidar');
const PORT = 8080;
const ROOT = process.cwd();
// HTTP server
http.createServer((req, res) => {
let url = req.url === '/' ? '/index.html' : req.url;
let file = path.join(ROOT, url.split('?')[0]);
if (!fs.existsSync(file)) { res.writeHead(404); return res.end('Not found'); }
let content = fs.readFileSync(file);
// Inject live-reload в HTML
if (file.endsWith('.html')) {
content = content.toString().replace('</body>',
`<script>
const ws = new WebSocket('ws://localhost:${PORT + 1}');
ws.onmessage = () => location.reload();
</script></body>`);
}
const types = { '.html': 'text/html', '.css': 'text/css', '.js': 'application/javascript', '.jsx': 'text/babel' };
res.writeHead(200, { 'Content-Type': types[path.extname(file)] || 'text/plain' });
res.end(content);
}).listen(PORT);
// WebSocket для broadcast
const wss = new ws.Server({ port: PORT + 1 });
// File watcher
chokidar.watch(ROOT, { ignored: /node_modules|\.git/ }).on('change', () => {
wss.clients.forEach(c => c.send('reload'));
});
console.log(`Dev server: http://localhost:${PORT}`);
npm i ws chokidar
node scripts/dev-server.js
Поверх auto-reload даёт:
--listen-on-all-ips для доступа с другого устройстваbrowser-sync start --server --files "**/*.{html,css,js}" \
--port 8080 \
--no-open \
--tunnel my-prototype # ngrok-like — public URL
| Что | Браузерный refresh | Через CSS-injection |
|---|---|---|
| Изменил HTML | ✅ нужен reload | — |
| Изменил CSS | ❌ зачем reload | ✅ inject, state preserved |
| Изменил JSX | ✅ нужен reload (Babel компилирует на ходу) | — |
| Изменил .json data | зависит | data fetch'нется при reload |
Browser-sync с --reload-debounce 500 — group изменения, не reload каждые 50ms.
Чтобы юзер видел prototype со своего устройства без копирования файлов:
# Через ngrok
ngrok http 8080
# → https://random.ngrok-free.app
# Через cloudflare tunnel (free, persistent)
cloudflared tunnel --url http://localhost:8080
Опасно: tunnel exposes localhost public. Не запускай при чувствительных данных.
open fileverifier — финальная проверка после dev (auto-reload не панацея, могут быть console errors которые ты не заметил в Visual)interactive-prototype — чаще всего dev'ишь именно егоtweaks-panel — комбо с live-reload даёт hot-iteration UX**/*) → false reloads на .git changes<base href> если артефакт под subpath → relative URL'ы ломаютсяnpx claudepluginhub jhamidun/claude-code-config-pack --plugin ui-motionProvides behavioral guidelines to reduce common LLM coding mistakes, focusing on simplicity, surgical changes, assumption surfacing, and verifiable success criteria.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.