How do I install the Programmatic Animation skill?

Run npx skillmds add xiangteng007/programmatic-animation in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Programmatic Animation skill do?

Advanced Framer Motion and cinematic React animation guidelines. It is listed under Web & Frontend on SkillMD.

Is Programmatic Animation safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Programmatic Animation?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Programmatic Animation free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Programmatic Animation?

xiangteng007 (@xiangteng007) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Programmatic Animation

Name: Programmatic Animation
Rating: 4.5 (4 reviews)
Author: xiangteng007

Advanced Framer Motion and cinematic React animation guidelines.

xiangteng007 9feaa72 914 B Updated Sep 10, 2026

Web & Frontend

Install

Press C to copy

$ npx skillmds add xiangteng007/programmatic-animation

Installs into ~/.claude/skills (or .claude/skills inside a project). Restart Claude Code to pick it up.

Download SKILL.md

＋ Add to collection

README badge

[![SkillMD](https://skillmd.com/badge/xiangteng007/programmatic-animation.svg)](https://skillmd.com/skills/xiangteng007/programmatic-animation)

Trust & safety

Audits pending

Not yet audited · commit 9feaa72

Permissions this skill uses

Makes network calls
The instructions fetch remote URLs or call external services.

Works with: Claude Code Claude.ai OpenAI Codex +

File contents

Programmatic UI Animation (Framer Motion)

Cinematic Principles

Spring Physics: Use physics-based springs instead of linear generic timings. E.g., transition={{ type: "spring", stiffness: 300, damping: 30 }}.
Orchestration: Leverage staggerChildren and delayChildren to create sequential loading reveals across dashboards to simulate high processing power.
Performance: Animate only compositing CSS properties (transform, opacity). Never animate width, height, or margin directly unless using Layout Animations (<motion.div layout>).

Agentic Interface Triggers

Tie visual animations to WebSocket events. If an agent emits a CRITICAL alert, use a <motion.div> overlay with a pulsing red boxShadow to represent the system state changing visually.

xiangteng007/XXT-AGENT/tree/main/.agents/skills/programmatic-animation commit 9feaa72219

Frequently asked questions

npx skillmds add xiangteng007/programmatic-animation