Communitygithub.com

Varnan-Tech/opendirectory

Elite-Fähigkeit für KI-Agenten zur Erstellung hochwertiger 'Product Launch Videos' mit Hyperframes. Unterstützt Marken-DNA-Extraktion, szenenweise Art Direction, Premium-Motion-Design (Apple-ähnliche Kameraführung, Glas-Effekte, Typewriter-Physik) und perfekte Sounddesign-Synchronisation. Verwende diese Fähigkeit, wenn ein Produkt-Launch-Video, ein Promo-Video oder eine hochwertige Feature-Ankündigung erstellt werden soll.

Was ist opendirectory?

Diese Fähigkeit befähigt KI-Agenten (wie Claude Code, Cursor oder Codex) als Regisseur und Architekt für die Erstellung hochwertiger Produkt-Launch-Videos mit Hyperframes zu fungieren. Sie ist speziell für Agenten auf Plattformen wie Vercel und Replit konzipiert, die eine strukturierte Arbeitsweise von der Markenanalyse bis zur finalen Verifikation erfordern. Der Agent führt den Nutzer durch einen mehrstufigen Prozess: Zuerst wird in der Interrogationsphase die Marken-DNA (Farben, Schriftarten, Logos) mittels Playwright-Website-Analyse und Benutzerabfragen extrahiert. In der Planungsphase wird basierend auf einer Vorlage eine detaillierte `ART_DIRECTION.md` mit Szenenaufteilung erstellt. Die Implementierung nutzt Premium-Motion-Design-Patterns wie Apple-ähnliche Makro-Zooms, Eraser-Reveal-Effekte, Clash/Shatter-Animationen mit GSAP, Glassmorphismus und Typewriter-Physik. Die Fähigkeit betont die Nutzung offizieller Hyperframes- und GSAP-Fähigkeiten für technische Korrektheit und aktuelle Framework-Muster. Ein zentrales Prinzip ist die zustandslose Projekterstellung: Alle Projektdateien werden im Zielverzeichnis des Nutzers abgelegt, während das Quellverzeichnis der Fähigkeit unverändert bleibt. Die Fähigkeit bietet zudem Anleitungen zur Sounddesign-Synchronisation mittels `<audio data-start>`-Tags und zur Fehlerbehebung (Critical Gotchas, FFmpeg).

Funktioniert mit~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/Varnan-Tech/opendirectory/tree/main/skills/hyperframes-product-launch-video

In Ihrer bevorzugten KI fragen

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

Dokumentation

Fähigkeit: Produkt-Launch-Video

Diese Fähigkeit führt dich durch die Erstellung hochwertiger, erstklassiger Produkt-Launch-Videos mit Hyperframes. Sie betont einen strukturierten Arbeitsablauf von der Markenfindung bis zur abschließenden Verifikation.

Nutzung der offiziellen Hyperframes-Fähigkeiten

Diese Fähigkeit fungiert als Regisseur und Architekt für dein Videoprojekt. Um technische Genauigkeit und Zugriff auf die neuesten Framework-Patterns zu gewährleisten, musst du sie in Verbindung mit den offiziellen Hyperframes-Fähigkeiten verwenden.

Bevor du Code schreibst, solltest du:

  1. Die offizielle /hyperframes-Fähigkeit aufrufen, um die Kompositionsregeln, Datenattribut-Semantik und Framework-Einschränkungen zu überprüfen.
  2. Die offizielle /gsap-Fähigkeit aufrufen, um detaillierte Timeline-Referenzen, Easing-Funktionen und komplexe Animationsmuster zu erhalten.

Durch die Kombination der strategischen Anleitung dieser Fähigkeit mit der technischen Dokumentation der offiziellen Fähigkeiten wirst du produktionsreife Videokompositionen erstellen.

Zustandslose Projekterstellung (KRITISCH)

Dieses Verzeichnis (hyperframes-product-launch-video) ist ein schreibgeschützter Vorlagen- und Fähigkeitsordner. Du darfst niemals projektspezifische Dateien hier speichern.

Wann immer du ein neues Videoprojekt erstellst:

  1. Zielverzeichnis: Alle Projektdateien müssen im Ziel-Videoprojektordner des Nutzers erstellt werden (z.B. mein-neues-video/ oder mein-neues-video/assets/).
  2. Projekt-DNA: Erzeuge die brand_dna.json innerhalb des Zielprojekt-assets/- oder -Wurzelordners.
  3. Art Direction: Speichere die endgültige ART_DIRECTION.md im Zielprojektordner.
  4. Keine Seiteneffekte: Ändere während eines Projektdurchlaufs keine Dateien innerhalb dieses Fähigkeitsordners.

Arbeitsablauf

1. Die Befragungsphase (Marken-DNA)

