Content & Media Creation · iart-ai/motion-design-skills
color-motion
This skill should be used when the user asks to "build a color palette for a motion piece", "make a gradient background", "animate a color transition", "interpolate colors smoothly", "fix muddy/gray gradients", "convert colors to OKLCH", "color-grade a video for mood", "fix washed-out After Effects renders", "gamma shift", "Rec.709 vs sRGB", "colors shifted after rendering", or "match preview to final video". Covers palette construction, gradients, perceptual interpolation (OKLCH/Lab), grading order, and video/render color management.
L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandNetwork AccessWrite FileDual-pass Audit
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
Palettes substitute quantitative discipline for taste debates: 1 primary + 1 accent + 2-3 neutrals; contrast and hierarchy rely on lightness/chroma rather than piling on hues.
skills/color-motion/SKILL.md
Limit hues. A strong motion palette is **1 primary + 1 accent + 2-3 neutrals**.
What is happening here: Converting "whether a color scheme looks good" into executable construction rules; the next section further explains why accent colors in dark themes require low-to-medium chroma + high lightness, rather than maximum saturation.
Interpolation must occur in a perceptually uniform space (OKLCH/OKLab/Lab)—linear interpolation in sRGB drops the midpoint into gray/muddy tones.
skills/color-motion/SKILL.md
Linearly interpolating two colors in sRGB passes through a desaturated, often gray or muddy midpoint (blue->yellow goes through gray; blue->red through muddy purple).
What is happening here: Providing the mechanism behind the most common symptom, "muddy gradients", and mapping it directly to CSS `linear-gradient(in oklch, …)` and @property registration (see next item).
A "premium" gradient is a recipe rather than inspiration: multi-radial stacking + grain + 8-20s slow drift.
skills/color-motion/SKILL.md
- **Animate slowly**: drift gradient positions over 8-20s with `ease-in-out alternate`. Slow is premium; fast gradient motion looks like a screensaver.
What is happening here: Quantifying a "high-end feel" into three actionable operations (slow, layered, add grain), along with cycle ranges and rationale (fast = screensaver look).
For colors to truly tween rather than snap-jump, they must be registered with @property (unregistered CSS custom properties exhibit discrete jumps).
skills/color-motion/SKILL.md
`@property` registration is what makes the color actually interpolate (unregistered custom properties jump instantly).
What is happening here: Explaining an extremely common CSS pitfall and providing a copyable registration + transition snippet; this is also the technical prerequisite for self-contained "single-file HTML delivery".
Color grading is a sequential pipeline: exposure/white balance → contrast → midtones/saturation → split toning → global balance; changing the sequence changes the result.
skills/color-motion/SKILL.md
Apply grading operations in this order; reordering changes the result:
What is happening here: Transforming color grading from "dragging sliders" into a pipeline with strict dependencies, offering classic cinematic recipes (teal shadows + orange highlights, kept restrained).
Render color management attributes "looks right in preview, washed out on export" to a four-stage gamma mismatch (working space, embedded tag, player interpretation, system display), rather than image content issues.
skills/color-motion/SKILL.md
the cause is a gamma/transfer mismatch across four stages — AE working space, the render's embedded tag, the player's interpretation, and the display/OS gamma — not the artwork.
What is happening here: Providing a systematic diagnostic mindset (the issue lies in the pipeline, not the asset), backed by verifiable numerical methods (placing a 50% gray patch; reading back 128→150+ after export confirms unintended brightening) and ffprobe tag inspection.
The validation environment must avoid QuickTime: defer to Chrome/Premiere/Resolve as ground truth.
skills/color-motion/SKILL.md
**Never grade or approve to QuickTime** — Chrome, Premiere, or Resolve is the correct reference for web delivery.
What is happening here: Explicitly handing adjudication authority for "one file looks different in two places" to the web delivery-side player, preventing browser failures after grading to match QuickTime.
The delivery loop is "single-file HTML + frozen frame screenshots": ?t=N pins the animation at a specific second using negative delays, allowing frame-by-frame inspection of banding and muddy midpoints for iterative refinement.
skills/color-motion/SKILL.md
**Verify loop — render → freeze → screenshot → check:**
What is happening here: Turning "how visual animation deliverables are inspected by an agent" into a deterministic workflow; subsequently capturing screenshots with npx playwright (see external_deps, which is also the reason this skill is graded amber).
2Core Capabilities
01Color palette construction: OKLCH notation, equal visual weight hue rotation, subtle tinting of neutrals toward the primary hue
02Gradient recipe library: dual-stop / mesh (multi-radial) / conic / drifting animation / grain dithering to remove banding
03Perceptual interpolation and palette code: three implementation paths via culori / d3-interpolate / @property
04Color grading order checklist and implementation layers (fast CSS filter version / GLSL split toning)
05Video/render color management: decision tree, AE project and output module settings, per-platform export color tags, QuickTime gamma avoidance
06Numerical verification: 50% gray test patch method + ffprobe inspection of color_primaries/color_transfer/color_space
07Self-contained HTML delivery contract (single file, single animation driver, freeze harness, reduced-motion)
08Verification loop: render → freeze → screenshot → check for banding/muddy midpoints → iterate and re-capture in place
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| cli | npx playwright screenshot（冻结帧截图，验收回路唯一命令） |
| cli | 打包助手 scripts/seek-shot.sh 与 scripts/contact-sheet.sh（仓库根，不在本 skill 目录；内部同样走 playwright 截帧 + ffmpeg 拼图） |
| package | culori（感知插值示例与色相路径控制） |
| package | d3-interpolate / d3-scale-chromatic（Lab/HCL 插值与色阶量化） |
| network | 交付 HTML 的可选 CDN 引用（仅当需要 JS 插值库时才引；属产物期由浏览器加载） |
| cli | ffprobe / ffmpeg（校验内嵌色彩标签 color_primaries / color_transfer / color_space） |
4Recommended Governance & Evidence
Suggested Controls for Safe Operation
For Agent Runtime
Graded/per-use authorization, sandbox recommended
For Administrators
Approval workflow, rollback support, full audit
Evidence & Triggers (File Paths & Excerpts)
- scripts/: Executes local script or command: npx playwright screenshot --wait-for-timeout=500 "file://$PWD/color.html?t=
- 网络端点: Declares external network access: npx package resolution: fetches the playwright package from the npm registry if not installed (and downloads the Chromium binary on first run)
- 本地工作目录: File I/O and artifact output: Screenshot files such as frame-mid.png / frame-0.png written to current working directory (emitted by playwright, not skill code).
Audit Notes: The amber rating is triggered by "dependency on third-party remote packages/images": The SKILL.md verification loop directly specifies `npx playwright screenshot …`—if playwright is not locally cached, it pulls the package from the npm registry and downloads the Chromium binary on first run (consistent with precedent in logo-animation and remotion-video within the same repository). No credential access, no environment variables, no business APIs, no TLS degradation, no evasion techniques; trigger condition is explicit (network fetch occurs only when playwright is not pre-installed/cached; fully local once pre-installed). Note: scripts/seek-shot.sh and contact-sheet.sh referenced in the text reside in the repository root rather than inside this skill's directory; per rating criteria, they are documented in risks without altering the rating.
5Second-Pass Verification
- [ok] npx playwright 是否真的写在 SKILL.md（橙档关键证据） — SKILL.md 的 Verify loop 步骤 4 之后给出该命令原文（含 --wait-for-timeout=500 与 file://$PWD/color.html?t=8）；同段第 3 步要求检查 banding 与浑浊中点。命令是验收回路的组成部分，不是可选项。
- [discrepancy] 正文引用的 scripts/ 助手是否随本 skill 目录分发 — SKILL.md 写「**Packaged helper** (`scripts/`)」，但 pin 目录下 skills/color-motion/ 只有 SKILL.md、references/、0 字节 README —— `scripts/` 实际在**仓库根**（scripts/README.md 自述为 verify-loop toolkit）。因此只装单个 skill 目录的镜像包里该引用悬空；同名写法也出现在 logo-animation、motion-background、remotion-video。对 pin commit 有效，属真实出入。
- [ok] 是否有其他隐藏的执行路径（下载/接口调用） — 全目录搜 curl/wget/fetch/XMLHttpRequest/api/child_process/process.env：零命中；唯一网络相关字符串是 npx 与交付 HTML 的 CDN 说明。
- [ok] culori / d3-interpolate 是否只是代码示例而非被执行的依赖 — 两处 import 均在 references/palettes-and-interpolation.md 的 Perceptual interpolation in code 小节内，作为给实现者抄的片段；skill 无 package.json、无安装步骤、不解析这些模块。
- [unlocatable] 颜色管理结论（QuickTime gamma、四段链路）是否可在源码内验证 — 这些是有明确立场的技术断言，但 pin 仓库内没有引用来源、没有测量脚本或样本文件；本次只读侦查也不运行渲染。文中给出的自证方法（50% 灰补丁回读、ffprobe 查 tag）用户可自行复现，故不视为空口断言，但数值本身未在本次核对。
- [ok] iart.ai 链接的性质 — reference 页脚为署名/营销链接（utm_source=github&utm_content=skill_footer），无跟踪脚本、不参与执行。
6Verdict & Scenarios
Best for: Suitable for motion color schemes and gradient backgrounds, scenarios requiring genuinely smooth color transitions (button states, theme switches, loaders), fixing "muddy gradients/banding", and addressing AE renders that appear washed-out, cross-platform color inconsistencies, or deciding export color tags. Also fits pipelines requiring self-contained HTML color swatches deliverable for screenshot-based inspection.
Not for: Not suitable for: 1. Strictly offline environments where npm packages cannot be fetched (the verification loop will fail unless playwright is pre-installed); 2. Full HDR/wide-gamut color science requirements (limited to Rec.709/sRGB and PQ/HLG export hints); 3. Use cases expecting the skill to include frame-capture scripts (no scripts/ directory exists here); 4. Requirements for actual video rendering and encoding capabilities (better suited for after-effects / remotion classes); this skill handles color decision-making and verification only.
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload color-motion.tar.gz
sha256:
Option B · Copy Guide for Agentcb1e39e4a0e5b855…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 3c129f769d.