code-generation

تبدیل مشخصات انیمیشن به کد آمادهٔ تولید برای CSS، GSAP، Framer Motion و Remotion

این Skill مشخصات انیمیشن را به پیاده‌سازی production-ready برای CSS، GSAP، Framer Motion یا Remotion تبدیل می‌کند و tokenهای مدت‌زمان، easing و spring را به مقادیر مناسب هر پلتفرم نگاشت می‌دهد.

خروجی شامل پشتیبانی از reduced motion، بهینه‌سازی عملکرد، تایپ‌های TypeScript و مثال استفاده است؛ بنابراین تیم‌های طراحی و توسعه می‌توانند بدون تبدیل دستی specification، انیمیشن‌های سازگار و قابل نگهداری بسازند.

چه چیزی می‌گیرید

• تولید keyframe و transition برای CSS
• ساخت timeline برای GSAP و variants برای Framer Motion
• تولید کامپوننت React برای Remotion
• پشتیبانی از tokenهای duration، easing و spring
• نسخهٔ reduced motion و پیشنهادهای بهینه‌سازی عملکرد

برای چه کاری خوب است

• تیم‌های frontend که specification انیمیشن را به کد قابل استفاده تبدیل می‌کنند
• طراحان و توسعه‌دهندگانی که بین CSS، GSAP، Framer Motion و Remotion خروجی می‌گیرند
• پروژه‌هایی که دسترس‌پذیری، tokenهای طراحی و رفتار سازگار در چند پلتفرم اهمیت دارد

برای چه کاری نیست

• ساخت یا طراحی خودِ animation specification و recipe از ابتدا
• پروژه‌هایی که به انیمیشن‌های کاملاً دستی و خارج از tokenها نیاز دارند
• تولید محتوای ویدیویی بدون مشخصات حرکتی یا پارامترهای قابل تبدیل

دربارهٔ این اسکیل

Code Generation

Generate production-ready animation code from orchestrated parameters. This skill transforms animation specifications into platform-specific implementations with proper token references, reduced motion support, and performance optimizations.

Supported Platforms

Generation Pipeline

Animation Specification
         |
         v
+------------------+
|  Token Resolver  | -> Map tokens to actual values
+--------+---------+
         |
         v
+------------------+
| Platform Adapter | -> Convert to platform format
+--------+---------+
         |
         v
+------------------+
| Template Filler  | -> Interpolate values
+--------+---------+
         |
         v
+------------------+
| Reduced Motion   | -> Generate a11y variant
+--------+---------+
         |
         v
    Output Code

Token Resolution

Duration Tokens

Easing Tokens

Spring Tokens

Platform Support Matrix

Spring Physics

3D Transform

Reduced Motion Detection

Generation Workflow

Input Specification

interface AnimationSpec {
  name: string;
  recipe?: string;
  duration: DurationToken;
  easing: EasingToken | SpringToken;
  from: TransformState;
  to: TransformState;
  principles: string[];
  stagger?: number;
  platform: Platform;
}

Output Example

Input: "Modal entrance animation with spring physics"

Orchestrator Output:

{
  name: 'modal-entrance',
  recipe: 'modal-entrance',
  duration: 'medium-1',
  easing: 'spring-enter',
  from: { opacity: 0, scale: 0.95, y: 16 },
  to: { opacity: 1, scale: 1, y: 0 },
  principles: ['anticipation', 'staging'],
}

Generated Outputs:

• CSS: Keyframe + reduced motion
• GSAP: Timeline function + reduced motion check
• Framer Motion: Variants + hook + reduced variants
• Remotion: Component + spring + stagger variant

Reduced Motion Strategy

1. Replace transform animations with opacity fade
2. Shorten duration to 100ms maximum
3. Remove decorative secondary animations
4. Keep essential state indicators (focus rings, color changes)

Fallback Mapping

Output Checklist

• ☐ Token references documented
• ☐ Platform-specific format correct
• ☐ Reduced motion variant included
• ☐ Performance optimizations (will-change, etc.)
• ☐ Type definitions (TypeScript)
• ☐ Usage examples in comments

Related Skills

• animation-recipes - Input recipes for code generation
• easing - Easing token definitions
• duration - Duration token definitions
• accessibility - Reduced motion requirements

دانلود ZIP