Bevor du beginnst, musst du die Marke verstehen.

  • Website-Analyse: Verwende Playwright, um die Website des Nutzers zu besuchen. Extrahiere Markenfarben, Typografie (Schriftarten) und Kernwertversprechen.
  • Asset-Anfrage: Bitte den Nutzer um Logos und Icons. Gib an, dass saubere, transparente, eng zugeschnittene PNGs oder SVGs benötigt werden.
  • Video-Typ-Auswahl: Frage, ob es sich um ein 100% Motion-Graphics-Video oder ein Hybridvideo handelt (z.B. Gründer spricht + Hyperframes Motion-Graphics).

2. Die Planungsphase (Art Direction)

Schreibe NIEMALS HTML vor der Planung.

  • Art Direction generieren: Erstelle ein ART_DIRECTION.md-Dokument basierend auf der Art-Direction-Vorlage.
  • Szenenaufteilung: Definiere jede Sekunde des Videos und gib visuelle Aktionen, Kamerabewegungen, Easing-Funktionen und Soundeffekte an.

3. Implementierung (Premium Motion Design)

Wende erstklassige Motion-Design-Prinzipien an. Siehe Motion-Design-Patterns für Code-Snippets.

  • Apple-ähnliche Kamera: Verwende massive Makro-Zooms und Snap-Zooms (back.out).
  • Eraser Reveal: Gestaffelte Text-Transparenz, die von einem gleitenden Logo „aufgefressen“ wird.
  • Clash/Shatter: Physikalische Aufpralleffekte mit GSAP Scatter.
  • Glassmorphismus: Hochwertige UI-Elemente mit backdrop-filter: blur(40px).
  • Typewriter-Physik: Hüpfende Spans, die den Cursor verschieben.

4. Sounddesign (SFX)

  • Einkaufsliste: Stelle dem Nutzer eine „Sounddesign-Einkaufsliste“ basierend auf dem Storyboard zur Verfügung.
  • Synchronisation: Verwende <audio data-start="...">-Tags, um die GSAP-Treffer perfekt zu synchronisieren.

5. Verifikation & Fehlerbehebung

  • Häufige Fehler: Überprüfe die kritischen Fallstricke, um häufige Hyperframes-Bugs zu vermeiden (Durationskonflikte, fehlende Ziele usw.).
  • FFmpeg: Falls das Rendern fehlschlägt, leite den Nutzer an, FFmpeg lokal zu installieren.

Best Practices

  • Atomare Szenen: Halte Szenen modular und streng durch data-start und data-duration verwaltet.
  • Sichtbarkeitsmanagement: Verwende autoAlpha für Szenenübergänge, um sauberes Suchen zu gewährleisten.
  • Layout vs. Transform: Verwende physische Abmessungen für Flexbox-Abstände und Transformationen für visuelle Effekte.

Individual skills in this repo

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

Varnan-Tech/opendirectory

Use when the user asks to generate a blog cover image, thumbnail, or article header. Automatically uses modern typography, brand logos, and Google Search grounding to create beautiful 16:9 images with Gemini 3.1 Flash Image Preview.

Varnan-Tech/opendirectory

World-class brand strategist and naming expert. Uses an interrogation-led discovery phase to extract your brand's DNA, then applies scientific naming frameworks (Phonosemantics) and automated multi-TLD domain checking.

Varnan-Tech/opendirectory

Use when the user asks to generate or update a project's CLAUDE or AGENTS context file from a codebase scan. Writes a focused file under 100 lines containing only the non-obvious build commands, conventions, and gotchas Claude Code needs.

Varnan-Tech/opendirectory

Use when the user wants to verify cold emails, enrich a lead list, or autonomously guess email addresses from a CSV using ValidEmail.co or the open-source Reacher engine.

Varnan-Tech/opendirectory

Competitive intelligence orchestrator tracking companies across 8+ platforms (GitHub, Twitter, Reddit, HN, PH, YC Jobs) with heat scores and AI briefings.

Varnan-Tech/opendirectory

Give it your product URL or description. It finds your top 5 competitors, runs three-track PR research across all of them (editorial, podcasts, communities), identifies which channels appear most frequently, looks up the journalist or host for each, and returns a tiered outreach list with story angles and ready-to-send cold pitch drafts tailored to your product. Use when asked to find PR opportunities, discover where competitors got featured, build a media outreach list, find which journalists cover my space, or get pitch templates for press coverage.

Varnan-Tech/opendirectory

Generate high-converting, deep-dive growth case studies in MDX format. Use this skill when asked to write a case study or blog post about a company's growth, tech stack, or product-led strategy. It handles the full pipeline (researching the company via Tavily, generating a 16:9 cover image, quality checking the draft, uploading assets to cloud storage, and pushing directly to the target repository).

