Ask Claude to Write CSS Keyframe Animations
CSS keyframe animations are powerful but always involve looking up cubic-bezier() values and second-guessing transform-origin. Just describe the motion and let Claude write it.
Write a CSS keyframe animation called fadeSlideIn that fades an element
in from opacity 0 while sliding it up 16px. Duration 300ms, ease-out timing.
Also add a prefers-reduced-motion media query that disables the slide but keeps the fade.
Claude knows to add will-change: transform, opacity for GPU acceleration, respects prefers-reduced-motion for accessibility, and uses forwards fill mode so the animation state persists.
For loading skeletons and shimmer effects:
Write a CSS shimmer animation for a skeleton loading screen.
The element is a grey rounded rectangle. Animate a highlight moving
left to right repeatedly. Use a linear gradient approach.
If you're working in React with Tailwind, Claude can convert animations to Framer Motion variants:
Convert this CSS keyframe animation to a Framer Motion variants object.
Add an exit variant that reverses the entrance animation.
[paste your CSS]
For Vue projects it can generate the equivalent using <Transition> component hooks and CSS classes.
Describe the motion, skip the keyframe math — Claude has the timing functions memorised.
Log in to leave a comment.
The /security-review command scans your uncommitted changes for injection vectors, auth gaps, hardcoded secrets, and other common vulnerabilities.
The SessionStart hook fires when any session begins or resumes, making it ideal for loading environment variables and running one-time setup scripts.
Ask Claude to write property-based tests for your functions using fast-check — it identifies the mathematical invariants in your code and generates tests that cover inputs you'd never enumerate by hand.