← ClaudeAtlas

ps-watchlisted

Sets up BrowserSync live-reload watcher for PrestaShop Panda child theme development in Lando. Auto-detects child theme name and Lando proxy URL. Watches child theme CSS/JS/TPL files and reloads the browser automatically on save. Use when working on PS frontend/maquetación in Lando and the user wants auto-reload, live reload, watcher, or is tired of reloading the browser manually after CSS changes.
educlopez/mallard · ★ 0 · Web & Frontend · score 75
Install: claude install-skill educlopez/mallard
# PS Watch — BrowserSync para Panda child theme en Lando Auto-reload en el browser cada vez que guardas CSS, JS o TPL del child theme. No toca Panda parent. Funciona fuera del contenedor Lando. --- ## Setup (ejecutar una vez por proyecto) ### Paso 1 — Detectar child theme y URL de Lando ```bash # Child theme = cualquier carpeta en themes/ que no sea panda ni core ls themes/ | grep -vE "^(panda|core|\.)" ``` ```bash # URL de Lando — leer el campo name del .lando.yml grep "^name:" .lando.yml | awk '{print $2}' # URL resultado: http://<name>.lndo.site # Usar HTTP, no HTTPS — evita errores de cert self-signed de Lando ``` ### Paso 2 — Crear `bs-config.js` en el root del proyecto Sustituir `CHILD_THEME` por el nombre detectado y `LANDO_URL` por `http://<name>.lndo.site`: ```js module.exports = { proxy: "http://LANDO_URL", files: [ "themes/CHILD_THEME/assets/css/**/*.css", "themes/CHILD_THEME/assets/js/**/*.js", "themes/CHILD_THEME/templates/**/*.tpl", "modules/*/views/templates/**/*.tpl", "modules/*/views/css/**/*.css", ], open: false, notify: false, reloadDelay: 150, logLevel: "info", }; ``` ### Paso 3 — Crear o actualizar `package.json` en el root Si ya existe `package.json`, añadir solo las entradas que falten. Si no existe, crear completo: ```json { "private": true, "scripts": { "watch": "browser-sync start --config bs-config.js" }, "devDependencies": { "browser-sync": "^3" } } ``` ### Paso 4 — Instalar dependenc