Varnan-Tech/opendirectory

Scans your project for outdated npm, pip, Cargo, Go, or Ruby packages. Runs a CVE security audit. Fetches changelogs, summarizes breaking changes with Gemini, and opens one PR per risk group (patch, minor, major). Includes Diagnosis Mode for install conflicts. Use when asked to update dependencies, check for outdated packages, open dependency PRs, scan for package updates, audit for CVEs, or flag breaking changes in upgrades. Trigger when a user says "check for outdated packages", "update my dependencies", "open PRs for dependency updates", "scan for CVEs", or "which packages need upgrading".

Varnan-Tech/opendirectory

Generates and updates README.md and API reference docs by reading your codebase's functions, routes, types, schemas, and architecture. Uses graphify to build a knowledge graph first, then writes accurate docs from it. Use when asked to write docs, generate a README, document an API, update stale docs, create an API reference from code, add an architecture section, or document a project in any language. Trigger when a user says their docs are missing, outdated, or wants to document their codebase without writing it manually.

Varnan-Tech/opendirectory

Evaluates expired domain candidates against a target niche, scores them by topical relevance, historical activity level, and history cleanliness, then outputs a ranked shortlist with explainable reasoning and risk flags.

Varnan-Tech/opendirectory

Brutally honest developer-experience audit for a GitHub repo. Scores 10 DX dimensions (time-to-first-success, README clarity, visual proof, install, quick-start, docs, examples, community, trust, marketing), writes a shareable roast in the requested tone (brutal/honest/kind), produces a prioritized action plan ranked by impact × effort, and sketches an ideal README. Trigger when user says "roast my repo", "audit my README", "dx audit", "developer experience review", "score my GitHub project", "before launch checklist", or "make my repo shareable".

Varnan-Tech/opendirectory

Drafts and designs a complete HTML email newsletter from a topic or content brief. Outputs paste-ready HTML for Loops, Mailchimp, Beehiiv, Resend, or any standard email platform. Includes subject line options and plain-text fallback. Trigger when a user says "write a newsletter", "draft an email newsletter", "create an HTML email", "design an email for my subscribers", or "write a newsletter about [topic]".

Varnan-Tech/opendirectory

Takes a GitHub PR URL or the current branch and writes a plain-English explanation of what it does and why, then posts it as a PR comment. Use when asked to explain a PR, summarize a pull request, write a plain-English description of a PR, add a summary comment to a PR, or understand what a PR changes. Trigger when a user says "explain this PR", "summarize this pull request", "what does this PR do", "add a comment explaining the PR", or shares a GitHub PR URL and asks what it does.

Varnan-Tech/opendirectory

Audit how often LLMs recommend your brand vs competitors and generate a GEO action plan.

Varnan-Tech/opendirectory

Takes a competitor's public GitHub repo URL, fetches their open issues via the GitHub REST API, filters noise locally, clusters issues into 6 demand categories, computes a demand score per issue and per cluster, and outputs a ranked demand gap report with a GTM messaging brief. Use when asked to scan a competitor's GitHub issues, find what their users are begging for, turn GitHub complaints into product positioning, identify competitor feature gaps, or generate messaging from real user demand. Trigger when a user says "scan competitor issues", "what are users asking for on X repo", "find demand gaps in Y", "turn GitHub issues into messaging", or "what should I build based on competitor complaints".

Varnan-Tech/opendirectory

Find recurring confusion in your repo's GitHub Discussions, rank it by urgency, and draft the actual docs fixes and content angles — with verbatim community quotes and source links as evidence.

Varnan-Tech/opendirectory

SEO keyword research workflow for blog generation using Google Trends data. Use when writing blog posts, planning content calendars, or optimizing articles for search engines. Finds breakout keywords, builds content structure, and generates SEO-optimized blog outlines targeting tech and developer audiences.

Varnan-Tech/opendirectory

Generates a professionally designed case study PDF for B2B SaaS sales and marketing. Supports 7 page layouts, 9 style presets, 1-4 page output. Trigger when user says "create a case study", "write a customer story", "make a case study PDF", "design a success story", "turn this customer win into a PDF".

Varnan-Tech/opendirectory

Generates data visualization charts (bar, line, area, pie, doughnut, scatter, radar, treemap) as PNG using Apache ECharts v6. 1080×1080px default, 5 style presets, highlight annotations. Trigger when user says "create a chart", "visualize data", "make a bar chart", "line graph", "pie chart", "data visualization", "chart this data", "plot", "graph", or "visualize these numbers".

Varnan-Tech/opendirectory

Fetches low-star App Store and Google Play reviews, clusters them into broken-promise patterns, and generates a ranked copy brief with positioning opportunities.

Verwandte Skills