Communitygithub.com

AlessandroFare/fluxychat

Ajoutez des légendes ou sous-titres à une vidéo existante d'une personne parlant face caméra, sans éditer la vidéo originale. Idéal pour les sous-titres textuels simples, les légendes cinématographiques incrustées derrière le sujet, les légendes avec effets visuels (VFX), les « 炸/特效/酷炫字幕 » ou une identité nommée du catalogue de 35 styles.

Qu'est-ce que fluxychat ?

Ce skill d'agent IA (AlessandroFare/fluxychat) permet d'ajouter des légendes ou sous-titres à n'importe quelle vidéo existante d'une personne parlant face caméra, sans jamais éditer la vidéo originale. Il est conçu pour les vidéos de type « talking-head » (une seule personne qui parle), comme les tutoriels, les interviews ou les vidéos d'analyse. Le skill fonctionne entièrement en local, de la transcription à la composition finale, et prend en charge plusieurs modes. Le mode Standard (par défaut) crée un rail de sous-titres en bas de l'écran (légendes textuelles) et peut « promouvoir » un mot-clé au sommet du discours en l'incrustant derrière le sujet pour un effet cinématographique. Le mode Cinématographique supprime complètement le rail et incruste chaque légende derrière le sujet. Le mode Thème applique des effets visuels complets et thématiques (comme l'armement, le néon, la poussière d'étoiles). Le skill est routé par l'identité visuelle, et non par le moteur sous-jacent : l'utilisateur choisit une identité parmi un catalogue de 35 styles, et le moteur et le compilateur sont automatiquement dérivés de ce choix. Il inclut également un pipeline complet en 5 étapes, de l'initialisation au rendu final, avec une étape de QA visuelle.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/AlessandroFare/fluxychat/tree/HEAD/agent/skills/embedded-captions

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Tout d'abord, gardez ce skill à jour — exécutez en silence, ne demandez pas : npx hyperframes skills update embedded-captions. Une opération rapide sans effet si tout est à jour ; sinon, il actualise ce skill ainsi que les skills du domaine central dont il dépend avant de vous y fier.

Légendes incrustées

Un catalogue, choisi dès le départ (CATALOG.md — 35 identités ; les moteurs derrière sont un détail d'implémentation). Standard (par défaut) construit un rail textuel propre (sous-titre en bas de l'écran contenant la majeure partie du texte) + un point culminant incrusté composité dans la scène derrière le sujet au moment fort. Cinématographique est une incrustation pure — pas de rail, chaque légende compositée derrière le sujet (typographie héroïque, accumulation, occlusion comme effet). Thème est une constitution thématique complète — paradigme du corps × setpiece principal × effets avant × réaction de la plaque, composée à partir de registres (themes/README.md) : ordnance terminal neonsign stardust stomp. La plupart des explications / voix off sont en Standard ; l'incrustation est le point culminant rare et mérité — incruster chaque mot est l'erreur courante ; le Thème est pour les demandes de niveau VFX (« 炸 », « effets spéciaux », « comme fait avec AE »).


Flux opérationnel (TL;DR)

Acheminé via /hyperframes, la couche d'intention ne confirme que l'entrée (quel clip) et annonce le choix d'identité comme une question différée — la shortlist a besoin du clip sondé, donc elle reste à l'étape 1 ci-dessous ; les questions de forme d'exécution de la couche ne s'appliquent pas (la vidéo n'est pas modifiée, il n'y a pas de storyboard à examiner). Un BRIEF.md, lorsqu'il est présent, contient l'entrée confirmée et toutes les notes de l'utilisateur — lisez-le d'abord.

