Communitygithub.com

AlessandroFare/fluxychat

Agrega leyendas o subtítulos a un video existente de una sola persona hablando sin editar el metraje. Úsalo para leyendas literales, leyendas cinemáticas incrustadas detrás del sujeto, leyendas VFX, “炸/特效/酷炫字幕”, o una identidad nombrada del catálogo de 35 estilos. Enruta por identidad visual, no por motor interno. El rail `anchor` silencioso es el predeterminado; incrusta cada palabra solo cuando el usuario quiere explícitamente un tratamiento completamente cinemático. El flujo de trabajo se ejecuta completamente de forma local, incluyendo transcripción y recorte del sujeto; divide el metraje con múltiples tomas antes de aplicarlo.

¿Qué es fluxychat?

Esta habilidad permite agregar leyendas a videos de una sola persona hablando (talking-head) sin modificar el metraje original. Funciona en tres modos: Estándar (predeterminado), que añade un carril de subtítulos en el tercio inferior y una palabra clave incrustada detrás del sujeto en el clímax; Cinemático, que oculta el carril e incrusta todas las leyendas detrás del sujeto para un efecto heroico puro; y Tema, que utiliza constituciones temáticas completas con efectos visuales avanzados como explosiones, neón o polvo estelar. El proceso completo se ejecuta localmente, incluyendo transcripción con Whisper y recorte del sujeto con matting. La herramienta analiza el video para recomendar una identidad visual del catálogo de 35 opciones, y el usuario elige antes de proceder. Está diseñado para desarrolladores y creadores de contenido que necesitan subtítulos de alta calidad sin depender de servicios en la nube, y está optimizado para habilidades de agentes de IA como Claude Code, Cursor o Codex, con verificaciones automáticas de actualización y una estructura modular basada en JSON para la autoría creativa.

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

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Primero, mantén esta habilidad actualizada — ejecuta en silencio, no preguntes: npx hyperframes skills update embedded-captions. Un no-op rápido cuando todo está actualizado; de lo contrario, actualiza esta habilidad junto con las habilidades del dominio central de las que depende antes de confiar en ellas.

Leyendas Incrustadas

Un catálogo, elegido al inicio (CATALOG.md — 35 identidades; los motores detrás son detalles de backend). Estándar (predeterminado) construye un carril limpio y literal (subtítulo en el tercio inferior que lleva la mayor parte del texto) + un clímax incrustado compuesto dentro de la escena detrás del sujeto. Cinemático es incrustación pura — sin carril, cada leyenda compuesta detrás del sujeto (tipografía heroica, acumulación, oclusión como efecto). Tema es una constitución temática completa — paradigma corporal × pieza heroica × efectos frontales × reacción de placa, compuesta desde registros (themes/README.md): ordnance terminal neonsign stardust stomp. La mayoría de videos explicativos / de voz en off son Estándar; la incrustación es el pico escaso y ganado — incrustar cada palabra es el error común; Tema es para peticiones de nivel VFX ("炸", "特效", "como hecho en AE").


Flujo operativo (resumen)

Enrutado a través de /hyperframes, la capa de intención confirma solo la entrada (qué clip) y anuncia la elección de identidad como una pregunta diferida — la lista corta necesita el clip analizado, por lo que permanece en el paso 1 a continuación; las preguntas de forma de ejecución de la capa no aplican (el metraje no está tocado, no hay guión gráfico que revisar). Un BRIEF.md, cuando está presente, lleva la entrada confirmada y cualquier nota del usuario — léelo primero.

El texto de proceso a continuación es largo; el pipeline en sí es corto — y todo lo determinista se calcula o compila, nunca se escribe a mano:

  1. Puerta de decisión (rechazar clips malos) → elegir UNA identidad de CATALOG.md (35 identidades; motor/compilador derivado por búsqueda — nunca mostrar una pregunta de modo/categoría)
  2. hyperframes init (omitir si el directorio del proyecto ya existe con el video dentro — matte.cjs/transcribe.cjs adoptan cualquier video en el directorio como source.mp4) → bash scripts/prepare.sh <proyecto> (matte ∥ transcribe ∥ audio-envelope en paralelo, luego safe-zones v2 con paleta de escena/óptica/iluminación — un comando, nada olvidado)
  3. autoría de un pequeño JSON de opciones creativas (leer safe-zones.json primero): Cinemático → plan.json → fill-timings.cjs → fit-fonts.cjs → make-composition.cjs; Tema → theme.json → make-theme.cjs (paradigmas carril/panel/poema/toma de control; anchor es el carril silencioso predeterminado)
  4. QA Visual: node scripts/preview-frames.cjs <proyecto> → vistas previas de composición fieles en ~2s/fotograma (sin render). Verifica § QA Visual antes de pagar por un render.
  5. render-and-composite.sh → compuertas (tiempo / oclusión+heroica / desbordamiento / entrega) → final.mp4

