Rene-Kuhm Preview Skill
Permite ver visualmente el proyecto mientras desarrollas.
Flujo de Trabajo
1. Verificar Dev Server
# Verificar si ya hay un servidor corriendo
lsof -i :3000 2>/dev/null || echo "No server running"
# Si no hay servidor, iniciarlo en background
pnpm dev --port 3000 &
# o
npm run dev -- --port 3000 &
# o
bun dev --port 3000 &
2. Esperar a que el servidor esté listo
# Esperar hasta 30 segundos
for i in {1..30}; do
curl -s http://localhost:3000 > /dev/null && break
sleep 1
done
3. Tomar Screenshot con Playwright
Usar el MCP de Playwright para:
- Navegar a
http://localhost:3000(o la URL especificada) - Esperar a que la página cargue completamente
- Tomar screenshot
- Mostrar la imagen al usuario
4. Opciones de Viewport
| Opción | Viewport | Uso |
|---|---|---|
| desktop | 1920x1080 | Default |
| tablet | 768x1024 | iPad |
| mobile | 375x812 | iPhone |
5. Páginas Comunes a Revisar
/ # Home
/login # Auth
/dashboard # Main app
/api/health # API status
Uso
# Preview de home
/preview
# Preview de página específica
/preview /dashboard
# Preview mobile
/preview --mobile
# Preview en puerto diferente
/preview --port 3001
# Preview de URL externa
/preview https://staging.myapp.com
Output
Después de tomar el screenshot:
- Mostrar la imagen directamente (Claude puede ver imágenes)
- Describir lo que se ve
- Identificar posibles problemas visuales
- Sugerir mejoras de UI/UX
Automatización
Para desarrollo continuo:
# Watch mode - tomar screenshot cada vez que hay cambios
fswatch -o src/ | while read; do
# Trigger screenshot
curl -s http://localhost:3000 > /dev/null && echo "Ready for screenshot"
done