Communitygithub.com

AlessandroFare/fluxychat

Verwenden, wenn in einer HyperFrames-Komposition platziertes Audio gemischt werden muss: eine Musikuntermalung, die mit einer Sprachaufnahme konkurriert (Voiceover-Carve), Effekte auf einer Spur (EQ, Kompressor, Limiter, Gate, Sättigung, Delay, Reverb, Chorus, Phaser, Bitcrush) oder Automationshüllkurven auf der Lautstärke einer Spur oder einem beliebigen Effektparameter. Nicht verwenden für die Beschaffung oder Erzeugung von Audio – das Finden von BGM, SFX oder das Erstellen einer Sprachaufnahme fällt unter `/media-use`. Nicht verwenden für Clip-Timing oder Spuren-Layout, das fällt unter `/hyperframes-core`.

Was ist fluxychat?

Die Fertigkeit „HyperFrames Audio“ ist ein leistungsstarkes Werkzeug zum Mischen von Audio innerhalb von HyperFrames-Kompositionen, das sich auf die Beziehungen zwischen Audiospuren konzentriert, nicht nur auf die Verarbeitung einzelner Spuren. Sie bietet eine umfassende Suite von Audioeffekten (EQ, Kompressor, Dynamik, Nichtlineare und Zeit-basierte Effekte) und eine hochentwickelte Funktion namens „Voiceover Carve“, bei der ein Musikbett dynamisch in den Frequenzbändern abgesenkt wird, die eine Sprachaufnahme belegt, anstatt das gesamte Bett leiser zu drehen. Die Fertigkeit nutzt Web Audio API, wobei Echtzeit-Vorschau und Offline-Rendering die exakt gleiche Implementierung verwenden, sodass das, was beim Scrubbing gehört wird, auch im finalen Render zu hören ist. Die Steuerung erfolgt über Datenattribute (`data-fx-chain`, `data-automation`, `data-fx-carve`) auf den Audio/Video-Elementen, die sowohl über eine Studio-Oberfläche als auch über Headless-Skripte geschrieben werden können.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/AlessandroFare/fluxychat/tree/HEAD/agent/skills/hyperframes-audio

In Ihrer bevorzugten KI fragen

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

Dokumentation

HyperFrames Audio

Ein Mix ist eine Menge von Beziehungen, kein Stapel von Prozessoren. Zwei Spuren, die für sich allein richtig klingen, können zusammen unhörbar sein, und die Lösung ist fast nie „eine leiser drehen“ – es geht darum, herauszufinden, worüber sie streiten, und es demjenigen zu geben, der es braucht. Jedes Werkzeug hier existiert, um eine dieser Beziehungen auszudrücken.

Effekte leben auf dem Element als data-fx-chain, und Vorschau und Rendering nutzen denselben Web Audio Graphen – das Studio in einem Live-Kontext, die Engine in einem Offline-Kontext im Browser, den sie bereits steuert. Es gibt eine Implementierung jedes Effekts, also ist das, was Sie beim Scrubbing hören, das, was geschrieben wird. Sie stimmen nie zweimal ab.

Drei Attribute tragen alles, alle auf dem Audio/Video-Element selbst:

AttributEnthält
data-fx-chaindie Effekte, in Signalreihenfolge
data-automationHüllkurven auf der Lautstärke dieser Spur oder ihren Effektparametern
data-fx-carvedie eigenen Einstellungen des Carves, damit es neu abgeleitet werden kann

Exaktes JSON für jedes sowie die Regeln, die eine Spur erfüllen muss: references/attributes.md. Jeder Effekt mit seinen Parametern, Bereichen und Einheiten: references/fx-registry.md. Wie man herausfindet, was mit einer Datei, die man nicht hören kann, falsch ist: references/diagnosis.md. Voreinstellungen, benannte Aufgaben und Ein-Knopf-Profile, plus eine Tabelle von Symptom zu Lösung: references/presets.md – lesen Sie das, bevor Sie eine Kette von Hand bauen, denn eine der Voreinstellungen oder benannten Aufgaben benennt normalerweise bereits das Problem.

Wie es zusammenpasst

Zwei Autorenoberflächen schreiben diese Attribute; zwei Laufzeitumgebungen lesen sie über die gleichen Builder. Diese gemeinsame Mitte ist der Grund, warum die Vorschau das Rendering vorhersagt.

