Communitygithub.com

Niltra/web-assets-reales

Obtén y procesa imágenes reales para un sitio web: capturas con Playwright de proyectos en vivo y repositorios, foto de perfil descargada con la sesión del navegador, logos de tecnologías con Simple Icons y un tratamiento visual coherente con el Design DNA. Úsala cuando falten imágenes, logos, capturas, foto o secuencias de frames.

¿Qué es web-assets-reales?

Este skill de agente de IA automatiza la obtención y el procesamiento de activos visuales para sitios web, garantizando que las imágenes sean auténticas y no genéricas. Utiliza Playwright para capturar builds de producción reales (viewport 1440x900, deviceScaleFactor 2) en estados significativos (dashboard con datos, resultados de consultas, pipelines en ejecución), evitando páginas vacías o mockups. Para la foto personal, descarga el perfil usando la sesión del navegador ya abierta (Chrome con puerto de depuración) y la guarda en `public/me.jpg` o `public/me.webp`. Los logos de tecnologías se obtienen de Simple Icons (SVG monocolor) o se generan como monogramas tipográficos si no están disponibles; nunca se usan imágenes inventadas o de Google. Todas las capturas se tratan con un duotono suave mapeado a la paleta del Design DNA, con grano ligero opcional, y se optimizan a menos de 300 KB usando sharp (AVIF/WebP) y next/image con sizes correctos. El skill es compatible con agentes como Claude Code, Cursor y Codex, y se activa cuando faltan imágenes, logos, capturas, foto o secuencias de frames.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Niltra/agent-skills-web/tree/HEAD/skills/web-assets-reales
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

Activos reales, cero stock

Principio: un sitio web no parece hecho por IA cuando sus imágenes son irrepetibles: producto real, terminal real, fotos reales. Prohibido stock, renders genéricos y generación IA como sustituto.

Capturas de proyectos (Playwright)

  • Capturar siempre el build en producción del proyecto, viewport 1440x900, deviceScaleFactor: 2.
  • Elegir estados que cuenten algo (dashboard con datos, resultado de query, pipeline corriendo), no la home vacía.
  • Esperar networkidle + fuentes cargadas antes de disparar; ocultar cookies/banners si estorban.
  • Guardar en public/shots/<proyecto>/<estado>.png y comprimir con sharp (AVIF/WebP para web, PNG solo si hace falta transparencia).
  • Para repos sin demo: captura de la página del repo (README renderizado), nunca un mockup.

Foto personal

  • Descarga tu foto de perfil con la sesión del navegador que ya tengas abierta (Chrome con puerto de depuración), en lugar de usar una captura de pantalla recortada.
  • Guarda el original en public/me.jpg (o public/me.webp) y una versión recortada; nunca deformar ni retocar piel/identidad.
  • Si ya tienes un retrato en el proyecto, reutilízalo antes de volver a descargarlo.

Logos de tecnologías

  • Usar Simple Icons (npm i simple-icons) para SVG monocolor (MIT/CC0 de la librería; los logos son marcas de sus dueños, uso nominativo informativo).
  • Renderizar inline con color de tinta del Design DNA por defecto; color de marca solo en detalles de hover si aporta.
  • Si una herramienta no está en Simple Icons (algunas de IA), usar monograma tipográfico consistente (inicial en la mono técnica), nunca una imagen inventada o un logo sacado de Google Imágenes.

Terminal / código

  • Si hace falta "prueba de terminal": montar un bloque HTML con la mono técnica, ejecutar comandos reales del proyecto y capturar con Playwright. Nunca inventar una salida falsa.
  • Los comandos y versiones deben ser ciertos y verificables.

Tratamiento y coherencia

  • Duotono suave mapeado a la paleta del Design DNA + grano ligero opcional; el mismo tratamiento en todas las capturas.
  • Bordes/radios y sombras según tokens del proyecto, no por imagen.
  • Peso objetivo: ninguna imagen > 300KB; usar next/image con sizes correctos y priority solo en la primera.
  • Todo asset lleva alt descriptivo y, si es decorativo, alt="".

Reglas de integridad

  • Cero métricas inventadas en capturas (si un gráfico no es real, no se captura).
  • Cero marcas de agua, cero imágenes con copyright dudoso, cero IA generativa como contenido principal.
  • Registrar en docs/assets.md origen y licencia de cada asset.

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

Niltra/web-diseno-antislop

Diseña y audita interfaces web que no parecen hechas por IA (anti-slop). Fija Design DNA antes de escribir código, aplica baneos duros (Inter, morado, hero centrado, bento, 3 cards) y los dos tests anti-slop. Úsala al construir o rediseñar cualquier página, sección o componente de una web, o al revisar si una web "parece IA".

Niltra/web-qa-visual

Verifica webs con Playwright CLI antes de darlas por terminadas: errores de consola, requests fallidas, overflow responsive a 375/414/768/1280/1440, accesibilidad axe, teclado y foco, reduced-motion, enlaces, SEO/meta y métricas de carga. Úsala al testear una web, tras cada cambio grande o para validar un deploy.

Niltra/web-scrollytelling

Implementa experiencias de scroll cinematográficas estilo Apple (hero pinneado, secuencia de frames en canvas, video scrubbing, capítulos narrados) con GSAP ScrollTrigger, sin scroll-jacking y con rendimiento medido. Úsala al construir heroes animados, secciones pinneadas, galerías horizontales o cualquier efecto "la web es como un vídeo que vas moviendo".

Skills relacionados

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community