agentleFS
Sign inStart free
soilmasssoilmass/motion-design-agent/skills/code-generation/SKILL.md

code-generation

Skill7 starsChanged 10 months agoMITView on GitHub

Generate production-ready animation code from specifications. Use when transforming animation specs into CSS, GSAP, Framer Motion, or Remotion implementations with token references, reduced motion support, and performance optimizations.

5 other projects use a version of this.

Adopted by

Most recently taken up by

The file

Create a free account to mount
Files
SKILL.md

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

PlatformOutput FormatTemplate
CSSKeyframes + Transitionscss-keyframes.template.txt, css-transition.template.txt
GSAPTimeline functionsgsap-timeline.template.txt
Framer MotionVariants + hooksframer-motion-variant.template.txt
RemotionReact componentsremotion-component.template.txt

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

Tokenmssecondsframes@30fps
short-1500.052
short-21000.13
short-31500.155
short-42000.26
medium-12500.258
medium-23000.39
medium-33500.3511
medium-44000.412
long-14500.4514
long-25000.515

Easing Tokens

TokenCSSGSAP
standardcubic-bezier(0.2, 0, 0, 1)power2.out
emphasized-deceleratecubic-bezier(0.05, 0.7, 0.1, 1)power3.out
emphasized-acceleratecubic-bezier(0.3, 0, 0.8, 0.15)power2.in
standard-deceleratecubic-bezier(0, 0, 0, 1)power2.out
linearlinearnone

Spring Tokens

TokenDampingStiffnessMass
standard151501
snappy253000.5
bouncy101801
gentle251001.2
celebratory81801

Platform Support Matrix

Spring Physics

PlatformSupportImplementation
CSSLimitedcubic-bezier(0.34, 1.56, 0.64, 1) approximation
GSAPFullelastic.out(1, 0.3)
Framer MotionFull{ type: 'spring', damping, stiffness, mass }
RemotionFullspring({ frame, fps, config })

3D Transform

FeatureCSSGSAPFramer MotionRemotion
perspectiveYesYesYesYes
rotateX/Y/ZYesYesYesYes
translateZYesYesYesYes
preserve-3dYesYesvia styleYes

Reduced Motion Detection

PlatformDetection Method
CSS@media (prefers-reduced-motion: reduce)
GSAPwindow.matchMedia('(prefers-reduced-motion)')
Framer MotionuseReducedMotion() hook
RemotionN/A (video) - option: reduced complexity export

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

Animation TypeReduced Motion Fallback
Entrance (fade + transform)opacity: 1; transform: none;
Exit (fade out)opacity: 0;
State change (hover, press)opacity: 0.9; or instant state
Loading (shimmer, pulse)animation: none; (static)
Error (shake)border-color: var(--error); (no motion)
Celebration (particles)opacity: 1; (skip particles)

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

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free