flowchart TB
  voice["Sprachspur<br/>Mediendatei"]
  bed["Musikbett<br/>Mediendatei"]

  subgraph AUTHOR["Autorenwerkzeuge – die einzigen, die Attribute schreiben"]
    panel["Studio<br/>Voiceover-Carve-Steuerung"]
    script["scripts/carve.mjs<br/>erkennt das Paar, standardmäßig dynamisch"]
    analysis["core/audioCarve.ts<br/>carveProfile · analyseCarveBands<br/>analyseCarveDuck · analyseCarveDynamics"]
    panel --> analysis
    script --> analysis
  end

  voice --> analysis
  bed --> analysis

  subgraph ATTRS["Auf das Bettelement geschrieben"]
    carveAttr["data-fx-carve<br/>Quelle · Stärke · Dynamik"]
    chainAttr["data-fx-chain<br/>peaking xN + gain, getaggt mit fromCarve"]
    autoAttr["data-automation<br/>eine Spur pro gemeißeltem Parameter"]
  end

  analysis --> carveAttr
  analysis --> chainAttr
  analysis --> autoAttr

  subgraph SHARED["Eine Implementierung, von beiden gelesen"]
    build["audioFxGraph.ts · buildFxChain"]
    sched["audioFxAutomation.ts · scheduleChainAutomation"]
  end

  chainAttr --> build
  autoAttr --> sched

  build --> preview["Vorschau<br/>Live AudioContext<br/>attachElementFxChain"]
  sched --> preview
  build --> render["Rendering<br/>OfflineAudioContext im kopflosen Browser<br/>applyAudioFxChain"]
  sched --> render

  preview --> heard["was Sie beim Scrubbing hören"]
  render --> wav["verarbeitetes WAV<br/>+ chainTailSeconds, damit der Mix den Nachklang durchlässt"]
  wav --> mix["Engine · audioMixer<br/>Lautstärkespur hier ins PCM eingebacken, nicht im Graphen"]
  mix --> out["der gerenderte Mix"]

  edit["Bearbeiten des Attributs während der Wiedergabe"] -.->|MutationObserver| preview

Die eigenen Einstellungen des Carves werden niemals zur Wiedergabe gelesen – die von ihm produzierte Kette und Spuren werden abgespielt. data-fx-carve existiert, damit die Stärke auf einem vorhandenen Carve geändert werden kann, anstatt sie aus den Filtern zurückraten zu müssen.

Innerhalb eines gecarvten Bettes durchläuft das Signal zuerst die Absenkungen, dann den Lautstärkeabgleich, dann alles, was Sie selbst gebaut haben – weshalb ein von Ihnen hinzugefügter Limiter immer noch als letzte Decke fungiert:

flowchart LR
  src["decodiertes Bett"] --> p1["peaking<br/>400 Hz"]
  p1 --> p2["peaking<br/>1 kHz"]
  p2 --> p3["peaking<br/>1.6 kHz"]
  p3 --> g["gain<br/>level match"]
  g --> hand["Ihre eigenen Effekte<br/>z.B. Limiter"]
  hand --> dest["Spurenverstärkung, dann raus"]

  l1["Spur fx.n1.gain"] -.->|"Hüllkurve des<br/>Sprachpegels in diesem Band"| p1
  l4["Spur fx.n4.gain"] -.->|"wie stark das Bett<br/>insgesamt duckt"| g

Ein statischer Carve ist derselbe Graph mit festen Werten und überhaupt keinen Spuren.

Zuerst herausfinden, was falsch ist

Die folgende Tabelle beginnt mit „es klingt dröhnend“ – was voraussetzt, dass jemand bereits zugehört und das gesagt hat. Wenn Sie eine Datei und „behebe das“ bekommen, haben Sie keinen solchen Satz und können nicht zuhören, also müssen Sie messen. Eine Regel gilt für alles:

Das absolute Spektrum einer einzelnen unbekannten Stimme kann nicht diagnostiziert werden. Formanten sind ±10 dB, Grundfrequenzen liegen bei 85–255 Hz, und Sätze fallen um 5–6 dB ab, wenn sie enden. Jeder einzelne dieser Werte liest sich isoliert als Defekt, und jeder einzelne von ihnen kommt vom Sprecher.

