skills.rest
tcytan
tcytanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

team-motion-design

Orchestrates research, choreography, animation implementation, and motion testing for UI animation systems.

1|Updated May 12, 2026
Search Tags:#motion design#prefers-reduced-motion#GPU performance#animation tokens#scroll choreography#will-change budget#compositor-only
One-click install
npx skills add https://github.com/tcytan/tecton --skill team-motion-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: team-motion-design
Source: https://github.com/tcytan/tecton/tree/main/.claude/skills/team-motion-design
Command: npx skills add https://github.com/tcytan/tecton --skill team-motion-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It helps teams design and implement consistent UI motion by coordinating research, choreography, animation implementation, and performance/accessibility testing to avoid jank and reduced-motion regressions.

Core Features & Use Cases

  • Unified motion pipeline via team-worker orchestration: Runs a structured research → choreography → animation → performance verification workflow with optional GC fix loops when FPS or compositor safety fails.
  • Motion tokens and reusable choreography outputs: Produces easing/duration/stagger tokens plus scroll/choreography sequence specs suitable for both token-based and component/page motion modes.
  • GPU/performance and reduced-motion compliance checks: Enforces compositor-only animation rules (e.g., transform/opacity), validates will-change budgets, detects layout thrashing patterns, and ensures prefers-reduced-motion fallbacks.

Quick Start

Ask the AI: "Run team-motion-design to create a motion-token system and implement scroll reveal animations for my UI, ensuring 60fps performance and reduced-motion fallbacks."

Frequently Asked Questions about team-motion-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a UI motion design system that avoids layout thrashing?▼

To build a UI motion design system that avoids layout thrashing, enforce compositor-only animation rules by restricting properties to transform and opacity, and validate will-change budgets to prevent GPU performance degradation.

What is the best way to implement scroll choreography with animation tokens?▼

The best way to implement scroll choreography with animation tokens is to generate reusable easing, duration, and stagger tokens alongside sequence specs, ensuring 60fps performance through compositor-safe constraints.

How does prefers-reduced-motion compliance work for UI animations?▼

Prefers-reduced-motion compliance works for UI animations by detecting the user's operating system setting and providing accessible fallbacks that disable or simplify scroll choreography and component-level motion sequences.

Why does my UI animation drop frames and fail compositor safety checks?▼

Your UI animation drops frames and fails compositor safety checks when it animates non-compositor-only properties, exceeds the will-change budget, or triggers layout thrashing patterns that block GPU hardware acceleration.

Can I run automated performance remediation for component-level animations?▼

Yes, you can run automated performance remediation for component-level animations by executing up to two GC fix loops that resolve FPS failures and compositor safety issues based on performance report feedback.

Related Skills

Explore More Design & Creative Skills→
ll1llkll1llk

design-system

Manage token-based UI design and generate slides with design tokens.

Community
Advanced
catlog22catlog22
76

team-motion-design

Design and validate motion systems for UI animation and reduced-motion accessibility.

Community
Advanced
mohamedgshoaibmohamedgshoaib
5

fixing-motion-performance

Identify and resolve UI animation performance issues in CSS, WAAPI, and JS-driven systems.

Community
Intermediate
mmartinsolivmmartinsoliv

animation

Design UI animations with transform and opacity effects and reduced-motion fallbacks.

Community
Intermediate