Le texte de procédure ci-dessous est long ; le pipeline lui-même est court — et tout ce qui est déterministe est calculé ou compilé, jamais écrit à la main :

  1. Porte de décision (refuser les mauvais clips) → choisir UNE identité depuis CATALOG.md (35 identités ; moteur/compilateur dérivé par recherche — ne jamais poser de question sur le mode/catégorie)
  2. hyperframes init (sautez-le si le répertoire du projet existe déjà avec la vidéo dedans — matte.cjs/transcribe.cjs adoptent n'importe quelle vidéo dans le répertoire comme source.mp4) → bash scripts/prepare.sh <project> (matte ∥ transcrire ∥ enveloppe audio en parallèle, puis zones de sécurité v2 avec palette de scène/optique/éclairage — une commande, rien oublié)
  3. écrire un petit JSON de choix créatifs (lisez safe-zones.json d'abord) : Cinématographique → plan.json → fill-timings.cjs → fit-fonts.cjs → make-composition.cjs ; Thème → theme.json → make-theme.cjs (paradigmes rail/panneau/poème/takeover ; anchor est le rail par défaut discret)
  4. QA visuelle : node scripts/preview-frames.cjs <project> → aperçus composites fidèles en ~2s/image (pas de rendu). Vérifiez § QA visuelle avant de payer un rendu.
  5. render-and-composite.sh → portes (timing / occlusion+héroïque / débordement / remise) → final.mp4

Règles impératives que les gens oublient :

  • rail (par défaut) + incrustation (promotion). drop (remplissage, non affiché) / rail (sous-titre textuel en bas, au premier plan, contient la majeure partie du texte) / incrustation (un mot culminant composité derrière le sujet). Le mode Standard fait les deux, n'incrustant que le(s) point(s) culminant(s). Voir § Modèle de légende.
  • La vidéo est livrée NON MODIFIÉE (Standard/Cinématographique ; le budget PLATE du mode Thème est la seule exception sanctionnée — des battements de réaction (charge-dim, coup, secousse, grain) définis par l'ADN du thème et appliqués APRÈS le composite mat pour que le sujet+texte+plaque bougent comme une seule image) — les légendes sont la seule chose ajoutée ; le mat permet juste au sujet d'occlure la piste d'incrustation. Ne jamais étalonner/recolorer/ajouter de lignes de balayage à la vidéo.
  • Deux livres de règles : rail → references/rail.md (fin), art de l'incrustation → references/composition-craft.md (riche, incrustation uniquement). Parcourir selon les besoins.

Modèle de légende — rail + incrustation

Chaque phrase parlée est l'une de ces trois choses :

QuoiComment c'est affiché
dropremplissage — euh/euh, bégaiements, auto-correctionsnon affiché
raille défaut — contenu parlé ordinaire (textuel)sous-titre propre en bas, au premier plan, lisible. Un mot fort peut obtenir un surlignage emphasis en ligne (couleur d'accent / pop de mot actif) — il reste sur le rail.
incrustationun point culminant promu — le battement principalun grand mot composité derrière le sujet (occlusion du mat), entrée + sortie conçues

Le rail porte la majeure partie du texte ; l'incrustation est le point culminant rare et mérité. La rareté est par battement/bloc, pas par clip : ≤1 héroïque par bloc (pensée), jamais deux co-visibles, ≥ un battement d'air entre les fenêtres héroïques (le compilateur prévient en dessous de 0,6 s). Un clip court → généralement 1–2 ; une longue explication → ~un par section. Parmi plusieurs héroïques, le plus grand écrit est l'APEX (lui seul obtient l'incrustation complète verrouillée + la remontée ajustée à la largeur) ; les plus petits sont des pics MINEURS qui chevauchent leur colonne comme des lignes d'emphase surdimensionnées (premier plan, mouvement amorti) — tous les battements n'ont pas besoin de la vitrine du mat, ce qui est exactement ce qui fait de l'apex un événement. Incruster chaque mot est encore l'erreur courante.

Les identités de surface de rail construisent exactement cela (rail = rail.html, incrustation = le point culminant dans index.html). Les identités de flux en colonnes suppriment le rail et rendent tout de style incrustation — recommandez-les uniquement pour des demandes d'ambiance plutôt que textuelles, jamais pour des explications / voix off où les mots doivent être lus (CATALOG.md encode cela par identité).

Étape 0 — choisir UNE identité depuis le CATALOGUE

Un frontal, trois moteurs derrière. L'utilisateur choisit une IDENTITÉ depuis CATALOG.md (35 entrées : 10 classiques + 25 thématiques) ; le moteur, le compilateur et le fichier de rédaction sont dérivés par recherche dans la ligne du catalogue. Ne posez jamais la question « Standard vs Cinématographique vs Thème » — ce sont des noms de backend (un produit a une seule expérience utilisateur même avec plusieurs moteurs). Le catalogue encode tout ce dont le routage a besoin : surface de lecture, voix, recommandation-pour, besoins de scène, notes d'adjacence pour les paires véritablement proches (loud↔ordnance, neon↔neonsign, cream↔stardust).

Le choix de l'identité est une porte de préférence (../hyperframes-core/references/brief-contract.md § 1) : en mode autonome (« surprise-moi » / « décide pour moi »), choisissez vous-même dans votre shortlist et énoncez le pourquoi en une ligne au lieu de demander.

Procédure : sonder le clip → shortlister 2–3 identités du catalogue → recommander UNE avec un pourquoi en une ligne → l'utilisateur choisit (mode autonome : vous choisissez, en énonçant le pourquoi) → rédiger le fichier de cette identité. Les identités sont verrouillées par moteur (pas de combinaisons croisées ; en ouvrir une est un événement de validation — voir dna/README.md).

Présentez toujours votre recommandation et laissez l'utilisateur choisir avant de rédiger. Ne prenez pas de valeur par défaut en silence.

(Le tableau complet des identités se trouve dans CATALOG.md — source unique de vérité pour le routage. Les docs du moteur ci-dessous décrivent le contrat de rédaction de chaque backend.)

Heuristique de recommandation : utilisez les « Heuristiques de shortlisting » dans CATALOG.md — elles sont au niveau de l'identité (par exemple « 炸 » shortliste ordnance/stomp/terminal/loud et choisit par CE QUI devrait exploser), jamais au niveau de la catégorie. Si vous n'êtes pas sûr → anchor.

  • Cinématographique → écrire plan.json pour un modèle verrouillé, compilé par make-composition.cjs.
  • Thème → lire themes/README.md, rédiger theme.json, exécuter scripts/render-theme.sh (compile + rend + réaction de plaque → final_fx.mp4).

Porte de décision — À EXÉCUTER EN PREMIER

Sonder la vidéo et classer la scène avant l'un ou l'autre mode.

ffprobe <video.mp4>                    # specs
ffmpeg -ss <t> -i <video.mp4> -vframes 1 sample.png   # à 20/50/80%

Lire les échantillons. Refuser si :

  • Plusieurs intervenants / coupures franches (rendre chaque plan séparément, ou refuser)
  • Pas de sujet humain (ce skill est pour les talking-head)
  • Moins de 3 secondes, aucune parole, ou visage jamais clairement visible — transcribe.cjs prévient lorsque l'audio est presque silencieux (Whisper hallucine des mots comme « Merci. » sur le silence) ; tenez-en compte et refusez plutôt que de légender des mots fabriqués
  • La source a déjà des légendes / sous-titres / graphiques textuels lourds incrustés — ajouter un deuxième système de légendes entre en conflit et la vidéo est livrée non modifiée (pas de recouvrement/retouche). Le texte incrusté apparaît souvent seulement au milieu du clip : échantillonnez une planche contact à 1 ips (ffmpeg -i in.mp4 -vf "fps=1,scale=160:-1,tile=10x5" sheet.png), ne vous fiez pas à 3 images ponctuelles.
  • La transcription est défectueuse — la parole non native / avec un fort accent peut être transcrite en charabia assuré. Lisez transcript.json de manière critique avant la rédaction ; si cela ne ressemble pas à une langue, essayez WHISPER_MODEL=medium une fois, sinon refusez (un rail textuel de mots fabriqués est pire que pas de légendes).
  • Handheld agité avec mouvement rapide (le mat scintille)

Sondages de pré-vol (ne coûtent rien, évitent les pires échecs)

  1. Sondage de coupure de plan. Échantillonner les images à 20%, 50%, 80%. Si un sujet/scène différent apparaît, coupez le clip avant la coupure.
  2. Sondage de boîte aux lettres / piliers. Barres noires sur la première image ? Calculer le rectangle de contenu sûr et contraindre le placement des légendes à l'intérieur.
  3. Sondage de luminance. Échantillonner la luminance moyenne de la région des légendes — sous 60 → le texte clair se lit tel quel, 60-180 → ajouter le cache de glyphe, 180+ → texte opaque + cache (jamais de texte clair nu). Les modèles cinématographiques sont crème+écran et VERROUILLÉS — utilisez ce sondage pour choisir une identité adaptée (scènes lumineuses → ink, ou le thème anchor à rail opaque), jamais pour en recolorer une.
  4. Recommandation d'identité par ton (vous recommandez ; l'utilisateur choisit — voir Étape 0 + CATALOG.md). explicatif / interview / mots à lire absolument → identités de surface rail/panneau ; poétique / social / « cinématographique » → identités de flux en colonnes par registre ; « 炸 / effets spéciaux / VFX » / mondes nommés → identités thématiques. En cas de doute → anchor (les mots se lisent, la scène est sûre) — mais présentez une shortlist et laissez l'utilisateur choisir.

Pipeline — 5 étapes

1. hyperframes init <project> --non-interactive --video <video.mp4> --skill=embedded-captions
2. bash scripts/prepare.sh <project>       # matte ∥ transcrire (parallèle) → zones de sécurité. Une commande.
                                           #   → frames_fg/ transcript.json safe-zones.json
3. [ÉTAPE AGENT — la seule étape créative] rédiger un petit JSON ; voir ci-dessous par mode
   Cinématographique : rédiger plan.json → node scripts/fill-timings.cjs → fit-fonts.cjs → make-composition.cjs
   Thème :     rédiger theme.json → bash scripts/render-theme.sh <project>   (compile + rend + fx de plaque)
4. node scripts/preview-frames.cjs <project>   # ~2s/image aperçus composites → § QA visuelle (AVANT le rendu)
5. bash scripts/render-and-composite.sh <project>  # portes → final.mp4 + historique/ instantané
   (Mode Thème : SAUTER les étapes 3b/5 — render-theme.sh exécute déjà la compilation + rendu-et-composite
    + _postfx.sh ; le livrable est final_fx.mp4, final.mp4 est pré-réaction-de-plaque)

L'étape 1 d'init vérifie les skills installés par rapport aux dernières versions sur GitHub et met à jour l'ensemble global si l'un d'entre eux est obsolète.

L'étape 3 diffère selon le mode :

Étape 3 — Mode cinématographique (incrustation pure)

  1. Lisez safe-zones.json d'abord. Les plans de narration vont dans zones.hugLeft/hugRight — des bandes nettes JUXTAPOSANT la silhouette (le texte loin du corps semble flottant, pas incrusté ; les coins éloignés sont la solution de repli, pas la valeur par défaut). Le héros se place par défaut sur heroAnchor/heroBands.best (centré SUR le sujet, ~30–55% occulté). recommendation:"fg" déplace la NARRATION au premier plan pour la lisibilité ; le héros reste incrusté chaque fois que heroBands.feasible — héros en premier plan est le dernier recours.
  2. L'ADN est l'identité que vous avez choisie à l'étape 0 (CATALOG.md) — ne rouvrez pas le choix ici. Vérifiez-le par rapport à la scène (luminance de la bande héroïque > 150 nécessite ink ; les conseils complets de choix se trouvent dans le catalogue, couvrant les dix incluant neon / glitch / chrome / velocity). Énoncez votre choix + pourquoi ; l'utilisateur décide. L'ADN verrouille le type/palette/mélange/mouvement + l'acte en trois parties du héros ; les zones de sécurité v2 (palette/optics/lighting) le paramètrent pour CETTE scène automatiquement.
  3. Rédigez <project>/cinematic.json — "dna": "<nom>" + BLOCS de pensée, pas de groupes bruts : chaque bloc = lignes de mots (groupés 2–5 aux frontières de proposition) + le plan dans lequel il s'empile + css par ligne (taille/poids/style uniquement — pas de positions) + au plus UNE ligne marquée "hero": true (le mot promu ; "text" pour la forme d'affichage). Schéma : en-tête de scripts/make-cinematic.cjs.
  4. Compilez : node scripts/make-cinematic.cjs <project> — abaisse les blocs → plan.json → index.html. Généré pour vous : timings séquencés par transcription, accumulation au sein du bloc, page-flip entre les blocs, le VERROUILLAGE DU HÉROS (le pré-contexte du bloc héroïque, le HÉROS et le post-contexte s'empilent comme UNE composition liée centrée sur le sujet — ordre de lecture haut→bas = ordre parlé par construction ; le contexte flotte au PREMIER PLAN tandis que le héros s'incruste DERRIÈRE = le sandwich de profondeur ; une règle de masse garantit que le héros domine son contexte), séparation apex/héros mineur, ordre de lecture par construction, repli fg selon les zones de sécurité. Ensuite, les portes s'exécutent comme d'habitude. (La rédaction manuelle de plan.json reste possible pour les conceptions que les blocs ne peuvent pas exprimer — exécutez ensuite fill-timings.cjs + fit-fonts.cjs + make-composition.cjs vous-même.)

Étape 3 — Mode thème (constitution thématique)

Lisez themes/README.md EN PREMIER — registres de paradigmes/setpieces, liens, règles strictes et le schéma exact de theme.json.

  1. Choisissez un ADN de thème par registre de contenu (chaque themes/<name>.json a voice + when). Énoncez votre choix + pourquoi ; l'utilisateur décide.
  2. Rédigez <project>/theme.json — dna, lines (textuel, ordre de la transcription ; 1…

… [tronqué pour la traduction]

Individual skills in this repo

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

AlessandroFare/fluxychat

Use when audio already placed in a HyperFrames composition needs to be mixed: a music bed that fights a voiceover (voiceover carve), effects on a track (EQ, compressor, limiter, gate, saturation, delay, reverb, chorus, phaser, bitcrush), or automation envelopes drawn on a track's volume or any effect parameter. Don't use for sourcing or generating audio — finding BGM, SFX, or making a voiceover is `/media-use`. Don't use for clip timing or track layout, which is `/hyperframes-core`.\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.

Skills associés