Home / All Skills / Content & Media Creation / shot-composition
English (EN)简体中文 (ZH)日本語 (JA)
Content & Media Creation · iart-ai/motion-design-skills

shot-composition

This skill should be used when the user asks to "compose a frame", "set up a grid", "plan shot composition", "place the focal point", "decide where elements enter and exit", "add a parallax/camera move", "adapt a layout for 16:9 / 9:16 / 1:1", or "keep content inside safe areas". Covers grids, safe areas, focal hierarchy, and 2D/3D camera framing.

L1 Basic · Source registration onlyV1 Commit-PinnedDual-pass Audit
Author iart-aiGitHub iart-ai/motion-design-skills ↗Stars 35License MIT（仓库根 LICENSE：'MIT License' / Copyright (c) 2026 iart.ai；.claude-plugin/plugin.json 的 license 字段亦为 MIT）Commit 3c129f769d
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

The entry point is a decision tree that first routes problems across four categories (static composition / entry & exit / depth & camera / multi-aspect ratio adaptation) before applying corresponding rules.

skills/shot-composition/SKILL.md
├─ A static frame's layout
What is happening here: Contrary to the common anti-pattern of 'picking camera moves before planning composition', the root asks 'what are you arranging?' Each of the four branches provides clear criteria and outputs, preventing static composition rules from being mistakenly applied to camera moves.

The spatial layer explicitly inherits from animation-principles: it spatializes the Rule of Thirds into power points and travel limits, while mapping the three-tier motion roles onto the Z-axis as depth layers.

skills/shot-composition/SKILL.md
**Cross-reference — apply the shared frameworks.** This skill is the spatial half of `animation-principles`. Apply them explicitly:
What is happening here: The two skills serve as the 'temporal half' and 'spatial half' of the same criteria framework. Here, cross-referencing rather than duplicating tables is strictly required to avoid conflicting terminology within the same pack.

Grids provide formulas instead of adjectives: a 12-column layout, an 8px baseline, a column width formula, and a concrete calculation example for 1920 width.

skills/shot-composition/SKILL.md
column_width = (content_width - (cols - 1) * gutter) / cols
What is happening here: Layout transforms from 'feeling orderly' into quantifiable values (e.g., width 1920 / margin 100 / gutter 24 → column width 121.3px), allowing composition decisions to be replicated downstream with precision.

A single focal point constraint paired with a fixed hierarchy priority: size > contrast > color > position.

skills/shot-composition/SKILL.md
Build **visual hierarchy** in this priority order to direct the eye: **size > contrast > color > position**.
What is happening here: It establishes a deterministic ordering of 'where the eye looks first', backed by a strict constraint of 'only one primary focal point per frame', diagnosing the root cause of 'flat frames or lack of focus'.

Depth layering directly maps to motion roles with explicit parallax speed multipliers: Background at 0.1–0.3x (Ambient), Midground at 0.5–0.7x (Secondary), and Foreground at 1.0–1.5x (Primary).

skills/shot-composition/SKILL.md
| Background | Ambient | 0.1–0.3x | low, often desaturated/blurred | sky, gradient, texture, set dressing |
What is happening here: Parallax is no longer an arbitrary coefficient—speed differentials are governed by role, and two layers are forbidden from executing primary action simultaneously. This serves as the direct fix for the 'moving like a flat template' issue.

Camera language enforces 'one shot, one intent': simultaneous push, pan, and roll are prohibited, paired with four standard 2D/3D camera moves and durations.

skills/shot-composition/SKILL.md
**One shot, one intent.** Don't push + pan + rotate simultaneously — combined moves read as chaotic.
What is happening here: Camera movement transitions from 'layering effects' into single-intent decisions; hero shots at 800–2000ms, ease-in-out, and the principle that 'slow equals cinematic' are specified in both text and reference.

Entry and exit directions carry semantic meaning (following reading direction signifies progression; reverse signifies back navigation), requiring entrance and exit from the nearest edge.

skills/shot-composition/SKILL.md
Motion that follows reading direction (left-to-right, top-to-bottom in LTR locales) feels natural and smooth; reversing it creates tension or signals "back/undo."
What is happening here: Directions are bound to narrative semantics (new content enters from the right/bottom, reversals move backwards), paired with an ease-out in / ease-in out easing family.

The multi-aspect ratio strategy first provides safe area percentage tables, then mandates 'restacking over cropping' for vertical aspect ratios.

skills/shot-composition/SKILL.md
Design the **focal point centered enough** that it survives all crops, then let secondary elements reflow per aspect.
What is happening here: Adaptation shifts from 'blind cropping' to conditioned design (first anchoring focus in the central safe band that survives all crops), reinforcing this decision via a 16:9→9:16 restacking example and ANTI-PATTERNS.

2Core Capabilities

