Community编程与开发github.com

HyperFrames Studio

YouTube videolarımda gösterdiğim Claude Code skill'lerinin toplandığı repo.

HyperFrames Studio 是什么?

HyperFrames Studio, bir AI asistanı (Claude Code, Cursor vb.) için tasarlanmış bir yetenek paketidir. Bu yetenek, kullanıcının tek bir isteğiyle üç farklı medya çıktısından birini üretir: yatay bir giriş videosu (hook), dikey bir kısa video (shorts) veya 16:9 bir slayt destesi (slidedeck). Tüm çıktılar, aynı motor, font, marka türetme formülü ve render ön ayarlarını paylaşır; yalnızca en boy oranı, altyazı varlığı ve çerçeveleme farklılık gösterir. Yetenek, önce kullanıcı girdisi veya bağlamdan çıktı modunu belirler, ardından ilgili hazır şablonu kopyalayıp özelleştirir. Manuel kompozisyon yazmak yerine otomatik bir iş akışı sunar. Masaüstü ortamlarında (Node.js, ffmpeg PATH'te olmalı) çalışır ve tüm marka varlıklarını yerel olarak barındırır (CDN bağımlılığı yok). Yetenek, her adımda tutarlılık ve kaliteyi sağlamak için katı kurallara sahiptir: karanlık tema, deterministik zaman çizelgesi, yerel yazı tipleri ve kullanıcı tarafından sağlanan transkriptler. Bu, hızlı prototipleme ve video/sunum üretimi için idealdir.

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add eyaprak/skills

Installed? Explore more 编程与开发 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

HyperFrames Studio 是做什么的?

Üç HyperFrames çıktısından birini üretiyorsun: yatay bir hook (intro), dikey bir shorts, ya da 16:9 bir slidedeck. Üçü de aynı motoru, fontları, brand-derivation formülünü ve render preset'ini paylaşır — sadece en-boy oranı, altyazı olup olmaması ve çerçeveleme değişir. Önce modu belirle, sonra paketteki hazır starter'ı kopyalayıp düzenle. Boş sayfadan kompozisyon yazma.

Motorun tamamı references/engine.md içinde; mod farkları references/{hook,shorts,slidedeck}.md içinde; transkripsiyon ve re-encode references/transcription.md içinde. Starter template'ler assets/templates/<mode>/ altında — nötr indigo placeholder paletiyle (--brand:#6366f1) çalışır durumda gelir; kullanıcının rengiyle yeniden renklendirilir.

Adım 0 — Modu belirle (Q0, ilk eşleşen kazanır)

  1. İstek/argümanlarda açık mod — mod:hook|shorts|slidedeck ya da net ifade (intro/hook → hook; shorts/dikey/reels → shorts; slidedeck/sunum/slide → slidedeck). Kilitle.
  2. Klasör adı — çalışılan/hedef klasör -hook / -shorts / -slidedeck ile bitiyorsa o mod.
  3. En-boy niyeti — "yatay giriş" → hook; "dikey" → shorts; "sunum/deck" → slidedeck.
  4. Hiçbiri değilse AskUserQuestion ile sor: "Ne üreteceğiz? Hook (yatay 16:9 intro) / Shorts (dikey 9:16) / Slidedeck (16:9 sunum)".

Mod belli olunca ilgili references/<mode>.md dosyasını oku ve onun adımlarını izle.

Standing rules — her koşuda baked-in, sorma, atlama

  1. Self-host fontlar — Manrope + JetBrains Mono, 4 lokal fonts/*.woff2, Türkçe unicode-range. Asla CDN/built-in font kullanma (Türkçe glyph'ler düşer). Her starter bunları + OFL.txt'yi taşır; fonts/'u kompozisyonla birlikte kopyala.
  2. Yalnız lokal assets/ — asla ../assets veya üst dizin yolu (preview/render üst dizine erişemez, medya boş çıkar).
  3. Koyu tema + tek marka rengi — near-black bg, near-white text; her aksan tek --brand'den türetilir (engine.md §4).
  4. Transkript kullanıcıdan gelir — hook/shorts'ta transkript kullanıcının girdisidir. İstekle birlikte yapıştırılmadıysa ve bu projenin kendi klasöründe bir transcript.txt yoksa, dur ve kullanıcıdan iste — kompozisyonu kurmadan, AskUserQuestion'a geçmeden önce. Başka bir klasörde/projede bulduğun transkripti bu klibe ait varsayma (aynı adı taşısa bile) ve kendiliğinden transcribe çalıştırma. Kullanıcı açıkça "sen çıkar" derse transcription.md'yi izle. Detay: transcription.md §Transkripti al.
  5. RAW klipleri önce re-encode et — node scripts/reencode.mjs <klip>.mp4 (yoğun keyframe); re-encode edilen -src.mp4'yi referansla, ham dosyayı değil (transcription.md).
  6. Deterministik timeline — gsap.timeline({paused:true}), window.__timelines["main"]=tl, literal-saniye position'lar; Math.random/Date.now/repeat:-1/setTimeout yok (engine.md §8, §11).
  7. Sponsor görünümü yok — sabit köşe logosu yok; marka işareti zamanlı bir animasyondur (ya da ops. ortalı topmark).
  8. Render yalnızca hook + shorts — bu iki modun teslimatı bir MP4'tür; preset (varsayılan, override edilebilir): 1080p · 60fps · 16 Mbps · quality high, pinned [email protected]. Slidedeck render EDİLMEZ ve render sorulmaz — deck'in teslimatı presentation/presentation.html'dir (kullanıcı açıkça video isterse istisna; kural: slidedeck.md).
  9. Tam kaynağı kapsa — data-duration = gerçek klip/içerik uzunluğu; hook/shorts'ta render sonrası ffprobe ile doğrula, deck'te süreyi N × slayt aritmetiğiyle teyit et.

Adım 1 — Gerçek seçimleri bir kez sor (AskUserQuestion, Türkçe)

Argümanlarla veya Adım 0 tespitiyle çözülen her soruyu düş. Sonra tek bir AskUserQuestion çağrısında ortak soruları o modun 2–3 özel sorusuyla birleştir (round-trip'i azalt). Option 1 daima önerilen/tespit edilen değerdir. Hiçbir soru kalmazsa çağrıyı atla ve çözülen değerleri tek satırlık Türkçe önsözde belirt.

Ortak sorular (her modda):

  • Renk (header "Renk") — Option 1 = tespit edilen hex "(önerilen)" varsa; yoksa nötr varsayılan. 2–3 nötr örnek palet + Other = özel hex. Tema Dark kalır.
  • Template kaynağı (header "Şablon") — "Paketteki hazır {mode} starter'ı kullan (önerilen)" · workspace'te algılanırsa "Kendi önceki -{mode} projemi klonla".

Moda özel sorular ilgili references/<mode>.md'den eklenir (hook: Demo/Logolar/Kapanış · shorts: Marka/Kapanış/Thumbnail · slidedeck: Slaytlar/Tempo).

Asla sorma: slidedeck modunda "render alayım mı / MP4 üreteyim mi / hangi çıktıları üreteyim". Deck bir HTML sunumdur; presentation/presentation.html her koşuda üretilir ve render gündeme gelmez.

Mutlaka sor: hook/shorts'ta transkript ortada yoksa (standing rule 4). Bu, AskUserQuestion'dan önce gelen düz bir istektir — "Bu klibin transkriptini [MM.SS - MM.SS] formatında paylaşır mısın?" — çünkü transkript olmadan caption {in,out}'ları, HOOK_END/CLOSE ve sahne sınırları uydurma olur.

Adım 2 — Kur (handoff)

  1. assets/templates/<mode>/ klasörünü hedef projeye kopyala (index.html, fonts/, hyperframes.json, meta.json, package.json, assets/; deck'te ayrıca presentation/ — daima, sormadan). meta.json/package.json adını güncelle.
  2. references/<mode>.md build adımlarını izleyerek index.html'i işle: medyayı bağla, data-duration'ı gerçek uzunluğa ayarla, paleti uygula, sahneleri/altyazıları/slaytları içerikle doldur.
  3. Doğrula: npx --yes [email protected] lint → inspect (deck'te ayrıca validate) → preview. Anahtar beat'lerde frame çıkarıp görsel QA yap (engine.md §11'deki tuzaklara dikkat: literal position, yorumda medya etiketi yok, WCAG false-positive, tek root composition).
  4. Teslim et — moda göre:
    • hook / shorts → render --quality high --fps 60 --video-bitrate 16M --output "renders/<ad>.mp4", sonra ffprobe -v error -show_entries format=duration -of default=nw=1:nk=1 renders/<ad>.mp4 ile süreyi teyit et; bir orta frame + audio stream'i kontrol et. Çıktı yolunu ve süreyi düz bildir.
    • slidedeck → render YOK. presentation/presentation.html'i teslim et, slidedeck.md'deki iki satırlık çıktı tablosunu ver ve index.html'in neden çift tıklanmadığını açıkla. Render'ı ne yap ne de öner.

İlk kullanım notları

  • Node.js + npx ve ffmpeg PATH'te gerekir. HyperFrames araç zinciri npx ile on-demand iner.
  • hyperframes transcribe ilk kullanımda whisper model'ini indirir (büyük, dakikalar); Türkçe için .en değil medium/large-v3 (transcription.md).
  • Fontlar SIL OFL 1.1 (fonts/OFL.txt); skill kodu MIT.
  • Motorun CLI/GSAP iç detayı için base hyperframes skill'ine defer et — burada tekrarlama.

相关技能