Communitygithub.com

SamuelChien/mega-skills-collection

Convierte cualquier video en una página de inicio de desplazamiento cinemático al estilo Apple, donde el progreso del scroll avanza visiblemente el fotograma del video.

¿Qué es mega-skills-collection?

Esta habilidad transforma cualquier archivo de video en una página web de inicio de desplazamiento (scroll-driven landing page) con un efecto cinematográfico similar al utilizado por Apple en páginas de producto o la página de inicio de GitHub Copilot. El usuario proporciona un video y la habilidad extrae un conjunto de fotogramas clave a intervalos regulares usando ffmpeg, luego construye un archivo HTML autónomo con un héroe sticky (fijo) y un listener de desplazamiento que cambia el fotograma visible a medida que el usuario se desplaza hacia abajo. Es útil para desarrolladores y diseñadores que desean crear páginas de aterrizaje visualmente impactantes sin necesidad de herramientas complejas. Soporta múltiples plataformas como Vercel, Netlify y Cloudflare Pages, y respeta las reglas del sistema de diseño yuv-design-system, incluyendo tipografía (Anton + Inter para inglés, Rubik + Assistant para hebreo) y paleta de colores Fly High (púrpura, amarillo, gris). El resultado es una carpeta con `index.html` y un directorio `frames/` lista para desplegar en cualquier host estático.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/SamuelChien/mega-skills-collection/tree/HEAD/video-to-landing-page
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

Video → Página de Inicio con Desplazamiento Cinemático

Construye una página de aterrizaje cinematográfica donde el héroe es un video que se reproduce al desplazarse en lugar de por tiempo, como las páginas de producto de Apple o la página de inicio de GitHub Copilot. Los fotogramas se extraen del video fuente y se intercambian según el desplazamiento del usuario; debajo del héroe fijo, las secciones con desplazamiento normal contienen el texto y la llamada a la acción.

Cuándo invocar

  • El usuario proporciona un video y solicita una página de aterrizaje, sitio con desplazamiento, héroe de fotogramas al desplazar o sitio web a partir de un video.
  • Menciones como "desplazamiento estilo Apple", "página de inicio de GitHub Copilot", "avance al desplazar", "fotograma al desplazar".
  • Equivalentes en hebreo: "דף נחיתה מסרטון", "אתר עם גלילה", "סרטון בגלילה"

Ubicación de guardado

Predeterminada: ~/Documents/yuv-projects/landings/<slug>/ — guarda siempre las páginas de aterrizaje aquí para poder encontrarlas después. Crea el directorio padre si falta.

mkdir -p ~/Documents/yuv-projects/landings
cd ~/Documents/yuv-projects/landings
# Construye <slug>/ aquí.

Ruta final: ~/Documents/yuv-projects/landings/<slug>/. Informa al usuario dónde se encuentra la página al final de cada construcción.

Flujo de trabajo (8 pasos)

  1. Analizar la fuente — ffprobe para duración, FPS, dimensiones, audio.
  2. Elegir número de fotogramas — predeterminado 80. Mínimo 40 (entrecortado si es menor), máximo 160 (página pesada). Elegir según la duración: ≤10s → 50, 10–30s → 80, 30–60s → 120, >60s → 160.
  3. Decidir directorio de salida — predeterminado ~/Documents/yuv-projects/landings/<slug>/. El <slug> es corto, derivado del nombre del video o del tema. Sobrescribir solo por solicitud explícita.
  4. Extraer fotogramas — ejecutar references/extract-frames.py <video-fuente> <directorio-salida> [cantidad]. Genera directorio-salida/frames/f_0001.jpg… con calidad JPG constante 82 y un ancho máximo de 1920 (redimensionado si la fuente es más grande).
  5. Copiar y personalizar references/landing-template.html en output-dir/index.html:
    • Reemplazar el marcador de posición __FRAMES__ con etiquetas <img> para cada fotograma (el script de construcción lo hace automáticamente al pasar --build-html).
    • Completar __HEADLINE__, __TAGLINE__, __CTA_TEXT__, __CTA_HREF__, secciones.
    • Para contenido en hebreo: establecer <html lang="he" dir="rtl"> y cambiar las fuentes a Rubik/Assistant (ver references/design-notes.md).
  6. Optimizar fotogramas — el script de construcción ya escala a un ancho máximo de 1920px. Si el peso total de la página supera los 12 MB, reducir la calidad a 75 o disminuir el número de fotogramas.
  7. Previsualizar — python -m http.server dentro del directorio de salida y abrir http://localhost:8000. El desplazamiento se siente suave en un equipo decente.
  8. Desplegar — colocar la carpeta en Vercel/Netlify/Cloudflare Pages. No se necesita paso de construcción.

El mecanismo de desplazamiento

  • El contenedor de desplazamiento exterior .scroll-stage tiene una altura en unidades de viewport (predeterminado 600vh = desplazamiento de 5 pantallas para recorrer todos los fotogramas).
  • Héroe fijo position: sticky; top: 0; height: 100vh que contiene todos los fotogramas posicionados de forma absoluta y ocultos excepto el activo.
  • El listener de desplazamiento calcula progress = scrolledIntoStage / scrollableHeight limitado entre 0 y 1.
  • idx = floor(progress * (N - 1)) — intercambia la clase .active a ese fotograma.
  • Envolver el listener en requestAnimationFrame para mantener 60fps.

