Communitygithub.com

SamuelChien/mega-skills-collection

Verwandle jedes Video in eine kinematische, scroll-basierte Landing Page im Apple-Stil – der Heldbereich blättert beim Scrollen durch die Einzelbilder des Videos.

Was ist mega-skills-collection?

Dieses Skill erstellt aus einem bereitgestellten Video eine vollständige, scroll-gesteuerte Landing Page, ähnlich den Produktseiten von Apple oder der GitHub Copilot-Startseite. Es extrahiert eine konfigurierbare Anzahl gleichmäßig verteilter Einzelbilder (Standard 80) mit ffmpeg und generiert eine eigenständige HTML-Datei. Die Seite verwendet einen klebrigen Hero-Bereich, der durch einen JavaScript-Scroll-Listener die aktiven Einzelbilder austauscht, während der Benutzer scrollt. Darunter befinden sich normale Abschnitte mit Überschrift, Text und Call-to-Action. Das Skill unterstützt Englisch und Hebräisch (RTL) mit entsprechenden Schriftarten und folgt den Designvorgaben des yuv-design-system-Skills (Anton/Inter für Englisch, Rubik/Assistant für Hebräisch, Fly High Purple-Farbpalette). Die Ausgabe ist ein einzelner Ordner mit `index.html` und einem `frames/`-Verzeichnis, der auf jedem statischen Host wie Vercel, Netlify oder Cloudflare Pages ohne Build-Schritt bereitgestellt werden kann. Der Standard-Speicherort ist `~/Documents/yuv-projects/landings/<slug>/`.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/SamuelChien/mega-skills-collection/tree/HEAD/video-to-landing-page
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Video → Scroll-basierte Landing Page

Erstelle eine kinematische Landing Page, bei der der Hero-Bereich ein Video ist, das beim Scrollen abgespielt wird – ähnlich wie Apple-Produktseiten oder die GitHub Copilot-Landingpage. Die Einzelbilder werden aus dem Quellvideo extrahiert und beim Scrollen ausgetauscht; unterhalb des klebrigen Hero-Bereichs folgen normal scrollbare Abschnitte mit Text und Call-to-Action.

Wann aufrufen

  • Benutzer lädt ein Video hoch und bittet um eine Landing Page, Scroll-Website, Scroll-Frame-Hero oder Website aus einem Video
  • Erwähnungen von "Apple-Style Scroll", "GitHub Copilot Landing", "Scrub-on-Scroll", "Frame on Scroll"
  • Hebräische Entsprechungen: "דף נחיתה מסרטון", "אתר עם גלילה", "סרטון בגלילה"

Speicherort

Standard: ~/Documents/yuv-projects/landings/<slug>/ – speichere Landing Pages immer hier ab, damit du sie wiederfindest. Erstelle das übergeordnete Verzeichnis, falls es fehlt.

mkdir -p ~/Documents/yuv-projects/landings
cd ~/Documents/yuv-projects/landings
# Erstelle <slug>/ hier.

Endgültiger Pfad: ~/Documents/yuv-projects/landings/<slug>/. Teile dem Benutzer am Ende jedes Builds mit, wo die Landing Page liegt.

Workflow (8 Schritte)

  1. Quelle analysieren – ffprobe für Dauer, Bildrate, Abmessungen, Audio.
  2. Anzahl der Einzelbilder festlegen – Standard 80. Minimum 40 (ruckelig darunter), Maximum 160 (schwere Seite). Wähle nach Dauer: ≤10s → 50, 10–30s → 80, 30–60s → 120, >60s → 160.
  3. Ausgabeverzeichnis festlegen – Standard ~/Documents/yuv-projects/landings/<slug>/. Der <slug> ist kurz und leitet sich vom Videotitel oder Thema ab. Überschreibe nur auf ausdrücklichen Wunsch.
  4. Einzelbilder extrahieren – führe references/extract-frames.py <source-video> <output-dir> [count] aus. Ausgabe: output-dir/frames/f_0001.jpg … mit gleichbleibender JPG-Qualität 82 und einer maximalen Breite von 1920 (skaliert herunter, wenn das Quellmaterial größer ist).
  5. Kopieren und anpassen von references/landing-template.html in output-dir/index.html:
    • Ersetze den Platzhalter __FRAMES__ durch <img>-Tags für jedes Einzelbild (das Build-Skript erledigt dies automatisch, wenn du --build-html übergibst).
    • Fülle __HEADLINE__, __TAGLINE__, __CTA_TEXT__, __CTA_HREF__ und Abschnitte aus.
    • Für hebräischen Inhalt: setze <html lang="he" dir="rtl"> und tausche die Schriftarten auf Rubik/Assistant (siehe references/design-notes.md).
  6. Einzelbilder optimieren – das Build-Skript skaliert bereits auf maximal 1920px Breite. Wenn das Gesamtgewicht der Seite > 12 MB beträgt, reduziere die Qualität auf 75 oder verringere die Anzahl der Einzelbilder.
  7. Vorschau – python -m http.server innerhalb des Ausgabeverzeichnisses und öffne http://localhost:8000. Das Scroll-Gefühl ist auf einem anständigen Rechner flüssig.
  8. Bereitstellen – lege den Ordner auf Vercel/Netlify/Cloudflare Pages ab. Kein Build-Schritt erforderlich.

Der Scroll-Mechanismus

  • Äußerer Scroller .scroll-stage Höhe in Viewport-Einheiten (Standard 600vh = 5 Bildschirme scrollen, um alle Einzelbilder zu durchlaufen).
  • Klebriger Hero-Bereich position: sticky; top: 0; height: 100vh enthält alle Einzelbilder absolut positioniert und ausgeblendet, außer dem aktiven.
  • Scroll-Listener berechnet progress = scrolledIntoStage / scrollableHeight begrenzt auf 0–1.
  • idx = floor(progress * (N - 1)) – wechsle die .active-Klasse zu diesem Einzelbild.
  • Ummantle den Listener mit requestAnimationFrame, um 60fps zu halten.

Designregeln

  • Verwende das Projektdesignsystem, falls angegeben, ansonsten standardmäßig das yuv-design-system-Skill: Anton + Inter (Englisch) / Rubik + Assistant (Hebräisch), Fly High Purple (#5E17EB) + Gelb (#FFEC00) + Grau (#F1F2F2)-Palette, Off-White (nie reines #fff), 0px oder 999px Radien (keine 8–12px Ecken). Warm Editorial (Pink+Gelb+Beige) ist nur für die Hope/bigcats-Markenfamilie reserviert.
  • Hero-Overlays sollten dezent sein – eine Vignette und eine einzelne große Überschrift; überlade das Einzelbild nicht.
  • Abschnitte unterhalb des Heroes: beiger Hintergrund, große Anton-Überschrift, Fließtext in Inter bei 18–22px, CTA als scharfes pinkfarbenes Rechteck mit Anton-Text.
  • Für Hebräisch: RTL beachten, Rubik 900 für Überschriften, Assistant 400/500 für Fließtext.

Dateireferenzen

DateiZweck
references/extract-frames.pyffmpeg-basierter Frame-Extraktor; erstellt optional das vollständige HTML in einem Durchgang
references/landing-template.htmlEigenständiges Landing-Page-Grundgerüst mit dem Scroll-Mechanismus
references/design-notes.mdTypografie-, Farb- und Bewegungsvorgaben

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".

Verwandte Skills

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