Community画像github.com

カルーセル

フリンジ・ラインズ風の画像カルーセル（Instagram/LinkedIn向け、1080×1350 PNGスライド＋PDF）を作成します。大きなコンデンス大文字の見出しとアクセントワード、大きなテキストのみのスライド、チャート/スクリーンショットのスライド、解説グラフィックのスライド、フォローCTAで構成されます。エピソードやトピックからカルーセル、スライド投稿、「スワイプ」投稿を求められたときに使用します。

カルーセル とは？

このスキルは、ソーシャルメディア（特にInstagramとLinkedIn）向けのカルーセル画像投稿を作成するためのものです。フリンジ・ラインズのブランドガイドラインに従い、ホストやゲストの人物写真は一切使用せず、テキスト、グラフィック、ノンパーソン画像（チャートやスクリーンショットなど）のみで構成します。スライドタイプは、カバー、写真、テキスト、グラフィック、CTAの5種類から選択でき、各スライドの見出しは大きなコンデンス大文字で表示され、アクセントカラーで強調する単語を指定できます。Remotionを使用してレンダリングされ、最終的にPNG画像とPDFファイルが出力されます。このスキルは、エピソードの内容を要約したり、特定のトピックについての洞察を提供するカルーセル投稿を素早く作成するのに役立ちます。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/qdevery/fringe-lines-video/tree/main/.agents/skills/carousel

Installed? Explore more 画像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

オリジナルを見る→すべてのスキルを見る

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

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

画像カルーセル

スタイルは参考カルーセルに基づいています：

  • スピーカーなし： カルーセルではホストの映像や写真は一切使用しません。テキスト、作成したグラフィック、チャートやスクリーンショットなどの人物以外の画像のみを使用します。
  • 写真スライド： 下部が暗くなった画面いっぱいの画像に、太いコンデンスのすべて大文字の見出しを重ねます。キーワードはアクセントカラーで表示します。
  • カバー： ブランドキッカーと細い罫線で構成します。
  • テキストのみのスライド： 暗いグラデーション背景、アクセントカラーのタイトル、太字の白いサブタイトル、標準のボディテキスト。書体は参考よりも意図的に大きく設定されています（1080幅でタイトル92、サブタイトル60、ボディ52 px）。

構成要素：

  • テンプレート: pipeline/remotion/src/Carousel.tsx、RemotionのCarouselコンポジションで静止画としてレンダリングされます。
  • ビルド: pipeline/build_carousel.py。
  • 各カルーセルは独自のフォルダcarousels/<slug>/に配置され、carousel.jsonとimages/サブフォルダを含みます。
  • 出力: out/carousels/<slug>/01.png … および <slug>.pdf。これはLinkedInのドキュメント投稿としてアップロード可能です。

1. ストーリーを計画する（7～10スライド）

  1. カバー： 約束や好奇心をそそるもの。例：「今週、ほとんどのチームが見逃している5つのAIシグナル」や「誰も話題にしない世界中の良いニュース」。8～14語で書きます。
  2. スライドごとに1つのアイデア： 事実、教訓、ステップのいずれか。見出しはキャプションなしで意味が通じる必要があります。
  3. スライドタイプを混在させる。 写真3枚やテキストスライド3つを連続させないでください。典型的なパターン：カバー → 写真 → 写真/チャート → グラフィック → テキスト → 写真 → テキスト → CTA。
  4. 最後にCTA： 「Fringe Linesをフォロー」、「次の計画会議のために保存しておいてください」。

アクセント：見出しにつき1～4語を*…*で囲みます。通常は主語か数字です。スライドごとに最大2つのアクセントグループを使用します。

2. ビジュアル：スピーカーは絶対に使用しない

カルーセルではホストやゲストを表示しません。つまり、カメラフレーム、ヘッドショット、「話している人の写真」も、ぼかしたものでも使用できません。 すべてのスライドはテキスト、作成したグラフィック、人物以外の画像から構成されます。