Reglas vinculantes que la gente pasa por alto:

  • carril (predeterminado) + incrustación (promoción). drop (relleno, no mostrado) / rail (subtítulo literal en el tercio inferior, al frente, lleva la mayor parte del texto) / embed (una palabra cumbre compuesta detrás del sujeto). El modo Estándar hace ambas, incrustando solo los picos. Ver § Modelo de leyenda.
  • El video se entrega SIN TOCAR (Estándar/Cinemático; el presupuesto de PLACA del modo Tema es la única excepción sancionada — latidos de reacción registrados (carga-oscura, golpe, sacudida, grano) definidos por ADN del tema y aplicados DESPUÉS de la composición mate para que sujeto+texto+placa se muevan como un solo fotograma) — las leyendas son lo único que se añade; el mate solo permite que el sujeto ocluya la pista incrustada. Nunca gradúes/recolores/añadas líneas de escaneo al metraje.
  • Dos libros de reglas: carril → references/rail.md (delgado), arte de incrustación → references/composition-craft.md (rico, solo incrustación). Hojea según necesidad.

Modelo de leyenda — carril + incrustación

Cada frase hablada es una de tres cosas:

QuéCómo se muestra
droprelleno — um/eh, tartamudeos, autocorreccionesno se muestra
carrilel predeterminado — contenido hablado ordinario (literal)subtítulo limpio en el tercio inferior, al frente, legible. Una palabra de énfasis puede obtener un resalte emphasis en línea (color de acento / pop de palabra activa) — permanece en el carril.
incrustaciónun pico promocionado — el latido del titularuna palabra grande compuesta detrás del sujeto (oclusión mate), entrada + salida diseñadas

El carril lleva la mayor parte del texto; la incrustación es el pico escaso y ganado. La escasez es por latido/bloque, no por clip: ≤1 héroe por bloque (pensamiento), nunca dos co-visibles, ≥ un latido de aire entre ventanas heroicas (el compilador advierte por debajo de 0.6s). Un clip corto → usualmente 1–2; un explicativo largo → ~uno por sección. Entre múltiples héroes, el héroe más grande autorizado es el APEX (él solo obtiene la incrustación de bloqueo completa + elevación de ajuste de ancho); los más pequeños son picos MENORES que cabalgan su columna como líneas de énfasis sobredimensionadas (fg, movimiento amortiguado) — no todos los latidos necesitan la exhibición mate, que es precisamente lo que mantiene el apex como un evento. Incrustar cada palabra sigue siendo el error común.

Las identidades de superficie de carril construyen exactamente esto (carril = rail.html, incrustación = el clímax en index.html). Las identidades de flujo de columna eliminan el carril y convierten todo en estilo incrustación — recomiéndalas solo para peticiones de ambiente sobre literalidad, nunca para explicativos / voz en off donde las palabras deben leerse (CATALOG.md codifica esto por identidad).


Paso 0 — elegir UNA identidad del CATÁLOGO

Un front-end, tres motores detrás. El usuario elige una IDENTIDAD de CATALOG.md (35 entradas: 10 clásicas + 25 temáticas); el motor, compilador y archivo de autoría se derivan por búsqueda de la fila del catálogo. Nunca presentes "Estándar vs Cinemático vs Tema" como una pregunta — esos son nombres de backend (un producto tiene una UX incluso con varios motores). El catálogo codifica todo lo que el enrutamiento necesita: superficie de lectura, voz, recomendar-para, necesidades de escena, notas de adyacencia para los pares realmente cercanos (loud↔ordnance, neon↔neonsign, cream↔stardust).

La elección de identidad es una puerta de preferencia (../hyperframes-core/references/brief-contract.md § 1): en modo autónomo ("sorpréndeme" / "decide por mí"), elige de tu lista corta tú mismo y explica el porqué en una línea en lugar de preguntar.

