Design & Motion · iart-ai/freelance-motion-skills
brand-motion-guidelines
This skill should be used when the user asks to "write motion guidelines", "create a brand motion system", "define easing and timing tokens", "document our animation principles", "build a motion language like Slack/IBM/Klarna", "set up entrance/exit/transition rules", or "add a reduced-motion / accessibility section". It outputs a fill-in-ready brand motion guidelines document.
L1 Basic · Source registration onlyV1 Commit-PinnedDual-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
Outputs a fill-in-ready brand motion guidelines document, structured and written strictly in seven fixed sequential sections (Principles → Tokens → Choreography → Logo Rules → States & Feedback → Accessibility → Do / Don't).
skills/brand-motion-guidelines/SKILL.md
A complete motion guidelines doc has seven parts. Author them in order:
What is happening here: Transforms writing guidelines from free-form prose into a structured deliverable; the sequence itself provides discipline—tokens must be established before choreography, otherwise patterns degenerate into one-off hardcoded values.
Assesses project scope before starting: a single site/campaign uses a lightweight version, a full product uses the complete seven-section structure, and cross-product + marketing + broadcast additions include Motion Personality presets.
skills/brand-motion-guidelines/SKILL.md
How many surfaces/teams will use this?
What is happening here: Avoids mismatches such as writing a heavy seven-section system for a simple landing page or a single-page brief for an enterprise multi-team design system. The second part of the decision dictates which token maps to which action.
Token naming must be semantic (based on purpose rather than literal values), allowing values to evolve without causing global renames.
skills/brand-motion-guidelines/SKILL.md
| Token values renamed constantly | Names are literal (`duration-250`) | Name by purpose (`duration-base`) so values can change |
What is happening here: A critical step enabling engineering implementation—components and choreography patterns reference tokens so changing a value requires only a single edit; this aligns with the rule that every animation must reference an established token rather than a magic number.
Asymmetric entrance/exit timings and stagger caps are codified as default rules: exits are faster than entrances, and staggers are set between 30–50ms.
skills/brand-motion-guidelines/SKILL.md
Default rule: exits are shorter than entrances; staggers use small offsets (30-50ms) so groups feel alive without dragging.
What is happening here: Converts animation intuition into verifiable rules accompanied by rationales; downstream choreography patterns must bind to explicit token combinations.
Accessibility is an essential, mandatory section rather than an appendix: covering reduced-motion, photosensitivity thresholds, focus visibility, and a strict ban on conveying state via color or motion alone.
skills/brand-motion-guidelines/SKILL.md
- **Photosensitivity**: no more than 3 flashes per second; avoid full-screen high-contrast strobing.
What is happening here: Integrates accessibility directly into the specification (linking with loading/success/error feedback rules to require accompanying text or icons) while providing fallback strategies for reduced-motion (cross-fades or instant cuts).
"Vibe-based guidelines" are explicitly treated as anti-patterns: adjectives cannot be engineered and inevitably lead to product inconsistencies.
skills/brand-motion-guidelines/SKILL.md
Why it fails: no named tokens, no values, no entrance/exit rule, nothing implementable — "smooth" and "snappy" contradict and every engineer interprets them differently
What is happening here: Enforces output quality standards by disqualifying vague prose (principles must include numerical rules, do/don'ts must specify milliseconds), which is why a dedicated "common mistakes → remediation" table is provided.
Positioned strictly as a system-of-record: foundational upstream theories (three pillars, three layers of motion, 1/3 rule) and personality presets are provided by companion skills; this document references them rather than duplicating them.
skills/brand-motion-guidelines/SKILL.md
This doc is the *system-of-record* for a brand's motion; two sibling skills supply the upstream theory and the per-project feel — reference and apply them, don't duplicate their tables:
What is happening here: Clarifies the division of labor across skills to prevent drifting token or easing tables across the same pack, with the trade-off that these cross-repository references must be noted (see second_pass).
The fill-in-ready template is embedded directly within SKILL.md (including versioning, ownership, eight subdivisions, and ✅/❌ placeholders).
skills/brand-motion-guidelines/SKILL.md
8. DO / DON'T
What is happening here: Enables the agent to immediately generate a client-reviewable document skeleton, with reference/full-template.md providing the expanded version and example copy.
2Core Capabilities
01Seven-section specification skeleton (Principles / Tokens / Choreography / Logo / Feedback States / Accessibility / Do-Don't)
02Duration token table (instant 100 → slower 600ms) and easing token table (cubic-bezier curves for standard/decelerate/accelerate/emphasized/spring)
03Choreography library: mapping entrance, exit, transition, and stagger patterns directly to token combinations
04Logo animation rules: permitted behaviors vs. absolute "never" lists (no stretching, no unconstrained rotation, no unauthorized color shifts, no repetitive triggering on every load)
05State and feedback motion: rules for loading/success/error/hover/focus and avoiding status conveyance through color or motion alone
06Accessibility section: reduced-motion fallback strategies, photosensitivity thresholds, and focus visibility
07Common mistakes to fix table (7 symptom-to-remedy prescriptions) and delivery checklist (9 self-check items)
08Fill-in-ready template (version/owner/eight sections and do-don't placeholders) plus expanded reference editions across three files
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| package | 兄弟 skill：animation-principles（三支柱 / 三层运动 / 1-3 规则）与 motion-art-direction（Motion Personality 预设）——均属 iart-ai/motion-design-skills 仓库 |
| package | spring(stiffness, damping) 令牌（实现侧能力，文档只给命名位） |
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 structured rule text; contains no script execution or external side effects
Audit Notes: Pure prompt/documentation methodology: contains no scripts, executables, outbound network requests, credential accesses, or disk writes; outputs a fill-in-ready specification document. Considerations (do not alter grading): 1) References sister skills (animation-principles / motion-art-direction) as upstream theory sources, which reside in a separate repository (iart-ai/motion-design-skills) and will not resolve if only this pack is installed (see second_pass); 2) Contains brand preference guidance (restraint, subtle springs, asymmetric entrance/exit), which serves as aesthetic anchoring rather than a risk.
5Second-Pass Verification
- [ok] 是否存在任何脚本或可执行片段 — 全目录只有 Markdown；代码块仅含 cubic-bezier 值、spring(stiffness, damping) 这类命名占位与模板文本，无 shell/JS 可执行语句。
- [discrepancy] 跨仓引用的两个兄弟 skill 是否能解析 — SKILL.md 的 Related frameworks 要求引用 animation-principles 与 motion-art-direction，但这两个 skill 属 iart-ai/motion-design-skills（另一仓库、另一 pack）。只安装 freelance-motion-skills 时引用悬空（文档既未标注需另装，也未内联最小词汇表），实际使用需同时装 motion pack。
- [unlocatable] 无障碍与光敏阈值等条款是否有出处 — 「≤3 次闪光/秒」「聚焦指示不可被动画隐藏」等属通用可访问性实践（对应 WCAG 类准则），但 pin 仓库内未给标准编号或链接；作为文档声明记录，合规场景应自行对照当期 WCAG。
- [ok] 「输出是文档不是代码」是否与全文一致 — SKILL.md 在 When to use、常见错误表与交付 spec 三处均强调产出为 structured document；令牌表里的 cubic-bezier 是内容而非实现代码，与声明一致。
6Verdict & Scenarios
Best for: Ideal when "how the brand moves" needs to be formalized into a reviewable document: creating a new brand motion system, unifying motion language across multiple teams or products, adding motion tokens to a design system, aligning motion tone between product and marketing teams, or supplementing accessibility reviews with reduced-motion and photosensitivity guidelines. Also suited as a freelance deliverable alongside other skills in the freelance pack.
Not for: Not suitable for: 1) Requests seeking raw implementation code for specific animations (use animation-principles, gsap-web, or remotion-video instead); 2) High-level creative direction and personality preset decisions (handled by motion-art-direction, which this skill merely references); 3) Environments where only the freelance pack is installed without the author's companion motion pack, causing upstream theory references to break; 4) Compliance-grade accessibility certification (this provides an engineering specification, not a compliance audit report).
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload brand-motion-guidelines.tar.gz
sha256:
Option B · Copy Guide for Agent9ea95c6713578b29…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit d85c2b4846.