1仕組みと動作原理
投影方式の先行決定：2つの規約（真のアイソメトリック軸 ±30° または 2:1 ダイメトリック軸 ~26.57°）から1つを選択し、以降は絶対に混用しないこと。軸系が狂うと後続の処理がすべて崩綻します。
skills/isometric-animation/SKILL.md
Two conventions — pick one and never mix:
「アイソメらしく見えるか」を単一の幾何学的選択に集約し、以降の全コードと検証項目をその基準に紐づけています。
CSS 3D 変換を用いて任意の平面をアイソメ地面へと変形：rotateX(60deg) rotateZ(45deg) は標準的な true-iso の組み合わせであり、フラットな SVG/DOM（フロアマップ、UI カンプ、グリッド）を置くだけで即座にアイソメ平面化し、子要素は translateZ で持ち上げます。
skills/isometric-animation/SKILL.md
.iso-plane { transform: rotateX(60deg) rotateZ(45deg); }
「1つの div + 2つの rotate」で 3D エンジンを代替できる理由を解説しています。アイソメの本質は平面のアフィン変換にあります。
立体感は面ごとの個別シェーディングで実現：上面を最も明るく、左面を中間、右面を最も暗くし、シーン全体の光向を統一します。これはアイソメの奥行きに説得力を持たせる最重要テクニックとされています。
skills/isometric-animation/SKILL.md
.block .top { background:#3a9bff; } /* lit */
SVG 版でも明・中・暗の3つのポリゴンを使用しており、CSS と SVG の間で共通ルールを適用できます。
シーンは4種の再利用可能な構成要素で構築：Z層のスタック（カード/フロア）、押し出しブロック（面 + シェーディング）、アイソメグリッド、分解図（共通の --gap 変数で開閉を一括制御）。
skills/isometric-animation/SKILL.md
Keep one shared `--gap` variable so the whole stack opens/closes together.
変数の共有により、「組み立て／分解」を2つの別個のアニメーションではなく、単一の値の双方向再生として扱えるようにしています。
アイソメの整合性を保つための禁止ルール：上昇は Z 軸方向のみに制限（スケール変更による擬似的な高さ表現は禁止）、カメラドリフトは小さく緩やかに抑え、時間差のアニメーションは DOM 順ではなく物理位置（下から上）に従わせます。
skills/isometric-animation/SKILL.md
**Lift along Z, never scale** to fake height — scaling breaks parallel projection.
不自然な疑似奥行きエラーを事前に排除する「禁止事項ベース」の記述が本書の主な特徴です。
厳密な遮蔽、リアルな影、3D 回転が必要な場合は Three.js の OrthographicCamera に移行：等値の position を設定することで古典的な 30° アングルが得られ、正交カメラにより遠景の縮小を防ぎます。PerspectiveCamera はアイソメではないと明記されています。
skills/isometric-animation/SKILL.md
cam.position.set(10, 10, 10); // equal X,Y,Z → classic iso vantage
移行基準（遮蔽、影、3D 回転の要否）を明確に定めており、単なる「高機能化のための Three.js 採用」を避けています。
納品形態 = 単一 HTML ファイル + 1本の主タイムライン + ?t=N による静止検証。検証対象は「動いているか」ではなく、投影自体の正確性（軸角度、Z オーダーと遮蔽、z-fighting の有無、予期しないパース縮小の有無）です。
skills/isometric-animation/SKILL.md
**INSPECT the projection, not just "did it animate":
検収の着眼点を「アニメーションの有無」から「幾何学的正確性」へと移行させており、同パックの diagram-animation と同系統ながら検証観点が根本から異なります。
全体を通じた平行投影規律の徹底：CSS シーンでは perspective:none（または極大値）が必須であり、Three.js では正交カメラが必須となります。小さな perspective 値を用いるとアイソメではなく傾いた 3D カードに見えてしまいます。
skills/isometric-animation/SKILL.md
Keep `perspective` OFF (or very large) — iso is parallel projection, so far objects must NOT shrink.
投影方式の選択を、スタイルの好みではなく出力契約上の厳格な制約として位置づけています。
2コア機能
012つの投影規約（true iso ±30° / 2:1 dimetric ~26.57°）+ グリッド↔スクリーン座標の相互変換式
02平面からアイソメ面への変換（CSS 3D 変換、matrix3d による事前乗算の等価記述を含む。ラベルは逆回転で正面を向けるビルボード化）
03押し出しブロックの3面シェーディング（CSS / SVG の両対応。SVG では深度バッファの代わりに描画順序で遮蔽と z-fighting を制御）
04Z層スタックと下からのビルド（DOM 順ではなく --z の物理順による時間差制御）
05分解図：共通の --gap 変数による開閉の一括制御（組み立て／分解を単一値の双方向再生で実現）
06アイソメグリッド：平面上に描線した後に iso-plane で変形し、stroke-dashoffset で1本ずつストローク描画
07カメラドリフト / カーソル視差 / hover 時の Z 軸上昇（平面であることが露呈しないよう小さく緩やかに制御）
08Three.js OrthographicCamera による真の 3D アイソメシーン（単一の progress 値でビルドを駆動し、?t で静止させて確定的なスクリーンショットを取得可能）
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| cli | npx / Playwright（无头截图） |
| cli | ffmpeg（contact-sheet.sh 拼图） |
| cli | npx -y playwright（仓库根 seek-shot.sh 内部） |
| network | jsDelivr CDN：three.js（reference 里钉的是 0.160 具体版本） |
| network | jsDelivr CDN：gsap ESM（未钉版本，走 +esm 浮动入口） |
| package | 第三方库/能力：Three.js、GSAP；CSS 3D 与内联 SVG 路线零依赖 |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠（ファイルパスと抜粋）
- scripts/: ローカルスクリプトまたはコマンドの実行: npx playwright screenshot --wait-for-timeout=500 …（SKILL.md 内の Verify ループに含まれるインラインコマンド）
- 网络端点: 外部ネットワークアクセスの宣言: スキル自体に業務 API の呼び出しはありません。ネットワークアクセスはツールチェーンに起因し、npx が registry.npmjs.org から playwright パッケージを取得し Chromium バイナリをダウンロードします
- 本地工作目录: ファイル読み書きおよび成果物出力: frame-mid.png（SKILL.md のインラインスクリーンショット例の出力）、frame-<t>.png（seek-shot.sh の出力）
監査ノート： 評価対象はスキルディレクトリ自体です（skills/isometric-animation/：SKILL.md + references/ + 0バイトの README.md。ディレクトリ内にスクリプトや認証情報は存在せず、ディスク書き込みも行いません）。オレンジ判定となった要因は、規定された検証ループと納品形態にあります：① SKILL.md の Verify ループに `npx playwright screenshot …` がインラインで記載されており、参照されているリポジトリ直下のヘルパー `scripts/seek-shot.sh` 内部でも `npx -y playwright screenshot` が実行されます。これにより npx 経由で npm レジストリからパッケージを取得し、初回実行時に Chromium バイナリをダウンロードするため、「サードパーティ製プラグイン、イメージ、リモートパッケージへの依存」基準に該当します（同作者パックの logo-animation と同様の判定理由）。② ブラウザ側成果物は cdn.jsdelivr.net から three.js（0.160 固定）と gsap（可変バージョン）を読み込みます。これは成果物フェーズでの参照であり、細則に基づき実行時の不正通信とはみなさず開示情報として記載しています。スキル自体は認証情報/envの読み取り、業務 API の呼び出し、情報収集、保護の回避を行わないため、レッド判定には該当しません。発火条件：リモートからの取得は検証ループ（スクリーンショット／モンタージュ生成）を実際に実行した場合にのみ発生し、HTML の記述やブラウザでの手動確認のみでは発生しません。
5二重目の独立検証
- [ok] 外部依赖调用点复核（npx playwright / ffmpeg / three.js / gsap） — SKILL.md Verify loop 内确有 `npx playwright screenshot --wait-for-timeout=500 "file://$PWD/iso.html?t=1.2" frame-mid.png`；仓库根 scripts/seek-shot.sh 与 contact-sheet.sh 分别为 npx playwright 与 ffmpeg；reference 第 7 节确有 `import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js";` 与 `import gsap from "https://cdn.jsdelivr.net/npm/gsap/+esm";`。四条均落地。
- [ok] 投影主张与代码对账 — `rotateX(60deg) rotateZ(45deg)` 与 reference 给出的 matrix3d 预乘常量（0.707 / 0.409 / 0.816）自洽：cos30≈0.866…、sin30=0.5 与 0.707/0.409 的推导一致，能把地面轴压到屏幕 ±30°；Three.js 用的确为 OrthographicCamera 且 position 三分量相等（10,10,10）→ 经典 iso 视角。未见「用 PerspectiveCamera 冒充 iso」的自相矛盾。
- [ok] 无凭证 / 无 env / 无业务 API 反查 — 两个文档与三个仓库脚本中无 API_KEY/token/secret/.env 读取、无 curl/wget、无 fetch 到业务端点；唯一远程动作是包管理器与 CDN 静态资源。判 orange 的依据是「远程包/镜像」，不含凭据读取。
- [ok] 目录资产面清点 — skills/isometric-animation/ 下仅 SKILL.md（178 行）、references/ 一份 253 行 cookbook、0 字节 README.md；无 scripts/、无模板、无数据文件——「纯指令 + 内联代码片段」结论成立。
- [discrepancy] CDN 依赖的版本纪律差异 — 同一份 reference 内两种取法并存：three.js 钉到 0.160（可复现），gsap 走 `+esm` 浮动入口（上游发新版本即变）。这不是错误，但使「同一份 HTML 长期行为一致」的保证只覆盖 three.js 一侧；已在 verdict.risks 中标注。
- [discrepancy] 跨引用可解析性 — SKILL.md 引用的 `scripts/seek-shot.sh`、`scripts/contact-sheet.sh` 位于仓库根，单装本 skill 目录会悬空（需装整个 repo）；正文把「成为视频的一部分」的路径交回同 repo 的 Remotion 路线（remotion still 验证），该技法的归属 skill（remotion-video）不在本 repo 的 5 个 skill 中。
- [ok] 功能声明 vs 实际能力 — frontmatter 宣称覆盖 CSS 3D transforms / SVG iso planes / Three.js OrthographicCamera 且强调 no build step；正文 Build-tool choice 与 reference 第 1–7 节逐条兑现，交付确为单文件 HTML（CDN 方式），无夸大。
6結論
最適な用途： 構造的な関係性を「量感」を持って可視化したい場面に最適です：積層レイヤー／フロア／技術スタックタワー、押し出しブロック型インフォグラフィック、分解図（分解と組み立て）、アイソメグリッドマップ風レイアウト、わずかなカメラドリフトや視差で静止画に生命感を宿す 2.5D イラストなど。3段階の実装手段（CSS 3D / インライン SVG / Three.js 正交カメラ）は「要素数 × 厳密な遮蔽の要否」に応じて選定可能です。
不向きな用途： 正確なパースや被写界深度（映画的なカメラワーク）を必要とするシーンには不向きです（パースペクティブを意図的に禁止しているため）。大量の動的ジオメトリや物理シミュレーションを扱う用途（通常の Three.js/WebGL パイプラインを推奨、本スキルは正交アイソメまで）、およびテキスト中心で幾何学的要素が極めて少ないレイアウト（投影規律の恩恵がないため）にも適していません。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload isometric-animation.tar.gz
sha256:
Option B · Copy Guide for Agent0e7ea0aa5a9ac077…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 3e2d411b72.