画像はcarousels/<slug>/images/に配置します。優先順位は以下の通りです：

  • 作成したグラフィック：
    • graphicスライド（Graphics.tsxからstat / people / lines / quote / headline / list）
    • 画像不要のタイポグラフィックcover
    • graphicカード付きのcover
    • 完成したインフォグラフィックPNGをimageスライドとして配置（インフォグラフィックスキルを参照）
  • エピソードの画面共有： チャート、スライド、プロダクト画面。カメラは含みません。
    • 以下のコマンドで取得：ffmpeg -ss <秒> -i "<raw>/Quinn's screen-3.mp4" -frames:v 1 -vf "crop=iw:ih*0.895:0:ih*0.105" images/chart.png；クロップでブラウザのクロム部分を除去します。
    • 関連部分にクロップし、fit: "contain"で表示し、チャートの元の発行元をクレジットします。
    • 商用投稿の場合は、サードパーティのチャートを元の数値から独自のlinesやstatグラフィックに描き直すことを検討します。
  • ユーザー自身の人物以外の画像： プロダクトのスクリーンショット、ロゴ、場所や物の写真など。
  • AI生成またはストック画像： ユーザーから依頼があった場合のみ。
    • 実在の人物（ホストを含む）や実際のイベントの偽「写真」は使用不可。
    • ストックフォトはクレジット表示し、ライセンス済みのもののみ使用します。

引用はテキストとして問題ありません（quoteグラフィック、名前で attribution）。ただし、話している人の画像と組み合わせないでください。

3. carousels/<slug>/carousel.json を記述する

{
  "brand": "Fringe Lines",
  "accent": "#FF5A1F",
  "slides": [
    {"type": "cover", "kicker": "Fringe Lines · Oct 30",
     "headline": "今週、ほとんどのチームが見逃している*5つのAIシグナル*"},
    {"type": "cover", "kicker": "Fringe Lines", "headline": "収益は増加。*人員は横ばい*。",
     "graphic": {"type": "lines", "series": [{"label": "収益", "shape": "up"}, {"label": "人員", "shape": "flat"}]}},
    {"type": "photo", "image": "images/horses.jpg", "focus": [0.4, 0.4], "credit": "Photo: …",
     "headline": "*プルジェワルスキー馬*が数十年ぶりに野生に戻り、*保護活動*が実を結ぶ"},
    {"type": "photo", "image": "images/chart.png", "fit": "contain", "credit": "Chart: …",
     "headline": "マイクロソフトの*収益は増加*を続け、人員は横ばい"},
    {"type": "graphic", "headline": "AnthropicのS-1を*ひとつの数字で*",
     "graphic": {"type": "stat", "kicker": "Net revenue retention", "value": 900, "suffix": "%", "label": "…"}},
    {"type": "text", "number": "04", "title": "アフターアクションレビューを実施する",
     "subtitle": "アメリカ陸軍はすべての訓練を4つの質問で締めくくります：",
     "body": "何が起こるはずだったのか、実際に何が起こったのか、なぜそうなったのか、次回は何を変えるべきか。"},
    {"type": "cta", "headline": "*Fringe Lines*をフォロー", "sub": "毎週新しいエピソード"}
  ]
}
タイプフィールド備考
coverheadline, kicker?, graphic?, image?, focus?キッカーは2本の罫線の間に配置。「SWIPE →」を右下に表示。imageなし：暗いアクセントグローのカバーで、テキストのみ（見出し大）または見出しの上にgraphicカードを配置。imageは人物以外の写真のみ。
photoimage, focus?, fit?, headline, credit?人物は不可。focus = [x, y] 0～1で、画像の保持部分を指定。チャートやスクリーンショットにはfit: "contain"を使用（画像全体をぼかしたコピーの上に表示）。
texttitle, subtitle?, body?, number?大きな活字。ボディテキストは20～45語程度。長いテキストは少し小さくなるので、複数のスライドに分割する。
graphicgraphic, headline?, credit?Graphics.tsxの任意のタイプを、アニメーション付きで表示。セリフ付き見出し。実数値にはbarsを使用：{"type":"bars","kicker","signed":true,"suffix":"%","rows":[{"label","value","from?","note?","hi?"}]}（負の値は青色で左に伸びる。hi行はアクセントカラー）。サードパーティのチャートはスクリーンショットよりもbarsとして描き直すことを推奨。
ctaheadline, sub?インク背景、ブランドワードマーク。
imageimage完成した4:5の画像（例：インフォグラフィックPNG）をそのまま表示。
  • アクセントカラー: accentのデフォルトはFringe Linesのオレンジ。"#E2A85A"で参考のゴールドルックになります。
  • スライド番号: 写真とテキストスライドには右上に自動でn/totalが表示されます。

