fixing-motion-performance
Fixing Motion & Performance
Before You Start
- Read the target file(s) to understand current implementation.
- Read
frontend/src/styles/global.cssfor existing animation patterns. - Read
frontend/src/styles/responsive.cssfor theprefers-reduced-motionrule.
CSS Animation Rules
GPU-Composited Properties Only
Only animate properties that trigger compositing, not layout or paint:
| Safe (Composite) | Avoid (Layout/Paint) |
|---|---|
transform |
width, height |
opacity |
top, left, right, bottom |
More from colaberryintern/colaberryenterprise_ai_leadershipaccelerator
baseline-ui
Output the project design system reference — colors, typography, spacing, component patterns. Invoke when discussing visual consistency, design tokens, or referencing the style guide.
16ui-ux-design
Comprehensive UI/UX design — user research, wireframes, mockups, prototyping, and design review. Invoke for new feature design, page redesign, UX audit, or user flow planning.
1frontend-design
Generate React + Bootstrap 5 frontend components and pages following the project design system. Invoke for any new page, component, layout, or visual modification.
1fixing-accessibility
Audit and fix WCAG 2.1 AA accessibility issues in React components. Invoke for accessibility reviews, screen reader support, keyboard navigation, color contrast, and ARIA attributes.
1