Vergleichen Sie also, und vergleichen Sie mit etwas innerhalb derselben Datei: dem sauberen Original, falls vorhanden, ansonsten den Pausen – alles, was in einer Lücke hörbar ist, ist additiv, und das Spektrum der Lücke ist der Kanal, nicht die Stimme. Der Vergleich mit einem veröffentlichten Durchschnittsspektrum oder einer synthetisierten Kontrollstimme funktioniert nicht: Zwei Sprecher unterscheiden sich mehr als die meisten Defekte, und beide falschen Antworten in der Evaluation hinter dieser Anleitung stammen genau daher.

Wenn es kein Original und keine nutzbare Stille gibt, ist ein statischer tonaler Defekt tatsächlich unterbestimmt. Sagen Sie das und bieten Sie die Messwerte an, die passen, statt einen auszuwählen und eine Kette darauf aufzubauen.

Befehle, Fallstricke und erprobte Rezepte: references/diagnosis.md. Lesen Sie es, bevor Sie eine Datei diagnostizieren, die niemand beschrieben hat.

Vom Symptom ausgehen

Sobald Sie das Band und die Art kennen, benennen Sie, was mit dem Audio falsch ist. Die meisten schlechten Audios sind eines oder zwei dieser Probleme, und jedes hat eine ausgelieferte Antwort:

Es klingt wieGreifen Sie zu
Brummen oder dumpfes Dröhnen darunterrumble-cut oder ein highpass bei 80 Hz
Dröhnend, vollDröhnen zähmen Aufgabe (200 Hz)
Gedämpft, wie hinter PappeMatsch reduzieren Aufgabe (250 Hz)
Wörter schwer zu verstehenKlarheit hinzufügen Aufgabe (3 kHz), oder das Bett carven
Schrill und ermüdendHärte mildern Aufgabe (3,2 kHz)
Manche Wörter viel lauter als andereGleichmäßigkeit mit einem Kompressor oder Pegel ausgleichen
Raumton zwischen den Sätzenroom-gate
Stimme und Musik kämpfenVoiceover-Carve – kein EQ für eine der beiden
Trocken, wie nirgendwo aufgenommenroom-tight oder room-natural
Einfach „Amateur“voice-clean, das vier der obigen in Reihenfolge ist

Vollständiger Katalog, was jede Voreinstellung enthält, das Bandvokabular und was bewusst NICHT abgedeckt wird (De-Essing, Rauschentfernung, Tonabgleich): references/presets.md.

Subtrahieren Sie, bevor Sie hinzufügen, pegeln Sie nach dem Filtern, Beziehungen nach dem Pegeln, Charakter und Decke zuletzt. Jeder Schritt ändert, was der nächste hört – ein Kompressor, der vor einem Hochpass eingestellt wird, verbringt seine Zeit damit, Dröhnen zu jagen.

Greifen Sie nach einer Familie basierend auf dem Problem, nicht dem Namen

Filter (highpass, lowpass, peaking, lowshelf, highshelf) bestimmen, welche Frequenzen eine Spur belegen darf. Dies ist das erste Werkzeug für den Zusammenstoß zweier Quellen, da Kollisionen in Bändern stattfinden: Ein Bett und eine Stimme wollen beide 1–3 kHz, und dies dem Bett zu nehmen, kostet das Bett weit weniger, als das Ganze leiser zu drehen den Mix kostet. Ein Hochpass auf einer Stimme ist die Standardlösung für Dröhnen; ein Tiefpass verdunkelt oder dämpft absichtlich.

Dynamik (gain, compressor, limiter, gate) bestimmt, wie sich der Pegel einer Spur im Laufe der Zeit verhält. Kompression verringert den Abstand zwischen laut und leise, damit die leisen Teile angehoben werden können. Ein Limiter ist eine Decke – er formt nichts, er garantiert, dass nichts darüber hinausgeht. Ein Gate entfernt, was unter einem Schwellwert liegt – so schalten Sie Raumton zwischen Phrasen stumm. gain ist eine einfache Verstärkungsstufe, und sie wird von einer Automationsspur gesteuert, wenn sich eine Spur aus dem Weg bewegen muss.

Nichtlinear (saturate, bitcrush) ändert die Wellenform, wodurch Oberschwingungen hinzugefügt werden, die vorher nicht da waren. Greifen Sie danach, wenn eine Spur Charakter oder Körnung braucht, anstatt Korrektur – und denken Sie daran, dass es generativ ist: Es macht eine dünne Quelle dichter, nicht sauberer.

