Communitygithub.com

AlessandroFare/fluxychat

HyperFrames コンポジション内のオーディオミックスに使用します。ボイスオーバーと競合する音楽 (ボイスオーバーカービング)、トラックへのエフェクト (EQ、コンプレッサー、リミッター、ゲート、サチュレーション、ディレイ、リバーブ、コーラス、フェイザー、ビットクラッシュ)、またはトラックのボリュームやエフェクトパラメータに描かれたオートメーションエンベロープを扱います。BGM、SE の検索や生成、ボイスオーバーの作成には `/media-use` を、クリップのタイミングやトラックレイアウトには `/hyperframes-core` を使用してください。

fluxychat とは?

このスキルは、HyperFrames のオーディオミックス専門エージェントです。ボーカルと音楽が競合する「ボイスオーバーカービング」、各エフェクト (EQ、コンプレッサー、リミッター、ゲート、サチュレーション、ディレイ、リバーブ、コーラス、フェイザー、ビットクラッシュ)、トラックのボリュームやエフェクトパラメータに対するオートメーションエンベロープの3つの主要機能を提供します。Web Audio API をベースに構築されており、プレビューとレンダリングで同一のオーディオグラフを使用するため、編集時の確認が最終出力と厳密に一致します。FFmpeg などの外部ツールに依存せず、ブラウザ内で完結するため、ブラウザベースの DAW や動画編集ツールとの統合に最適です。オーディオの分析、診断、プリセット適用、カービングパラメータの調整などをコードなしで実行できます。

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

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

HyperFrames オーディオ

ミックスとは、プロセッサの積み重ねではなく、関係性の集合体です。単独では正しく聞こえる2つのトラックが、一緒になると聴くに堪えなくなることがあります。その修正は「どちらかを下げる」ことではほぼなく、「何が競合しているのかを見つけ、それを必要とする方に与える」ことです。ここにあるすべてのツールは、それらの関係性の1つを表現するために存在します。

エフェクトは要素上に data-fx-chain として配置され、プレビューとレンダリングは同じ Web Audio グラフを実行します。スタジオのライブコンテキストでの動作、エンジンのオフラインコンテキストでの動作、どちらもブラウザ内で行われます。各エフェクトの実装は1つであるため、スクラブ中に聞こえるものがそのまま書き出されます。2度調整する必要はありません。

すべての情報は、オーディオ/ビデオ要素自体に3つの属性で保持されます。

属性保持するもの
data-fx-chainシグナル順のエフェクト
data-automationこのトラックのボリュームまたはエフェクトパラメータに対するエンベロープ
data-fx-carveカービング自体の設定。再導出可能にするため

各属性の正確なJSONと、レーンが満たすべきルール: references/attributes.md パラメータ、範囲、単位を含むすべてのエフェクト: references/fx-registry.md 聞くことのできないファイルの問題を特定する方法: references/diagnosis.md プリセット、名前付きジョブ、1ノブプロファイル、および症状から修正へのテーブル: references/presets.md — チェーンを手動で構築する前に必ず読んでください。プリセットや名前付きジョブのいずれかが、通常すでに問題を特定しているからです。

連携の仕組み

2つのオーサリングサーフェスがこれらの属性を書き込み、2つのランタイムが同じビルダーを通じてそれらを読み取ります。この共有された中間層こそが、プレビューがレンダリングを予測できる理由です。