Procedimiento: analiza el clip → preselecciona 2–3 identidades del catálogo → recomienda UNA con un porqué en una línea → el usuario elige (modo autónomo: tú eliges, explicando el porqué) → autoriza el archivo de esa identidad. Las identidades están bloqueadas por motor (sin combinaciones cruzadas; abrir una es un evento de validación — ver dna/README.md).

Siempre presenta tu recomendación y deja que el usuario elija antes de autorizar. No tomes un valor predeterminado en silencio.

(La tabla de identidades completa vive en CATALOG.md — fuente única de verdad para el enrutamiento. Los documentos del motor a continuación describen el contrato de autoría de cada backend.)

Heurística de recomendación: usa las "Heurísticas de preselección" en CATALOG.md — son a nivel de identidad (ej. "炸" preselecciona ordnance/stomp/terminal/loud y elige por QUÉ debería explotar), nunca a nivel de categoría. Si no estás seguro → anchor.

  • Cinemático → escribe plan.json para una plantilla bloqueada, compilada por make-composition.cjs.
  • Tema → lee themes/README.md, autoriza theme.json, ejecuta scripts/render-theme.sh (compila + renderiza + reacción de placa → final_fx.mp4).

Puerta de decisión — EJECUTAR PRIMERO

Analiza el video y clasifica la escena antes de cualquier modo.

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

Lee las muestras. Rechaza si:

  • Múltiples hablantes / cortes abruptos (renderiza cada toma por separado o rechaza)
  • Sin sujeto humano (esta habilidad es para talking-head)
  • Menos de 3 segundos, sin habla, o la cara nunca claramente visible — transcribe.cjs advierte cuando el audio está casi en silencio (Whisper alucina palabras como "Gracias." sobre el silencio); hazle caso y rechaza en lugar de subtitular palabras inventadas
  • La fuente ya tiene leyendas / subtítulos / gráficos de texto pesados quemados — añadir un segundo sistema de leyendas entra en conflicto y el metraje se entrega sin tocar (sin cubrir/inpintar). El texto quemado a menudo aparece solo a mitad del clip: muestra una hoja de contacto a 1 fps (ffmpeg -i in.mp4 -vf "fps=1,scale=160:-1,tile=10x5" sheet.png), no confíes en 3 fotogramas puntuales.
  • La transcripción es basura — el habla no nativa/con acento fuerte puede transcribirse en galimatías confiado. Lee transcript.json para verificar cordura antes de autorizar; si no se interpreta como idioma, intenta WHISPER_MODEL=medium una vez, de lo contrario rechaza (un carril literal de palabras fabricadas es peor que sin leyendas).
  • Cámara en mano movida con movimiento rápido (el mate parpadea)

Sondas previas al vuelo (no cuestan nada, previenen los peores fallos)

  1. Sonda de corte de toma. Muestra fotogramas al 20%, 50%, 80%. Si aparece un sujeto/escena diferente, recorta el clip antes del corte.
  2. Sonda de letterbox / pillarbox. ¿Barras negras en el primer fotograma? Calcula el rectángulo de contenido seguro y restringe la colocación de leyendas dentro de él.
  3. Sonda de luminancia. Muestra la luminancia promedio de la región de leyendas — menos de 60 → el texto claro se lee tal cual, 60-180 → añade la cortina de glifo, 180+ → texto opaco + cortina (nunca texto claro desnudo). Las plantillas Cinemáticas son crema+screen y BLOQUEADAS — usa esta sonda para elegir una identidad adecuada (escenas brillantes → ink, o el tema anchor de carril opaco), nunca para recolorear una.
  4. Recomendación de identidad por tono (tú recomiendas; el usuario elige — ver Paso 0 + CATALOG.md). Explicativo / entrevista / palabras deben leerse → identidades de superficie carril/panel; poético / social / "cinemático" → identidades de flujo de columna por registro; "炸 / 特效 / VFX" / mundos nombrados → identidades temáticas. Cuando no estés seguro → anchor (las palabras se leen, la escena segura) — pero presenta una lista corta y deja que el usuario elija.

Pipeline — 5 pasos