01Grid system: 12 columns + 8px baseline + column width formula and calculation examples ready for immediate implementation
02Focal points and hierarchy: power point placement, single-focus constraint, and size > contrast > color > position priority ordering
03Negative space as a rhythmic element (not merely leftover empty space)
04Depth layering and parallax speed table (bg/mid/fg ↔ Ambient/Secondary/Primary)
05Camera recipes: push/pull, pan/tilt, follow, parallax, as well as whip-pan, orbit, and dolly-zoom in reference with explicit frame values and easings
06Entry/exit directional semantics and nearest-edge rule
07Safe area tables (16:9 / 9:16 / 1:1 / 4:5) and multi-aspect ratio restacking workflows
08Deliverable spec: a composition plan ready for handoff to implementation skills (frame specs / focal coordinates / layer map / entries & exits / camera moves / safe areas / cross-references)

3External Dependencies

KindDependency / Endpoint
packageThree.js（reference 的深度视差示例，产物期由实现方引入）
package下游实现 skill：gsap-web / remotion-video / after-effects（其中 gsap-web 属 iart-ai/web-animation-skills 仓库）
packageCSS scroll-driven animations / Pointer Events（reference 的纯 CSS 与 JS 视差示例）

4Recommended Governance & Evidence

Suggested Controls for Safe Operation
For Agent Runtime
Can be auto-loaded
For Administrators
Register source and version
Evidence & Triggers (File Paths & Excerpts)
  • SKILL.md: Pure prompt instructions and rule text; no script execution or external impact.
Audit Notes: Pure instruction/spatial methodology: no scripts, no external network calls, no credential access, and no disk writes; deliverable is a text-based composition plan. Notes (without altering assessment): 1) The deliverable spec references downstream implementation skills (gsap-web / remotion-video / after-effects), representing cross-skill delegation where classification does not transfer; gsap-web resides in an external repository (iart-ai/web-animation-skills) and cannot be resolved if only this pack is installed; 2) The reference contains Three.js / CSS / JS code snippets intended as artifact references, with adoption determined by the implementing party.

5Second-Pass Verification

  • [discrepancy] 被点名的 gsap-web 是否在本仓（防悬空引用） — 本仓 skills/ 下无 gsap-web；该 skill 位于另一工作副本 iart-web-animation-skills/skills/gsap-web（同一作者的另一 pack），其 SKILL.md 亦反向引用 shot-composition。因此这条交付链跨仓，只装 motion-design-skills 时 gsap-web 引用解析不到——属真实缺口（文档未标注「需另装」）。
  • [ok] reference 是否含可执行脚本或联网调用 — camera-and-grids.md 内只有 CSS/JS/GLSL 代码块与具名镜头参数表；全目录搜 npx/curl/fetch/URL 无执行期命中。
  • [ok] 与 animation-principles 的交叉引用是否一致（两处术语是否打架） — SKILL.md 明写 depth layers ARE the three motion layers projected onto Z，并把 1/3 规则拆成「构图三分点」与「行程不超过 1/3」两形态；与 animation-principles 原文表述一致，属同义映射而非冲突。
  • [unlocatable] 安全区百分比是否有出处 — 9:16 顶部 12-14% / 底部 18-20%、1:1 6-8%、4:5 6%/8% 等是经验值，pin 仓库内无平台文档引用或测量数据；平台 UI 尺寸会随版本变化，实际交付应以当期平台规格复核（本 pack 的 video-delivery-specs 给的是像素级版本）。

6Verdict & Scenarios

  • Translates spatial criteria into a decision tree and numerical tables ready for implementation (column width formula, 8px grid, parallax multipliers, shot durations)
  • Resolves frequent issues like 'flat visuals' or 'feeling like a moving template': three-tier depth roles + parallax speed differentials + forbidding dual-layer primary action
  • Provides the correct prerequisite (anchoring focal points in the central band) and proper action (restacking instead of cropping) for multi-aspect adaptation, reinforced with counterexamples
  • Deliverable is an explicit contract (composition plan field checklist + acceptance checklist) that implementation skills can execute immediately
  • Pairs seamlessly with animation-principles without redundancy: the spatial half references the temporal half, preventing terminology divergence within the same pack
    • Best for: Ideal for visual planning prior to animation/video production: defining grids and focal points, planning entry/exit directions, designing push/pull/pan/parallax camera moves, adapting a master layout to 16:9 / 9:16 / 1:1 / 4:5, or generating a composition plan for implementation handoff. Also suitable for reviewing existing compositions suffering from flatness, visual clutter, or cropped content.
    Not for: Not suitable for: 1) Concrete code implementation (use gsap-web, remotion-video, after-effects, or web animation skills; this skill only plans); 2) Defining motion timing and easings (use animation-principles); 3) Platform delivery specs and QC (use video-delivery-specs); 4) Projects pursuing dense, multi-focal, or anti-order aesthetics (default criteria must be manually overridden); 5) Precise platform UI overlay metrics (provides heuristic percentages rather than current pixel-accurate measurements).
    Install Agent-Ready
    ① Verified Mirror 2026-09-28
    Option A · Direct DownloadDownload shot-composition.tar.gz
    sha256: 5c7f5d87a93826a3…
    Option B · Copy Guide for Agent
    install.json
    Agents automatically download and verify mirrors from this JSON guide.
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 3c129f769d.