誠実さ：

  • 事実と数字はエピソードまたは名前を挙げられる出典からのものでなければなりません。出典をcreditに記入してください。
  • ホストが出典を明らかにしなかった場合は、「番組内で引用された通り」と書いてください。
  • 統計を捏造しないでください。数値に確認が必要な場合は、ユーザーに伝えてください。

4. レンダリング

~/.shorts-skill/bin/python pipeline/build_carousel.py carousels/<slug>

8～10スライドで約30～60秒かかり、PNGとPDFをout/carousels/<slug>/に出力します。

YouTube投稿： --youtubeを追加すると、1080×1080の正方形画像をout/carousels/<slug>-youtube/にレンダリングします。YouTubeは投稿画像を正方形で表示するため、4:5のスライドはクロップされます。同じcarousel.jsonが使用できます。v1テンプレートは正方形向けにレイアウトを調整します。"template": "v2"ではまだサポートされていません。

5. QA

問い合わせ票（コンタクトシート）を作成して確認します：

ffmpeg -v error -y -pattern_type glob -i "out/carousels/<slug>/*.png" -vf "scale=360:-1,tile=4x3" -frames:v 1 /tmp/sheet.png

確認事項：

  • どのスライドにもホスト、ゲスト、実在の人物が写っていないこと。
  • 見出しが5行を超えたり、クレジットと重なったりしていないこと。
  • 顔や被写体が切り取られていないこと。必要に応じてfocusを調整してください。
  • チャートが判読可能であること。fit: "contain"を使用し、必要に応じてスクリーンショットをより厳密にクロップしてください。
  • アクセントが色で表示され、文字通りの*ではないこと。
  • テキストスライドの最終行に1語だけ残るオーファンがないこと。ある場合は、言い回しを変更するか分割してください。

ユーザーに以下の内容を報告します：

  • スライドリスト
  • 各画像の出典（画面共有、提供、または自作）
  • 確認が必要な数値

Individual skills in this repo

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

editorial-short

Make a Fringe Lines vertical short in the "editorial" style (paper background, speaker that morphs between full-bleed / card / round PiP, explainer graphics, word-by-word serif captions, hook + end card, SFX). Use when asked to make, restyle or fix a short from an episode.

engaging-monologue

Make a 16:9 FringeLines "engaging monologue" video from a solo talking-head take — jump cuts with punch-ins, the speaker shrinking into a portrait picture-in-picture while serif kinetic text, diagrams (pyramid stack, compare, roadmap, steps, big stat) and b-roll cards build on a paper canvas, plus callout cards, lower thirds, chips, a CTA pill and a green end card, all synced word by word to the speech. Use for YouTube explainers, solo commentary, newsletter-to-video and "one idea, told well" pieces.

infographic

Make a single-image editorial infographic (1080x1350) that explains one idea at a glance — two-tone headline, one-sentence dek, a hero visual with 2–4 numbered callouts and leader lines, an optional side note, a three-column "why it matters" row with icons, byline and sources. Use for "explain X in one graphic" posts about a company move, a framework, an architecture or a trend; the PNG can also be a carousel slide.

podcast-intro

Build the cold open for a long-form Fringe Lines episode — a 35–60 s highlight reel of the episode's best lines with explainer-graphic cutaways, keyword captions, whip transitions + SFX, ending on a title card with the topic list. Use when making or revising the intro of a full episode.

関連スキル

steipete/songsee

Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.

community

affaan-m/frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.

community

mattpocock/improve-codebase-architecture

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

community

lobehub/add-provider-doc

Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.

community

addyosmani/browser-testing-with-devtools

Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.

community

bytedance/chart-visualization

This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.

community
← More 画像 skills