CrziDev/claude-skills

Generate frame

Convierte capturas de pantalla existentes en PNG enmarcados con frame-kit, que realiza todo el renderizado. Este skill localiza la herramienta, la ejecuta, verifica los resultados y elige una portada. Para tomar capturas de pantalla de las páginas de un proyecto primero, usa generate-project-frames.

1. Localizar y verificar frame-kit

Denomina a la carpeta <frame-kit>. Usa la primera que tenga cli.mjs y un package.json llamado frame-kit:

1. $FRAME_KIT_DIR
2. la carpeta detrás de un comando frame-kit en PATH (readlink -f "$(command -v frame-kit)", su carpeta)
3. una búsqueda en ~/projects ~/code ~/dev ~, profundidad ≤ 4, omitiendo node_modules (varias coincidencias → pregunta cuál)
4. pregunta al usuario; si no tiene ninguna, sugiere git clone https://github.com/CrziDev/frame-kit

Luego:

• node_modules faltante → npm install en <frame-kit>.
• Ejecuta node <frame-kit>/cli.mjs --help y construye comandos solo a partir de las opciones que liste. Si --resolution o --fit están ausentes, la instalación es antigua: omítelos e indica al usuario que ejecute git pull.
• "Chromium not found" → npx playwright install chromium en <frame-kit>, o establece CHROME_PATH.

No escribas la ruta en ningún archivo del skill.

2. Enmarcar

node <frame-kit>/cli.mjs single <image|folder> --out <framed dir> [options]

• --out: pásalo siempre. El valor predeterminado es <input dir>/framed/, que se anida dentro de una carpeta raw. Mantén las imágenes enmarcadas separadas de las fuentes.
• --url "<host>/{name}": texto de la barra de direcciones; {name} = nombre del archivo sin su prefijo NN-. Usa el host real de la aplicación y las rutas cuando se conozcan, si no, omítelo.
• --style paper: recibos, facturas, impresiones. Una ejecución de carpeta usa un solo estilo, así que vuelve a ejecutar solo esos archivos individualmente con --style paper y el mismo --out.
• --resolution standard|high|max: el valor predeterminado es max (3840×2400). Usa standard (1920×1200) para READMEs y vistas previas rápidas, high (2560×1600) para web y diapositivas. Una salida más grande proporciona un marco y texto más nítidos, no más detalle en la captura de pantalla. Usa una resolución por lote.
• --fit auto|contain|cover: el valor predeterminado es auto (captura de pantalla completa; páginas muy altas recortadas desde arriba). Cámbialo solo para corregir un mal recorte.

El código de salida 1 significa que algunos archivos fallaron; los demás se escriben igual y los fallos se listan en stderr. Corrige la causa (imagen ilegible o corrupta, tipo no compatible, más de 50 MB) y vuelve a ejecutar solo esos archivos. Si todos los archivos fallan, sospecha de Chromium.

3. Portada (solo para entrada de carpeta)

Observa las imágenes y elige dos que se complementen:

• atrás: vista general del producto (panel de control, análisis, inicio), en orientación horizontal, legible en tamaño de miniatura.
• delante: la pantalla que muestra lo que hace la aplicación, con contenido real, un diseño diferente al de atrás.
• nunca: inicio de sesión, estados vacíos, páginas de error, capturas de pantalla muy altas, recibos o la misma pantalla dos veces.

node <frame-kit>/cli.mjs cover <back> <front> --back-url "…" --front-url "…" --out <framed dir>/00-cover.png (misma --resolution). Pasa las capturas de pantalla originales, no las enmarcadas. ¿Solo una imagen que vale la pena mostrar, o el usuario quiere un titular? Usa headline (consulta --help).

4. Verificar e informar

1. node <this skill>/scripts/verify-frames.mjs <input> <framed dir> --resolution <preset> verifica que cada entrada tenga un PNG válido del tamaño correcto, además de la portada. No juzga la apariencia.
2. Lee cada PNG de salida (y la portada). Busca una captura de pantalla en blanco o parcialmente cargada, contenido recortado, texto ilegiblemente pequeño, estilo incorrecto (recibo en una ventana de navegador), una barra de direcciones incorrecta. Vuelve a ejecutar solo los archivos afectados con opciones ajustadas y luego vuelve a verificar. Si no puedes ver las imágenes, indícalo.
3. Informa: carpeta enmarcada, archivos que fallaron o fueron rehechos, el par de portada y en una oración por qué se complementan entre sí.