Reglas de diseño

  • Usar el sistema de diseño del proyecto si se especifica, de lo contrario, predeterminar al sistema yuv-design-system: Anton + Inter (inglés) / Rubik + Assistant (hebreo), paleta Fly High púrpura (#5E17EB) + amarillo (#FFEC00) + gris (#F1F2F2), blanco roto (nunca #fff puro), radios 0px o 999px (sin esquinas de 8–12px). Editorial cálido (rosa+amarillo+crema) está reservado solo para la familia de marca Hope/bigcats.
  • Las superposiciones del héroe deben ser sutiles — una viñeta y un único titular grande; no ahogar el fotograma.
  • Secciones debajo del héroe: fondo crema, titular grande en Anton, texto del cuerpo en Inter a 18–22px, CTA como un rectángulo rosa afilado con texto en Anton.
  • Para hebreo: respetar RTL, usar Rubik 900 para titulares, Assistant 400/500 para el cuerpo.

Referencias de archivos

ArchivoPropósito
references/extract-frames.pyExtractor de fotogramas basado en ffmpeg; opcionalmente construye el HTML completo de una sola vez
references/landing-template.htmlEsqueleto de página de aterrizaje autónomo con el mecanismo de desplazamiento
references/design-notes.mdTipografía, paleta y valores predeterminados de movimiento

Individual skills in this repo

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

SamuelChien/mega-skills-collection

Security audit, hardening, threat modeling (STRIDE/PASTA), Red/Blue Team, OWASP checks, code review, incident response, and infrastructure security for any project.

SamuelChien/mega-skills-collection

Arquitecto de Soluciones Principal y Consultor Tecnológico de Andru.ia. Diagnostica y traza la hoja de ruta óptima para proyectos de IA en español.

SamuelChien/mega-skills-collection

Ingeniero de Sistemas de Andru.ia. Diseña, redacta y despliega nuevas habilidades (skills) dentro del repositorio siguiendo el Estándar de Diamante.

SamuelChien/mega-skills-collection

Estratega de Inteligencia de Dominio de Andru.ia. Analiza el nicho específico de un proyecto para inyectar conocimientos, regulaciones y estándares únicos del sector. Actívalo tras definir el nicho.

SamuelChien/mega-skills-collection

2D game development principles. Sprites, tilemaps, physics, camera.

SamuelChien/mega-skills-collection

3D game development principles. Rendering, shaders, physics, cameras.

SamuelChien/mega-skills-collection

Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences.

SamuelChien/mega-skills-collection

Accessibility audit skill for scanning, fixing, and verifying WCAG 2.2 Level A and AA compliance across React, Next.js, Vue, Angular, Svelte, and plain HTML codebases. Use when auditing accessibility, fixing a11y violations, checking color contrast, generating compliance reports, or integrating accessibility checks into CI/CD pipelines.

SamuelChien/mega-skills-collection

Ab Test Analyzer - Auto-activating skill for Data Analytics. Triggers on: ab test analyzer, ab test analyzer Part of the Data Analytics skill category.

SamuelChien/mega-skills-collection

A B Test Config Creator - Auto-activating skill for ML Deployment. Triggers on: a b test config creator, a b test config creator Part of the ML Deployment skill category.

SamuelChien/mega-skills-collection

When the user wants to plan, design, or implement an A/B test or experiment. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," "hypothesis," "conversion experiment," "statistical significance," or "test this." For tracking implementation, see analytics-tracking.

SamuelChien/mega-skills-collection

Acceptance Criteria Creator - Auto-activating skill for Enterprise Workflows. Triggers on: acceptance criteria creator, acceptance criteria creator Part of the Enterprise Workflows skill category.

SamuelChien/mega-skills-collection

Use when a coding task should be driven end-to-end from issue intake through implementation, review, deployment, and acceptance verification with minimal human re-intervention.

SamuelChien/mega-skills-collection

Accessibility Audit Runner - Auto-activating skill for Frontend Development. Triggers on: accessibility audit runner, accessibility audit runner Part of the Frontend Development skill category.

SamuelChien/mega-skills-collection

You are an accessibility expert specializing in WCAG compliance, inclusive design, and assistive technology compatibility. Conduct audits, identify barriers, and provide remediation guidance.

SamuelChien/mega-skills-collection

Web accessibility patterns for WCAG 2.2 compliance including ARIA, keyboard navigation, screen readers, and testing

SamuelChien/mega-skills-collection

Manage Discord channel access — approve pairings, edit allowlists, set DM/group policy. Use when the user asks to pair, approve someone, check who's allowed, or change policy for the Discord channel.

SamuelChien/mega-skills-collection

Create unified specification packages across Business, Development, and Design teams. Staged elaboration (L0 Vision → L1 Requirements → L2 Team Detail → L3 Acceptance Criteria) to build shared understanding. Does not write code.

SamuelChien/mega-skills-collection

Research a company or person and get actionable sales intel. Works standalone with web search, supercharged when you connect enrichment tools or your CRM. Trigger with "research [company]", "look up [person]", "intel on [prospect]", "who is [name] at [company]", or "tell me about [company]".

SamuelChien/mega-skills-collection

Validate messaging consistency across website, GitHub repos, and local documentation generating read-only discrepancy reports. Use when checking content alignment or finding mixed messaging. Trigger with phrases like "check consistency", "validate documentation", or "audit messaging".

Skills relacionados

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community