ui-animation
The ui-animation skill designs, implements, reviews, and reverse-engineers UI motion, including CSS transitions, keyframes, springs, and gestures. It provides workflows for both creating new animations and extracting animation curves from screen recordings.
Is ui-animation safe to install?
Review the source first: our audit of ui-animation's source files found 3 shell commands, 1 external URL, file reads and writes (high risk). Every command and URL listed appears verbatim in the skill's source. The skill executes shell commands for video processing and package installation, and it reads/writes files for animation measurement and code generation.
How we audit skills: our security review methodology.
Who is this skill for?
Developers and designers building or auditing UI motion in web and mobile applications.
What can you do with it?
- Designing and implementing UI animations like transitions, springs, and gestures.
- Reviewing animation code against established standards.
- Reverse-engineering animation curves from screen recordings.
- Debugging animation performance and jank.
- Ensuring accessibility compliance for motion.
How good is this skill?
Quality score: 5/10. The skill documentation is comprehensive, providing clear workflows, specific implementation rules, and a structured approach to both creation and reverse-engineering.
What does the skill file contain?
# UI Animation - **IS:** designing, implementing, reviewing, debugging UI motion (springs, gestures, drag, easing, CSS transitions, keyframes, framer-motion), and measuring motion from a recording (extract frames, track, fit curves) to emit code plus a handoff spec. - **IS NOT:** choosing overall visual direction, palettes, or typography (use `ui-design`), auditing a whole page's UI quality (use `ui-audit`), or named text-effect specs (use the external `animate-text` skill where installed). Canonical home for reverse-engineering motion from a recording: route "reverse engineer this animation...
Frequently asked questions
When should I use this skill instead of ui-design?
Use ui-animation for motion-specific tasks like transitions, easing, and gestures. Use ui-design for overall visual direction, color palettes, and typography.
How does the skill handle accessibility?
The skill requires a prefers-reduced-motion: reduce path for every animation, which disables transform or keyframe motion while keeping state changes or opacity fades.
What is the preferred implementation priority for animations?
The skill prioritizes CSS transitions, followed by WAAPI, then CSS keyframes, and finally JavaScript requestAnimationFrame.
What dependencies are required for reverse-engineering animations?
You need ffmpeg for frame extraction and Python with opencv-python, numpy, and scipy for tracking and curve fitting.
Related skills
shadcn
217.3KDevelopers building UI components and design systems using shadcn/ui
The shadcn skill manages UI components and design systems for projects using the shadcn/ui framework. It provides tools to search, add, debug, and style components, while enforcing strict composition and styling rules based on project-specific configuration.
hyperframes
157.0KDevelopers and content creators who need to automate video production, motion graphics, or code-based video editing using HTML and CLI-based workflows
HyperFrames is an intent-routing skill that manages video, animation, and motion graphic creation by directing requests to specialized workflows. It renders video from HTML compositions where timing is defined by data attributes. The skill acts as a central entry point for authoring, editing, and rendering video projects.
extract-design-system
124.5KDevelopers and designers who want to initialize design systems based on existing public websites
This skill extracts design primitives from public websites and generates starter token files for projects.
emil-design-eng
114.3KDevelopers and designers building user interfaces who want to improve the feel and responsiveness of their software
This skill provides design engineering guidance based on Emil Kowalski's philosophy for UI polish, component design, and animation. It includes specific frameworks for animation decision-making, CSS transition techniques, and component interaction patterns.