AI SummaryA Cursor rules booster providing animation and easing guidelines for Base UI design systems, helping developers implement consistent, performant animations across their projects.
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to add the "pure-ui — Cursor Rules" prompt rules to my project. Repository: https://github.com/MusKRI/pure-ui Please read the repo to find the rules/prompt file, then: 1. Download it to the correct location (.cursorrules, .windsurfrules, .github/prompts/, or project root — based on the file type) 2. If there's an existing rules file, merge the new rules in rather than overwriting 3. Confirm what was added
Description
A design system built with Base UI
Keep your animations fast
• Default to use ease-out for most animations. • Animations should never be longer than 1s (unless it's illustrative), most of them should be around 0.2s to 0.3s.
Easing rules
• Don't use built-in CSS easings unless it's ease or linear. • Use the following easings for their described use case: • ease-in: (Starts slow, speeds up) Should generally be avoided as it makes the UI feel slow. • ease-in-quad: cubic-bezier(.55, .085, .68, .53) • ease-in-cubic: cubic-bezier(.550, .055, .675, .19) • ease-in-quart: cubic-bezier(.895, .03, .685, .22) • ease-in-quint: cubic-bezier(.755, .05, .855, .06) • ease-in-expo: cubic-bezier(.95, .05, .795, .035) • ease-in-circ: cubic-bezier(.6, .04, .98, .335) • ease-out: (Starts fast, slows down) Best for elements entering the screen or user-initiated interactions. • ease-out-quad: cubic-bezier(.25, .46, .45, .94) • ease-out-cubic: cubic-bezier(.215, .61, .355, 1) • ease-out-quart: cubic-bezier(.165, .84, .44, 1) • ease-out-quint: cubic-bezier(.23, 1, .32, 1) • ease-out-expo: cubic-bezier(.19, 1, .22, 1) • ease-out-circ: cubic-bezier(.075, .82, .165, 1) • ease-in-out: (Smooth acceleration and deceleration) Perfect for elements moving within the screen. • ease-in-out-quad: cubic-bezier(.455, .03, .515, .955) • ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1) • ease-in-out-quart: cubic-bezier(.77, 0, .175, 1) • ease-in-out-quint: cubic-bezier(.86, 0, .07, 1) • ease-in-out-expo: cubic-bezier(1, 0, 0, 1) • ease-in-out-circ: cubic-bezier(.785, .135, .15, .86)
Hover transitions
• Use the built-in CSS ease with a duration of 200ms for simple hover transitions like color, background-color,opacity. • Fall back to easing rules for more complex hover transitions. • Disable hover transitions on touch devices with the @media (hover: hover) and (pointer: fine) media query.
Accessibility
• If transform is use in the animation, disable it in the prefers-reduced-motion media query.
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster
Works With
Any AI assistant that accepts custom rules or system prompts