skills.rest
ankaboot-source
ankaboot-sourceOFFICIAL
Explore all skills by this author →
WebsiteGitHub

review-animations

Reviews animation and motion code against ten craft standards with tiered findings and verdicts.

2|Updated Jul 25, 2026
Search Tags:#code review#accessibility#css#animation#motion design#easing#framer motion
One-click install
npx skills add https://github.com/ankaboot-source/boucle --skill review-animations-ankaboot-source
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: review-animations
Source: https://github.com/ankaboot-source/boucle/tree/main/.jcode/skills/review-animations
Command: npx skills add https://github.com/ankaboot-source/boucle --skill review-animations-ankaboot-source

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animation code often passes review because it technically works, yet feels sluggish, fires too often, drops frames, or ignores accessibility. This Skill applies a strict, opinionated craft bar to motion code so feel-breaking regressions are caught before merge. ## Core Features & Use Cases - Standards-based review: Measures every animation in a diff against ten non-negotiable rules covering easing, duration, transform origin, interruptibility, GPU-only properties, and accessibility. - Precise value citations: Pulls exact cubic-bezier curves, duration tables, and spring configurations from STANDARDS.md instead of approximating. - Structured output: Produces a Before/After/Why findings table plus a tiered verdict ending in an explicit Block or Approve decision. - Use Case: A pull request adds a dropdown that animates with transition: all 400ms ease-in from scale(0). The review flags the unbounded transition, the ease-in curve, the over-300ms duration, and the from-nothing scale, then prescribes transform 200ms ease-out from scale(0.95) with opacity. ## Quick Start Review the animation and motion code in this pull request and give me a findings table with a block or approve verdict.

Frequently Asked Questions about review-animations

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

FAQPage Schema
How do I review CSS animation code for quality?▼

Measure each animation against concrete rules: UI durations under 300ms, ease-out for entering elements, transform and opacity only, correct transform-origin, and interruptibility for rapidly triggered motion. This Skill automates that check and outputs a findings table with a block or approve verdict.

What animation mistakes fail a motion code review?▼

Hard failures include transition: all, ease-in on UI, scale(0) entrances, durations over 300ms without justification, animating layout properties like width or margin, keyframes on toasts or toggles, and missing prefers-reduced-motion handling.

Does Framer Motion x and y animate on the GPU?▼

No. Framer Motion x, y, and scale shorthands run on the main thread via requestAnimationFrame and can drop frames under load. Use the full transform string, such as transform: translateX(100px), to get hardware acceleration.

When should I use springs instead of CSS transitions?▼

Use springs for dynamic, interruptible, gesture-driven motion like drag-to-dismiss or elements that should feel alive, since springs maintain velocity when interrupted. Use CSS transitions or @starting-style for predetermined motion, which runs off the main thread.

Can this review general code instead of animations?▼

No. The Skill is scoped exclusively to animation and motion code and declines general code review requests, pointing to a general review skill instead. Non-motion changes in a diff are out of scope.

Related Skills

Explore More Design & Creative Skills→
AO-HySAO-HyS

review-animations

Reviews animation and motion code against ten craft standards with tiered findings.

Official
Intermediate
xzedmxzedm

review-animations

Reviews animation and motion code against ten craft standards covering easing, duration, origin, and accessibility.

Community
Intermediate
Jatinkrmahato993203Jatinkrmahato993203

design-audit

Audits frontend codebases for motion gaps, accessibility violations, performance issues, and design inconsistencies.

Community
Intermediate
krzemienskikrzemienski
2

web-validation

Automates browser-based validation of web applications for runtime issues, visual regressions, and more.

Community
Advanced