flowchart TB
  voice["ボイストラック<br/>メディアファイル"]
  bed["音楽トラック<br/>メディアファイル"]

  subgraph AUTHOR["オーサリング — 属性を書き込む唯一のもの"]
    panel["スタジオ<br/>ボイスオーバーカービング制御"]
    script["scripts/carve.mjs<br/>ペアを検出、デフォルトで動的"]
    analysis["core/audioCarve.ts<br/>carveProfile · analyseCarveBands<br/>analyseCarveDuck · analyseCarveDynamics"]
    panel --> analysis
    script --> analysis
  end

  voice --> analysis
  bed --> analysis

  subgraph ATTRS["音楽要素に書き込まれる"]
    carveAttr["data-fx-carve<br/>source · strength · dynamic"]
    chainAttr["data-fx-chain<br/>peaking xN + gain, tagged fromCarve"]
    autoAttr["data-automation<br/>カービングパラメータごとのレーン"]
  end

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

  subgraph SHARED["1つの実装、両方から読み取られる"]
    build["audioFxGraph.ts · buildFxChain"]
    sched["audioFxAutomation.ts · scheduleChainAutomation"]
  end

  chainAttr --> build
  autoAttr --> sched

  build --> preview["プレビュー<br/>ライブ AudioContext<br/>attachElementFxChain"]
  sched --> preview
  build --> render["レンダリング<br/>ヘッドレスブラウザ内の OfflineAudioContext<br/>applyAudioFxChain"]
  sched --> render

  preview --> heard["スクラブ中に聞こえるもの"]
  render --> wav["処理済み WAV<br/>+ chainTailSeconds によりミックスがテールを通過させる"]
  wav --> mix["エンジン · audioMixer<br/>ボリュームレーンは PCM にベイクされ、グラフにはない"]
  mix --> out["レンダリングされたミックス"]

  edit["再生中の属性編集"] -.->|MutationObserver| preview

カービング自体の設定は再生時に読み取られることはありません。再生されるのは、それが生成したチェーンとレーンです。data-fx-carve は、既存のカービングの強度を、フィルターから逆算する代わりに変更できるようにするために存在します。

カービングされた音楽トラック内部では、シグナルは最初にディップを通過し、次にレベルマッチ、そしてあなたが自分で構築したものの順に通過します。これは、後から追加したリミッターが依然として最終的な天井として機能する理由です。

flowchart LR
  src["デコードされた音楽"] --> p1["peaking<br/>400 Hz"]
  p1 --> p2["peaking<br/>1 kHz"]
  p2 --> p3["peaking<br/>1.6 kHz"]
  p3 --> g["gain<br/>レベルマッチ"]
  g --> hand["独自のエフェクト<br/>例:リミッター"]
  hand --> dest["トラックゲイン、続いて出力"]

  l1["lane fx.n1.gain"] -.->|"その帯域における<br/>ボイスのレベルの<br/>エンベロープ"| p1
  l4["lane fx.n4.gain"] -.->|"音楽全体が<br/>どの程度ダッキングするか"| g

静的カービングは、固定値とレーンがない同じグラフです。

まず、何が問題かを特定する

以下の表は「こもって聞こえる」から始まります — これは誰かがすでに聞いてそう言ったことを前提としています。「これを修正して」とファイルを渡された場合、あなたにはその説明はなく、聞くこともできないため、測定する必要があります。すべてを支配するルールは1つです。

単一の未知の音声の絶対スペクトルは診断できない。 フォルマントは ±10 dB、基本周波数は 85–255 Hz、文の終わりにかけて 5–6 dB 減衰します。これらのすべては、単独では欠陥として読み取られ、そのすべてが話者自身のものです。

したがって、比較してください。そして同じファイル内の何かと比較してください: 存在する場合はクリーンなオリジナル、そうでなければポーズ — ギャップに聞こえるものはすべて付加的なものであり、ギャップのスペクトルはそのチャンネルのものであり、音声のものではありません。公開されている平均スペクトルや合成された制御音声との比較は機能しません。2人の話者の違いはほとんどの欠陥よりも大きく、このガイダンスの背後にある評価で得られた2つの誤った回答は、まさにその比較から生じたものです。

オリジナルも使用可能な無音もない場合、静的な音色の欠陥は真に未決定です。その旨を述べ、適合する読み取り値を1つ選んでチェーンを構築するのではなく、提供してください。

コマンド、落とし穴、実践的なレシピ: references/diagnosis.md。誰も説明していないファイルを診断する前に読んでください。

症状から始める

帯域と種類がわかったら、オーディオの問題を具体的に特定します。ほとんどの悪いオーディオは以下のうちの1つまたは2つであり、それぞれに出荷済みの回答があります。

こう聞こえる使用するもの
低いハムやドスンという音rumble-cut、または 80 Hz の highpass
こもっている、胸元で響くTame Boominess ジョブ (200 Hz)
くぐもった、段ボールの向こうReduce Mud ジョブ (250 Hz)
言葉が聞き取りにくいAdd Clarity ジョブ (3 kHz)、または音楽をカービング
耳障りで疲れるSoften Harshness ジョブ (3.2 kHz)
単語によって音量が大きく異なるコンプレッサーで Evenness、または Even Out Levels
文と文の間に部屋の響きroom-gate
声と音楽が競合ボイスオーバーカービング — どちらかに EQ ではない
ドライで、どこでも録音されていないroom-tight または room-natural
単に「アマチュアっぽい」voice-clean。上記のうち4つを順に含む。