Zeit (delay, reverb, chorus, phaser) versetzt eine Spur in einen Raum oder gibt ihr Breite. Diese sind diejenigen, die am leichtesten einen Mix ruinieren, weil ein Nachklang oder eine verstimmte Kopie denselben Raum belegt, den eine Stimme braucht. Verwenden Sie sie auf dem, was hinter etwas anderem sitzen soll, und halten Sie den Nassanteil niedriger, als es isoliert richtig klingt.

Die Kette ist seriell: Jeder Effekt verarbeitet das, was der vorherige produziert hat. Also kommt die korrigierende Filterung früh, der Charakter in der Mitte und ein Limiter zuletzt, wo er tatsächlich als Decke wirken kann.

Voiceover-Carve

Das Problem, das es löst. Ein Musikbett unter einer Stimme macht die Stimme schwer verständlich. Der Reflex ist, das ganze Bett zu ducken, was funktioniert und dem Bett alle Präsenz nimmt – die Musik wird für die gesamte Sprachaufnahme schlaff. Aber die Stimme braucht nicht das gesamte Spektrum. Sie braucht die wenigen Bänder, die sie tatsächlich belegt. Der Carve nimmt nur diese, und das Bett behält seine Tiefe und seine Höhen, sodass es immer noch Musik ist, während die Stimme immer noch verständlich bleibt.

Es ist eine Beziehung, kein Effekt. Die Einstellungen leben auf dem Bett – der Spur, die verarbeitet wird – und sie benennen die Stimmen, auf die gehört werden soll, genau wie ein Sidechain-Kompressor: Sie wählen die Spur, die leiser wird, und bestimmen, was sie leiser macht. Setzen Sie niemals einen Carve auf eine Sprachspur. Eine Stimme, die gegen sich selbst gecarvt wird, ist ein Fehler, keine subtile Mix-Entscheidung.

Jede Stimme, nicht nur eine. sources ist eine Liste, weil ein Bett normalerweise unter einer ganzen Sequenz läuft – einem Sprecher, einer Interviewantwort, einem zweiten Moderator. Sie werden auf der eigenen Uhr des Bettes summiert, bevor etwas gemessen wird (mixCarveSources), also deckt eine Analyse alle ab: Die Bänder stammen von der gesamten Sprache, und die Hüllkurven steigen immer dann an, wenn etwas davon passiert. Stimmen, die nie spielen, während das Bett läuft, werden weggelassen; sie können es nicht überdecken.

Ein Drehknopf. strength ist 0..1 und leitet alles ab: wie tief geschnitten wird, wie viele Bänder, wie breit, wie sehr die Verständlichkeit gegenüber der reinen Sprachleistung bevorzugt wird, wie weit der Pegel fallen darf, wie weit unter der Stimme das Ziel liegt. Diese sechs bewegen sich in jedem echten Mix gemeinsam – ein sanfter Carve ist ein flacher Schnitt in wenigen Bändern mit wenig Ducking, ein harter ist tiefer in mehr Bändern mit mehr – also sind sie eine Beziehung, die einmal geschrieben wird, in carveProfile. Standard ist 0.25 – eine 6 dB Absenkung in drei Bändern mit 6 dB Pegelspielraum, hörbar, ohne wie ein Loch zu klingen. Bei 0,5 erreicht die Absenkung 10 dB, wo ein Carve als Effekt wahrgenommen wird, nicht als Raum für die Stimme; darüber ist absichtliches Terrain für ein lautes Bett unter einer leisen Stimme. 0 ist spektral nur – ein Band, gar kein Pegelabgleich.

Standardmäßig Carven. Ein Bett, das unter einer Erzählung läuft, möchte einen Carve; es ist kein optionaler Feinschliff, wenn Zeit ist. Platzieren Sie beide Spuren, führen Sie den untenstehenden Befehl aus, hören Sie zu. Überspringen Sie es nur, wenn es keine Erzählung gibt, unter die die Musik gelegt werden soll – ein Musikvideo, ein Titelbild, ein Montageschnitt zum Track.

