Agent skill
preview
Ver preview visual del proyecto. Toma screenshots, inicia dev server, muestra cambios en tiempo real.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/preview
SKILL.md
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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?