完全なカタログ、各プリセットの内容、帯域の語彙、意図的にカバーされていないもの (デエッシング、ノイズ除去、トーンマッチ): references/presets.md。

足す前に引く、フィルター後にレベル、レベルの後に関係性、キャラクターと天井は最後。各ステップは、次のステップが聞くものを変えます — ハイパスフィルターの前に設定されたコンプレッサーは、ランブルを追いかけることに時間を費やします。

名前ではなく問題に基づいてファミリーを選択する

フィルター (highpass, lowpass, peaking, lowshelf, highshelf) は、トラックが占有を許可される周波数を決定します。これは2つのソースが衝突する場合の最初のツールです。衝突は帯域で発生するためです: 音楽とボイスは両方とも 1–3 kHz を必要とし、それを音楽から奪うことは、ミックス全体を下げるよりもはるかに音楽への影響が少ないです。ボイスへのハイパスフィルターはランブルに対する標準的な修正です; ローパスフィルターは意図的に暗くまたはこもらせます。

ダイナミクス (gain, compressor, limiter, gate) は、トラックのレベルが時間とともにどのように振る舞うかを決定します。コンプレッションは大きい音と小さい音の間の距離を狭め、小さい音を持ち上げられるようにします。リミッターは天井です — 何かを整形するのではなく、何も通過させないことを保証します。ゲートはしきい値以下のものを除去します。これは、フレーズ間の部屋の響きを消す方法です。gain はプレーンなレベルステージであり、トラックが邪魔にならないように移動する必要がある場合にオートメーションレーンが乗るものです。

非線形 (saturate, bitcrush) は波形の形状を変更し、存在しなかった倍音を追加します。トラックが修正ではなく、キャラクターやざらつきを必要とする場合に使用します — そして、それが生成的であることを覚えておいてください: 薄いソースをより密度の高いものにし、クリーンにはしません。

時間 (delay, reverb, chorus, phaser) は、トラックを空間に配置するか、幅を与えます。これらはミックスを最も簡単に台無しにするものです。テールやデチューンされたコピーは、ボイスが必要とする同じ領域を占有するからです。何か他のものの背後に配置されるべきものに使用し、ウェット量は単独で正しく聞こえる量よりも低く保ちます。

チェーンはシリアルです: 各エフェクトは、その前のエフェクトが生成したものを処理します。したがって、修正フィルタリングは早い段階で、キャラクターは中間で、リミッターは実際に天井として機能できる最後に配置します。

ボイスオーバーカービング

解決する問題。 ボイスの下の音楽は、ボイスを聞き取りにくくします。反射的な反応は音楽全体をダッキングすることです。これは機能しますが、音楽の存在感をすべて奪います — 音楽はボイスオーバー全体にわたって弱々しくなります。しかし、ボイスはスペクトル全体を必要とするわけではありません。ボイスが実際に占有するいくつかの帯域だけが必要です。カービングはそれらの帯域のみを取り除き、音楽は低域と高域を保持するため、ボイスが明瞭なまま、音楽は依然として音楽です。

それはエフェクトではなく、関係です。 設定は音楽に配置されます — 処理されるトラック — そして、それらは聞くべきボイスを指定します。これはサイドチェインコンプレッサーとまったく同じです: 小さくなるトラックを選択し、それを小さくするものを選びます。決してボイストラックにカーブを配置しないでください。 ボイスをそれ自身に対してカービングすることは、微妙なミックスの選択ではなく、バグです。

すべてのボイス、そのうちの1つだけではありません。 sources はリストです。なぜなら、音楽は通常、シーケンス全体 — ナレーター、インタビューの回答、2人目のプレゼンター — の下で再生されるからです。それらは何かが測定される前に (mixCarveSources で) 音楽自身のクロックに合算されるため、1つの分析がすべてをカバーします: 帯域はそこにあるすべての音声からのものであり、エンベロープはそのいずれかが発生している場所で上昇します。音楽が再生されている間に決して再生されないボイスは除外されます。それらはマスクできません。

