Generar marcos de proyecto
Toma capturas de pantalla de las mejores páginas del proyecto actual y las enmarca. Esta habilidad se encarga del descubrimiento, la preparación de la aplicación y la calidad de las capturas raw; SUB-HABILIDAD REQUERIDA: generate-frame se encarga del enmarcado y la portada. Ejecuta su paso 1 primero (localizar y verificar frame-kit) y detente si falla. <frame-kit> es la ruta que resuelve.
Salidas, nunca mezcladas: raw → ~/Pictures/<project>-portfolio/raw/, enmarcadas → ~/Pictures/<project>-portfolio/framed/.
1. Escanear
Encuentra páginas orientadas al usuario: rutas, componentes de página/vista, recursos de administración (Filament, Nova…), menús de navegación. Lee el código para saber cómo ejecutar la aplicación, qué roles existen y qué rol ve cada página. No adivines puertos, URLs o credenciales; verifícalos ejecutando la aplicación o preguntando.
2. Proponer hasta 5
Decide qué tipo de producto es este, luego clasifica las páginas según cuán bien muestren lo que realmente hace. La pregunta es: ¿qué haría que un extraño entendiera este producto con una sola imagen?
| Producto | Páginas más representativas |
|---|---|
| Aplicación de negocios/admin (POS, CRM, inventario) | el flujo de trabajo principal con filas reales, luego el panel de control, luego listas ricas en datos |
| Panel de control/analíticas | panel de control principal, un desglose, un informe |
| Sitio de contenido/marketing/e-commerce | página de aterrizaje/hero, listado, página de detalle, carrito o checkout |
| Editor/constructor/herramienta creativa | el lienzo con contenido, luego una galería o lista de proyectos |
| Herramienta para desarrolladores/documentación | interfaz principal en uso, una vista de resultados/salida |
Omite páginas de inicio de sesión, formularios simples, ajustes, páginas de error y casi duplicados. Menos de 5 está bien. Enumera cada una con nombre, ruta, rol y una razón de una línea.
3. Preguntar
AskUserQuestion, multiSelect (máximo 4 opciones por pregunta; divide en dos preguntas si es necesario). La captura no debe comenzar antes de que el usuario elija. También pregunta: claro u oscuro (solo si la aplicación tiene ambos), y qué rol/cuenta usar. Las credenciales provienen del entorno del usuario o de una sesión existente; nunca las escribas en scripts, archivos o salidas, y nunca eludas los controles de acceso (una página que el rol elegido no puede ver se omite, no se fuerza).
4. Preparar la aplicación
- Inicia la aplicación si no se está ejecutando, en un puerto libre; recuerda detener lo que iniciaste.
- Abre las páginas elegidas. Datos vacíos o placeholders → dilo y ofrece datos de demostración realistas. La siembra necesita un sí explícito, va a una base de datos separada o desechable, y la base de datos de desarrollo nunca se toca sin uno. Prefiere estados que la interfaz pueda crear (agregar artículos al carrito) sobre escrituras directas en la base de datos.
- No agregues dependencias ni archivos al proyecto del usuario. Los scripts viven en el scratchpad.
5. Capturar
Escribe un script de scratchpad que importe capturePages desde <this skill>/scripts/capture.mjs:
import { capturePages } from '<this skill>/scripts/capture.mjs';
const results = await capturePages({
frameKit: '<frame-kit>', outDir: '<raw dir>', colorScheme: 'light', // un esquema para todo el lote
storageState: process.env.APP_STORAGE_STATE, // sesión guardada; o login: async (page) => {...} leyendo process.env
setup: (ctx) => ctx.addInitScript(() => localStorage.setItem('theme', 'light')), // el propio interruptor de tema de la aplicación, si existe
pages: [{ name: '01-dashboard', url: 'http://localhost:8000/admin', prepare: async (page) => { /* abrir el carrito, descartar el tour… */ } }],
});
console.log(JSON.stringify(results, null, 2));
Utiliza un contexto de 1440×900 @2x para todo el lote (los PNG son 2880×1800), espera a que la red esté inactiva, fuentes y contenido diferido, e informa issues por página: errores de consola/página, HTTP ≥ 400, redirecciones (generalmente una falta de inicio de sesión), imágenes rotas, spinners/esqueletos visibles, overlays/banners de cookies, contenedores de gráficos vacíos. Nombra los archivos NN-<slug>.png en el orden de la propuesta. Pasa los selectores propios de la aplicación mediante loadingSelectors/overlaySelectors/hideCss (toasts, barras de depuración).
Las pantallas interactivas (carrito, editor, tablero) necesitan contenido de muestra agregado en prepare primero.
Para cada página con problemas: arréglala (descarta el overlay, espera el elemento, inicia sesión) y vuelve a capturar solo esa página; o informa al usuario que es irreparable y elimínala. Una advertencia que consideres inofensiva (por ejemplo, un 404 del favicon) está bien; dilo. Luego lee cada PNG: contenido real, nada medio cargado, ningún dato privado (correos electrónicos, tokens, nombres reales de clientes) que no deba publicarse; verifica con el usuario si no estás seguro.
6. Enmarcar
Ejecuta los pasos 2–4 de generate-frame con la carpeta raw como entrada: --out <framed dir>, --url "<app host>/{name}", un --resolution (por defecto el máximo). Un fallo parcial se informa, no se oculta: vuelve a capturar o enmarcar solo los archivos fallidos. Informa la carpeta raw, la carpeta enmarcada, el par de portada, las páginas eliminadas y por qué, y cualquier limitación (por ejemplo, imágenes no inspeccionadas).