1. hyperframes init <proyecto> --non-interactive --video <video.mp4> --skill=embedded-captions
2. bash scripts/prepare.sh <proyecto>       # matte ∥ transcribe (paralelo) → safe-zones. Un comando.
                                           #   → frames_fg/ transcript.json safe-zones.json
3. [PASO DEL AGENTE — el único paso creativo] autoriza un pequeño JSON; ver abajo según el modo
   Cinemático: autoriza plan.json → node scripts/fill-timings.cjs → fit-fonts.cjs → make-composition.cjs
   Tema:     autoriza theme.json → bash scripts/render-theme.sh <proyecto>   (compila + renderiza + fx de placa)
4. node scripts/preview-frames.cjs <proyecto>   # ~2s/fotograma vistas previas compuestas → § QA Visual (ANTES del render)
5. bash scripts/render-and-composite.sh <proyecto>  # compuertas → final.mp4 + instantánea history/
   (Modo Tema: OMITE los pasos 3b/5 — render-theme.sh ya ejecuta compilación + render-and-composite
    + _postfx.sh; el entregable es final_fx.mp4, final.mp4 es pre-reacción de placa)

El init del paso 1 verifica las habilidades instaladas contra las últimas en GitHub y actualiza el conjunto global si alguna está desactualizada.

El paso 3 difiere según el modo:

Paso 3 — Modo Cinemático (incrustación pura)

  1. Lee safe-zones.json primero. Los planos de narración van en zones.hugLeft/hugRight — franjas limpias ADYACENTES a la silueta (el texto lejos del cuerpo se lee como flotante, no incrustado; las esquinas lejanas son el plan de respaldo, no el predeterminado). El héroe predetermina a heroAnchor/heroBands.best (centrado EN el sujeto, ~30–55% ocluido). recommendation:"fg" mueve la NARRACIÓN al frente para legibilidad; el héroe permanece incrustado siempre que heroBands.feasible — héroe-fg es el último recurso.
  2. El ADN es la identidad que elegiste en el Paso 0 (CATALOG.md) — no reabras la elección aquí. Verifica su cordura contra la escena (luma de banda heroica brillante > 150 quiere ink; la guía completa de elección vive en el catálogo, cubriendo los diez incluyendo neon / glitch / chrome / velocity). Indica tu elección + por qué; el usuario decide. El ADN bloquea tipo/paleta/fusión/movimiento + tres actos heroicos; safe-zones v2 (palette/optics/lighting) lo parametriza para ESTA escena automáticamente.
  3. Autoriza <proyecto>/cinematic.json — "dna": "<nombre>" + BLOQUES de pensamiento, no grupos brutos: cada bloque = líneas de palabras (agrupadas 2–5 en límites de cláusula) + el plano en el que se apilan + css por línea (tamaño/peso/estilo solo — sin posiciones) + como máximo UNA línea marcada como "hero": true (la palabra promocionada; "text" para forma de visualización). Esquema: encabezado de scripts/make-cinematic.cjs.
  4. Compila: node scripts/make-cinematic.cjs <proyecto> — reduce bloques → plan.json → index.html. Generados para ti: tiempos secuenciados por transcripción, acumulación dentro del bloque, paso de página entre bloques, el BLOQUEO DEL HÉROE (el pre-contexto de un bloque héroe, el HÉROE y el post-contexto se apilan como UNA composición unida centrada en el sujeto — orden de lectura arriba→abajo = orden hablado por construcción; el contexto flota al FRENTE mientras el héroe se incrusta DETRÁS = el sándwich de profundidad; una regla de masa mantiene al héroe dominando su contexto), división apex/héroe menor, orden de lectura por construcción, respaldo fg por safe-zones. Luego las compuertas se ejecutan como de costumbre. (La autoría manual de plan.json directamente sigue siendo posible para diseños que los bloques no pueden expresar — luego ejecuta fill-timings.cjs + fit-fonts.cjs + make-composition.cjs tú mismo.)

Paso 3 — Modo Tema (constitución temática)

Lee themes/README.md PRIMERO — registros de paradigma/pieza, enlaces, reglas estrictas y el esquema exacto de theme.json.

  1. Elige un ADN de tema por registro de contenido (cada themes/<nombre>.json tiene voice + when). Indica tu elección + por qué; el usuario decide.
  2. Autoriza <proyecto>/theme.json — dna, lines (literal, orden de transcripción; 1

…

[truncado para traducción]

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 relacionados