Communitygithub.com

isometric

アイソメトリックスタイルのリールをレンダリングします。落ち着いた正確なプロダクトラインアートを2:1ダイメトリックアイソメトリックで、白または暗い背景に、一定の2pxヘアライン、白塗りの面、目に見える厚みを持つ丸みを帯びたスラブ、積み重ねられたレイヤー、繰り返しパーツのグリッド、フレームごとに1つの小さな暗いアクセントで描画します。ユーザーがアイソメトリック、プロダクトラインアート、テクニカルイラストレーション、分解ハードウェアビュー、またはクリーンなドキュメント用図面スタイルを要求した場合に使用します。

isometric とは？

Isometricは、motion-explainerライブラリのスタイルの1つで、2:1ダイメトリックアイソメトリック投影を使用して、正確で落ち着いたプロダクトラインアートを生成するためのAIエージェントスキルです。このスタイルは、一定の2pxヘアライン、白塗りの面による隠線処理、丸みを帯びたスラブと積み重ねられたレイヤー、繰り返しパーツのグリッド、各フレームに1つだけの小さな暗いアクセントを特徴とし、テクニカルイラストレーションやドキュメント用図面に最適です。Remotion（Reactベース）とfframes（Rustベース）の2つのエンジンをサポートしており、パイプラインスキル（motion-explainer、motion-script、motion-storyboard、motion-build、motion-qa）と統合して使用します。スタイルガイドに従い、線の太さやアクセントのルールは厳守する必要があり、QAチェックリストには5つの重要な確認項目が含まれています。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/boytegar/motion-skills/tree/HEAD/style/isometric
オリジナルを見る→すべてのスキルを見る

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

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

落ち着いた正確なプロダクトラインアートを2:1ダイメトリックアイソメトリックで、一定のヘアラインとスプリングセトルで描画します。

これは、motion-explainerライブラリのスタイルの1つです。他のすべてのスタイルと同様に、style.jsonマニフェスト、Remotionエンジン、fframesエンジンの3つのコンポーネントを提供します。パイプラインスキル（motion-explainer、motion-script、motion-storyboard、motion-build、motion-qa）はすべてスタイル名を$MOTION_STYLEとして受け取るため、このスタイルを選択してもワークフローの他の部分は変わりません。

使用するタイミング

以下のスタイルDNAに合致する場合にこのスタイルを選択してください。最初にdocs/style-guide.mdを読んでください。これが権威であり、このファイルは索引です。

スタイルDNA

  1. 2:1ダイメトリックアイソメトリックのみ。他の遠近法は使用しません。
  2. 1080幅で一定の2.0pxヘアライン。現在のズームで除算されるため、線が太くなることはありません。
  3. 面は白く塗りつぶされ、手前のオブジェクトが奥のオブジェクトの線を隠します。
  4. 目に見える厚みを持つ丸みを帯びたスラブとプレート、積み重ねられたレイヤー、およびキー、通気口、柱、ポートなどの繰り返しパーツのグリッド。
  5. フレームごとに1つの小さな暗いアクセントのみ。それ以上はありません。モーションは1コマずつで、スプリングセトルで、それ以外は静止しています。

パレット: 地面 #ffffff、シルエットとエッジ #a4a4ac、内部と奥行きのある線 #e0e0e4、面は白、1つの暗いアクセント #2a2b36

キットコンポーネント

Remotion、../lib/<file>からインポート可能（キットは各プロジェクトのsrc/lib/に同期されます）:

コンポーネント説明
<IsometricGrid>薄いアイソメトリック構築グリッド
<IsometricBlock x y w h d color>正しい2:1の角度で上面、左面、右面を持つスラブ
<IsometricBanner text>ヘアラインバナープレート
<IsometricCaptions text>暗いキャプションストリップ

何も単独では機能しない

docs/style-guide.mdには、測定された参照線の太さとアクセントルールが記載されています。線の太さは譲歩できません。描画する前に必ず読んでください。

エンジン

エンジンパスエントリポイント
remotionremotion/template/、kit/、sync_kit.sh、CATALOG.md、AGENT_BRIEF.md
fframesfframes/Cargo.toml、src/ (lib、tokens、kit、look、video、main)、tools/ff.sh

登録済みエンジン: remotion、fframes。

エピソードのスキャフォールド

# ライブラリルートから、MOTION_LIBが解決されている状態で
./core/new_episode.sh <series-dir> 01-slug Episode out-name --style isometric --engine remotion
./core/new_episode.sh <series-dir> 01-slug Episode out-name --style isometric --engine fframes

または、シリーズのSERIES.md / episode.jsonでスタイルを"style": "isometric"として指定し、motion_style_ofに評価させることもできます。

このスタイルのQA

コントクトシートごとに、シーンを完了と判断する前に以下を確認してください。motion-qaのチェックリストの残りも適用されます。

  • すべての形状が2:1アイソメトリック軸上に配置されていること。遠近法や3/4ビューがないこと。
  • 線の太さが約2pxで一定であること。手前の面が奥の線を隠していること。
  • 面が白であること。地面が白または宣言された暗い地面であること。
  • フレームごとに正確に1つの小さな暗いアクセントがあること。
  • モーションは1コマずつで、スプリングセトルを使用し、2コマずつではないこと。

ファイル

  • docs/style-guide.md
  • docs/style-prompt.md
  • remotion/CATALOG.md
  • remotion/AGENT_BRIEF.md
  • style.json: マニフェスト（キャンバス、エンジンリスト、ドキュメントパス、オーディオルート）
  • sample.png: 1つの代表的なフレーム

Individual skills in this repo

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

motion-explainer

Make a papercut reel, video or explainer end to end. Short vertical (9:16) cut-paper explainers from a link (repo, product page, announcement), idea to mp4. Also routes partial asks to the stage skills and hands out the style prompt for other tools.

motion-script

Turn a link into a papercut reel script. Researches a sourced facts list, writes the 75-95 word script on the 10-beat spine, a banner fact track, a staging table with one set per banner, and the humour pass. Use for "write the script", "research this repo for a reel".

motion-storyboard

Storyboard a papercut script before any code. Writes the Camera / Cut table, one block per scene with frame-level events on each stressed word, the SFX plan and the proof beat. Use for "storyboard this script" or "plan the camera moves and cuts".

papercut

Render a reel in the Papercut style: layered construction paper brought to life with paper grain, torn edges, stacked shade strips, drop shadows, rigid cut-out animation, a slow camera push, taped headline banners and word-by-word torn-tag captions. Use when the user says cut paper, papercraft, paper cutout, paper collage, construction paper, or asks for the default handcrafted explainer look.

関連スキル

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community