temp_preferences_customTHE FUTURE OF PROMPT ENGINEERING

React Animation & Transitions Code Reviewer

Expert review of React animation implementations covering CSS transitions, Framer Motion, accessibility, performance, and animation patterns.

terminalchatgpttrending_upRisingcontent_copyUsed 378 timesby Community

performancecode-reviewfrontendframer-motionaccessibilityanimationcss

chatgpt

0 words

System Message

## Role & Identity You are a Senior Frontend Engineer specializing in web animations with expertise in CSS transitions/animations, Framer Motion, React Spring, and GSAP. You balance animation quality with performance and accessibility. ## Task & Deliverable Review the submitted animation code for performance correctness, accessibility, and animation quality. ## Step-by-Step Review Process 1. **GPU Composition** — Animating `transform` and `opacity` (compositor thread) vs. layout-triggering properties. 2. **Framer Motion** — `AnimatePresence` correctness, layout animation, variant propagation, `useAnimation` patterns. 3. **CSS Transitions** — `transition` property order, `will-change` appropriate use, transform origin. 4. **Reduced Motion** — `prefers-reduced-motion` media query, Framer Motion `useReducedMotion`, motion alternatives. 5. **Performance** — `will-change` overuse, excessive DOM animation (vs. canvas/WebGL), GC pressure from animation values. 6. **Animation Timing** — Duration appropriateness (300ms for UI, 150ms for micro), easing function selection. 7. **Mount/Unmount** — Exit animation correctness, animation on initial mount (desirable vs. distracting). 8. **Accessibility** — No flashing (epilepsy risk), no motion that cannot be disabled, focus during animation. 9. **React Spring** — `useSpring`/`useSprings` correctness, config physics parameters. 10. **SVG Animation** — SVG path animation, `stroke-dasharray` technique, SVG viewBox correctness.

User Message

Review this animation code: {&{ANIMATION_CODE}}

About this prompt

## React Animation & Transitions Code Reviewer A **web animation expert review** covering GPU-composited properties, `prefers-reduced-motion` compliance, Framer Motion patterns, and animation performance — ensuring smooth, accessible animations. ### Use Cases - Find animations triggering layout recalculation instead of using GPU-composited transform/opacity - Audit Framer Motion AnimatePresence for correct exit animation configuration - Review prefers-reduced-motion implementation for WCAG 2.3.3 (Animation from Interactions) compliance

When to use this prompt

check_circleFind animations triggering layout recalculation instead of GPU-composited transform and opacity properties.
check_circleAudit Framer Motion AnimatePresence for correct exit animation configuration and unmount handling.
check_circleReview prefers-reduced-motion implementation for WCAG 2.3.3 Animation from Interactions compliance.

signal_cellular_altintermediate

Latest Insights

Stay ahead with the latest in prompt engineering.

View blogchevron_right

How to Write System Prompts That Actually Work

Article

person Admin•schedule 5 min read

How to Write System Prompts That Actually Work

System prompts set the rules of the game for every AI interaction. This hands-on guide shows you exactly how to structure them for reliability and consistency.

Claude vs GPT-4o: Which Model Fits Your Use Case?

Article

person Admin•schedule 5 min read

Claude vs GPT-4o: Which Model Fits Your Use Case?

Choosing between Claude and GPT-4o is less about which is "better" and more about which fits your specific task. Here is a practical breakdown.

How Our Design Team Cut Brief-Writing Time by 70% with AI

Article

person Admin•schedule 5 min read

How Our Design Team Cut Brief-Writing Time by 70% with AI

A real-world case study on how a 12-person design team at a product agency standardised their creative brief process using prompt templates on PromptShip.

Why AI Hallucinations Happen (and How to Reduce Them)

Article

person Admin•schedule 5 min read

Why AI Hallucinations Happen (and How to Reduce Them)

Hallucinations are not bugs — they are a fundamental property of how language models work. Understanding why they happen is the first step to minimising them.

The State of AI Coding Assistants in 2026

Article

person Admin•schedule 5 min read

The State of AI Coding Assistants in 2026

From autocomplete to autonomous agents — AI coding tools have changed dramatically. Here is where things stand and what to expect next.

From Idea to Shipped Prompt: A Solo Founder's AI Workflow

Article

person Admin•schedule 5 min read

From Idea to Shipped Prompt: A Solo Founder's AI Workflow

One founder. No team. A dozen AI-powered tools and a tight prompt library. Here is the workflow that runs a bootstrapped SaaS doing $15k MRR.

Recommended Prompts

chatgptshieldTrusted

bookmark

Frontend Performance Optimization Reviewer

Expert frontend performance review covering Core Web Vitals, bundle size, rendering performance, lazy loading, and image optimization.

Design System Component Code Reviewer

Expert review of design system component implementations covering API design, variant patterns, accessibility, composability, and documentation.

Frontend Form Handling Code Reviewer

Expert review of form implementations covering validation UX, controlled/uncontrolled patterns, accessibility, error states, and React Hook Form.

React Native Code Reviewer

Expert React Native review covering performance, bridge usage, native module integration, platform-specific code, and mobile best practices.

Animation Library Optimization

Structured animation library analysis engine — takes your specific context and constraints and delivers an expert-level action plan you can execute immediately.

Scalable Frontend Development Solutions

Structured scalable frontend development solutions analysis engine — takes your specific context and constraints and delivers an expert-level action plan you can execute immediately.

star 0fork_right 106

bolt

pin_invoke