Es folgt immer der Stimme. Es gibt keinen statischen Modus: Eine feste Tiefe verdünnt das Bett durch jede Pause, und sobald man beide gehört hat, gibt es keinen Grund, es zu wollen. Jeder Wert wird zu einer Hüllkurve des eigenen Sprachpegels – Stille lässt das Bett in Ruhe, eine laute Passage drückt den Carve auf volle Tiefe – als normale Automation geschrieben, weshalb die Spuren in der Zeitleiste erscheinen und nachträglich bearbeitet werden können.

Pegelabgleich ist Teil davon. Spektrales Carven kann ein Bett, das einfach lauter als die Stimme ist, nicht reparieren. Also misst der Carve auch, wie weit über der Stimme das Bett sitzt und schreibt eine gain-Stufe: für einen statischen Carve auf einem Wert gehalten, für einen dynamischen von einer Hüllkurve gesteuert. Diese Hüllkurve lässt bewusst langsam nach – Musik, die sofort nach dem Ende eines Wortes wieder voll aufdreht, klingt wie eine Maschine, die es tut.

Ausführung. Im Studio ist der Carve ein Modul oben im Effekt-Rack einer Spur – Stimme, Stärke, Dynamik und die von ihm erstellte Analyse, in einer Karte. Es ist immer da, wenn eine andere Spur die Stimme sein könnte, und ein Bett mit genau einem Kandidaten darüber wird standardmäßig dynamisch mit der Standardstärke gecarvt: Das ist, was ein Bett unter einer Erzählung will, und das Modul ist der Ort, an dem Sie es ändern oder ausschalten. Mehrere Kandidaten lassen den Auswähler warten, anstatt zu raten. Kopflos – welches der Pfad ist, wenn Sie eine Komposition erstellen, anstatt sie zu bearbeiten:

node <SKILL_DIR>/scripts/carve.mjs --comp index.html

Das ist der gesamte Befehl. Er findet die Stimme und das Bett selbst, carvt dynamisch mit der Standardstärke und gibt aus, was er entschieden hat:

bed    music-bed (Name sieht nach Musik aus)
voice  narration (einzige verbleibende Spur)
carve  strength 0.25 dynamic
bands  400Hz -6dB q1.4, 1000Hz -3dB q1.4, 1600Hz -3.17dB q1.4
level  216-Punkt-Hüllkurve, Boden -6 dB

Benennen Sie die Spuren mit --bed / --voice (wiederholbar), wenn die automatische Wahl falsch ist, --strength zum Verstärken, --dry-run zum Anzeigen dieses Berichts, ohne etwas zu schreiben.

Wie es die Spuren auswählt. Zuerst Namen, denn das haben Sie ihm bereits gesagt, und die Antwort ist erklärbar – classifyAudioName in core, derselbe Klassifizierer, den auch Studio-eigene Auswähler verwenden, also können die beiden nicht unterschiedlicher Meinung sein. Eine Spur, deren ID oder Dateiname nach Musik aussieht (music, bgm, bed, score…), ist das Bett; alles andere, was darüber spielt und nicht SFX-förmig ist, ist eine Stimme. Audioelemente werden bevorzugt: Video zählt nur, wenn keine Audiospur mehr übrig ist, um die Stimme zu sein, oder jeder B-Roll-Clip in der Komposition als sprechende Person gelesen würde. Es verweigert, wenn es kann...

Individual skills in this repo

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

AlessandroFare/fluxychat

Add captions or subtitles to an existing single-subject talking-head video without editing the footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX captions, “炸/特效/酷炫字幕,” or a named identity from the 35-style catalog. Route by visual identity, not by backend engine. The quiet `anchor` rail is the default; embed every word only when the user explicitly wants a fully cinematic treatment. The workflow runs locally end to end, including transcription and subject matting; split multi-shot footage before applying it.\n

AlessandroFare/fluxychat

Use the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, cloudrun, feedback, lambda, doctor, browser, info, upgrade, skills, compositions, docs, benchmark, telemetry, transcribe, auth, tts, and remove-background. Also use when diagnosing build or render failures. validate, inspect, and layout are deprecated aliases; use check. Covers local, HeyGen-hosted cloud, AWS Lambda, and Google Cloud Run rendering.\n

AlessandroFare/fluxychat

Install, discover, and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block sub-composition wiring, component snippet merging, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

AlessandroFare/fluxychat

Mandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a promo, explainer, captioned clip, title card, overlay, slideshow or interactive deck, Remotion port, or any HyperFrames HTML composition. Also use it to inspect, diagnose, validate, preview, publish, or batch-render an existing HyperFrames project. Inputs may be a website URL, GitHub PR, Figma design or URL, text or brief, existing footage, or music. It resumes project state, captures intent when applicable, selects and installs the owning workflow, and routes domain capabilities. HyperFrames is the default output framework unless the user explicitly chooses another framework for the deliverable or asks only to record a browser session.\n

AlessandroFare/fluxychat

Overlay doctrine for the embedded-captions workflow — the caption MODEL (drop / rail / embed) and the rule that captions are an OVERLAY composited on top of the film, never a reserved bottom band you shift content up to avoid. Load when adding captions/subtitles to a talking-head or launch video, when deciding whether a phrase should be dropped, ride the verbatim rail, or be promoted to a scarce embedded climax, when laying out a composition that will carry captions (do NOT reserve a keep-out band), or when centering a composition on the true frame center under captions. Quotes the rail+embed model from embedded-captions and constraint #13 (captions overlay, keep-out band retired) from the product-launch-video scene agent. Applies ON TOP of embedded-captions.

AlessandroFare/fluxychat

Turn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand background, mock-UI visualizations, lowkey captions). Use when the user provides a changelog/digest markdown and wants the weekly video, or says "changelog video". Self-contained — fonts, background, lexicon, and scripts ship in this skill.

AlessandroFare/fluxychat

Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.

AlessandroFare/fluxychat

Author or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, static loops, static title cards, footage remixes, and freeform builds. Use motion-graphics instead for a short unnarrated motion-first unit, including an animated title. Route fresh creation through hyperframes before using this skill.

AlessandroFare/fluxychat

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

AlessandroFare/fluxychat

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Also covers Tailwind projects and the STORYBOARD.md / SCRIPT.md plan formats. Read before writing composition HTML.

AlessandroFare/fluxychat

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

AlessandroFare/fluxychat

Use when a HyperFrames composition needs seek-safe 2D/3D keyframes, GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media sourcing, captions, or general video planning.

AlessandroFare/fluxychat

GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]

AlessandroFare/fluxychat

A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location), animated tweet / news-article / headline, webpage / UI animation (scroll, cursor, callouts), or fusing a real image's geometry into a chart. Usually under 10s (up to ~30s), no narration or live-action subject; renders to MP4 or transparent overlay. Longer / narrated / multi-scene → /general-video. Unclear → /hyperframes.

AlessandroFare/fluxychat

Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat grid, and a complete video needs zero assets. Narrated pieces → the input-matched workflow (see /hyperframes). Unclear → /hyperframes.

AlessandroFare/fluxychat

Turn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market, launch, promote, or reveal a product; the default for any commercial URL. Site tours / showcases of a website route here too — the brief carries the show-it-as-is intent. Unclear → /hyperframes.

AlessandroFare/fluxychat

Turn a GitHub pull request (a PR URL, owner/repo#N, or 'this PR' in a checked-out repo) into a code-change explainer video — changelog, feature reveal, fix, or refactor walkthrough built from the diff, commits, and files: the input is a code change, not a website. Not a product promo (/product-launch-video) or a no-PR topic explainer (/faceless-explainer). Unclear → /hyperframes.

AlessandroFare/fluxychat

Design and improve user interfaces using the concrete rules from Refactoring UI (Wathan & Schoger) — constrained spacing/type/color/shadow scales, visual hierarchy through weight and color rather than size, and depth through emulated light. Use when building or styling any UI (web, app, dashboard, landing page, component), when picking font sizes, spacing, colors, shadows or border radius, when designing a color palette or design tokens, and whenever someone says a UI "looks off", "looks amateur", "feels cluttered/plain/unfinished", or asks to "make this look better".

AlessandroFare/fluxychat

Port an existing Remotion (React) composition''s source to HyperFrames HTML. Use ONLY on an explicit ask to port/convert/migrate/translate a Remotion source — one-way, Remotion-only. A passing Remotion mention, reference-only code, or "make something like my Remotion video" is a fresh build (/general-video). Unclear → /hyperframes.

AlessandroFare/fluxychat

Use before UI-related work to select the smallest useful UI Skills context through the ui-skills CLI.

Verwandte Skills