1つのノブ。 strength は 0..1 で、すべてを導き出します: どの程度深くカットするか、いくつの帯域、どの程度の幅、明瞭性と生の音声エネルギーのどちらを優先するか、レベルがどの程度低下してもよいか、ボイスに対してどの程度の下を目指すか。これらの6つは、実際のミックスでは常に一緒に動きます — 穏やかなカービングは、ダッキングが少ない少数の帯域での浅いカットであり、強いものはより多くの帯域でより深く、ダッキングも多いため、これらは carveProfile に1回記述される1つの関係です。デフォルトは 0.25 — 6 dB のレベル余裕を持つ3つの帯域で 6 dB のディップ。穴のように聞こえずに聞こえます。0.5 ではディップは 10 dB に達し、これはカービングがボイスのための余地としてではなく、エフェクトとして聞こえ始めるポイントです。それ以上は、静かなボイスの下で大きな音楽を意図した領域です。0 はスペクトルのみ — 1つの帯域、レベルマッチなし。

デフォルトでカービング。 ナレーションの下で再生される音楽はカービングを必要とします。それは時間があれば行う仕上げのステップではありません。両方のトラックを配置し、以下のコマンドを実行し、聞いてください。音楽がその下に座るナレーションがない場合 — ミュージックビデオ、タイトルカード、トラックに合わせたモンタージュカット — にのみスキップしてください。

それは常にボイスに従います。 静的なモードはありません。固定の深さは、すべてのポーズを通じて音楽を薄くします。両方を聞いた後では、それを望む理由はありません。すべての値は、音声自体のレベルのエンベロープになります — 沈黙は音楽をそのままにし、大きなパッセージはカービングを最大深度に押し上げます — これは通常のオートメーションとして書き込まれ、そのためレーンがタイムラインに表示され、後で編集できます。

レベルマッチングはその一部です。 スペクトルカービングは、単にボイスよりも大きい音楽を修正できません。そのため、カービングは音楽がボイスよりもどの程度上にあるかを測定し、gain ステージを書き込みます。静的カービングでは1つの値に保持され、動的カービングではエンベロープによって駆動されます。そのエンベロープは意図的にゆっくりと解放されます — 単語が終わった瞬間に音楽がフルに戻るのは、機械がやっているように聞こえるからです。

実行方法。 スタジオでは、カービングはトラックのエフェクトラックの上部にある1つのモジュールです — ボイス、強度、動的、およびそれが生成した分析が1つのカードに表示されます。これは、別のトラックがボイスである可能性があるときはいつでもそこにあり、上に1つの候補がある音楽はデフォルトで、動的に、デフォルトの強度でカービングされます。それがナレーションの下の音楽に必要なものであり、モジュールはそれを変更したりオフにしたりする場所です。複数の候補がある場合、推測するのではなく、ピッカーが待機します。ヘッドレス — これは、コンポジションを編集するのではなくオーサリングする場合のパスです:

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

これが全体のコマンドです。ボイスと音楽自体を見つけ、デフォルトの強度で動的にカービングし、決定した内容を出力します:

bed    music-bed (名前が music のように見える)
voice  narration (残った唯一のトラック)
carve  strength 0.25 dynamic
bands  400Hz -6dB q1.4, 1000Hz -3dB q1.4, 1600Hz -3.17dB q1.4
level  216-point envelope, floor -6 dB

自動選択が間違っている場合は --bed/--voice (繰り返し可) でトラックを指定し、強度を上げるには --strength、レポートを表示して何も書き込まない場合は --dry-run を使用します。

トラックの選択方法。 まず名前で判断します。これはすでに指示したことであり、説明可能な答えだからです — コア内の classifyAudioName は、スタジオ自身のピッカーが使用するのと同じ分類器であり、そのため両者が矛盾することはありません。ID またはファイル名が music (music, bgm, bed, score…) のように見えるトラックは音楽です。それ以外で音楽の上で再生され、SFX のような形をしていないものはすべてボイスです。オーディオ要素が優先されます: ビデオは、オーディオトラックがボイスとして残っていない場合、またはコンポジション内のすべての B-roll クリップが誰かが話しているように読み取られる場合にのみカウントされます。

[truncated for translation] のため、以降は省略されています。

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.

関連スキル